CSS, icon fonts, and dropbox: font not loading?!

RaHaN

Hi everyone !

I'm using SugarCube 2 and Twine 2 for my game, and using the fantastic https://icomoon.io/, I created a webfont containing vector icons for my story.

Everything works well when I test it locally (either through the online Twine tool or the Twine app), because, well, I installed the font on my system to work with it.

However, after trying different things for two days, I can't seem to get the font to load when accessing the HTML Twine file from my dropbox, through another machine that doesn't have the font installed. I have no idea why.

The dropbox folder where my story is hosted is here (you should be able to access it since it's in my public dropbox folder).

To access the story you can click here.

Lastly, here's the CSS bit where I setup the font (via the story stylesheet option of Twine 2):

@font-face {
  font-family: ‘ui’;
	src: url("fonts/ui.eot");
  src: local("☺"),
       url("fonts/ui.woff") format("woff"),
       url("fonts/ui.ttf") format("truetype"),
       url("fonts/ui.svg") format("svg");
  src: url("fonts/ui.eot?v=0.0.1");
  src: url("fonts/ui.eot?#iefix&v=0.0.1") format("embedded-opentype"), url("fonts/ui.woff?v=0.0.1") format("woff"), url("fonts/ui.ttf") format("truetype"), url("fonts/ui.svg?v=0.0.1#ui") format("svg");
  font-weight: normal;
  font-style: normal;
}
.ra {
  display: inline-block;
  font: normal normal normal 14px/1 ui;
  font-size: inherit;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: auto;
}

Since I'm not familiar with CSS, I'm sure I'm simply overlooking something that someone more experimented will catch easily, but I'm also wondering, given that I tried a lot of options to correct this issue, if it's not simply a limitation of dropbox hosting or something out of my coding.

Can anyone offer an explanation (and a solution ;p)?

RaHaN

So, for anyone stumbling on a similar issue, I found out that it seems dropbox doesn't allow for the fonts files to be loaded by the browser.

However, the solution is simple enough: base64 encoding (can be done by feeding your .ttf file to fontsquirrel) makes it work.