[Snowman] CORS problem when loading fonts

Question

Hi all. This happens in Snowman, but I guess it can be the same in any other format.

I have my font files in a subfolder next to the game file. I try to load this font with a simple CSS declaration:

@font-face {
  font-family: "Baskerville";
  src: url("fonts/LibreBaskerville/400.woff") format('woff');
}

The console tells me that this fails because of CORS, Cross Origin Resource Sharing policy.

I haven't found any good solution for Twines that are distributed as HTML files. I could load the font from the internet, but that would require an internet connection at any possible time the player would play, so I'm not too fond of it.

Another suggestion I've found is encoding the fonts with base64 and including them in the CSS file itself.

Have you run into this problem? Do you have any recommendations?

Answer 1

Unfortunately this is (rightly) a restriction of the security system of some modern web-browsers, so if you wish to both: keep allowing the end-user to view the story HTML file locally; and want to support all modern web-browsers; then you will need to convert your src property to a Base64 data value.

There are a number of ways you can do this, which you use depends on where you sourced the font file from in the first place.

If it is a Google Font then use can use the following online utility.

Otherwise this article explains on how to use Font Squirrel

 

Comments

Thank you! I'll go the base64 route.