Loading fonts in Ruby on Rails project taking too much time

Question

I am in a Rails project and I am using two fonts which are in the /assets/fonts folder.

@font-face {
  font-family: FuturaStd-Light;
  src: url("/assets/fonts/FuturaStd-Light.otf");
}

@font-face {
  font-family: HelveticaNeue;
  src: url("/assets/fonts//HelveticaNeue.dfont");
}

The fonts are very big files (especially the second one) and it is taking forever to load them. And in every page the text appears after everything else.

Is there a better way to load the fonts? Is there a way to cache them? Any ideas?

Answer 1

@font-face is a wonderful technique, but large font files will definitely slow down your site. There are many techniques you can use to combat this:

• use a font-hosting service like google fonts or typekit
• host your font files on a CDN
• optimize your font files using a service like fontsquirrel

One thing in particular to watch out for is that IE will block the rendering of the entire page if there's a SCRIPT element before your stylesheet. So make sure that all your stylesheet links are above any javascript files you're loading.

Further reading:

• Web Font Performance: Weighing @font-face Options and Alternatives
• @font-face and performance
• fighting the FOUT