Hi, I'm trying to add custom font to my game. I've already put the .ttf file in the game directory and editted game.publishfileextensions to include ;*.ttf, then in my initialization script I have the following code:

// Add custom font to CSS
fonturl = GetFileURL("Cinderela.ttf")
JS.eval ("$('<style>').appendTo('head').text('@font-face {font-family: FLF;src: url(\""+fonturl+"\");}')")

In this case, fonturl ends up being something like "quest://local/Cinderela.ttf?c=336000747"

When I start up the game and try to call the font with a <span style='font-family:FLF'> ... </span>, I get the following error in the console:

Font from origin 'quest://' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'res://' is therefore not allowed access.

Anyone know a way to overcome this error? Or perhaps some other way to add custom fonts to my quest game?

That's a little weird, and should probably be fixed in the desktop player.

However, you could try using a data: URI for the font as a workaround.

Thanks for the reply.

Taking your advice, I went ahead and converted the .ttf file into a data: URI string (used the following converter, in case someone else finds this useful: https://dopiaza.org/tools/datauri/index.php), then packaged that up into a .txt file to keep it from cluttering the game code. The resulting file ends up being about 1.5 times larger in filesize than the original .ttf, but it appears to do the trick.

Now, when I put the following in my initialization script:

// Add custom font to CSS
fonturl = GetFileData("CinderelaURIString.txt")
JS.eval ("$('<style>').appendTo('head').text('@font-face {font-family: FLF;src: url(\""+fonturl+"\");}')")

The font properly loads. Thank you.