Inline Google fonts to further reduce number of blocking CSS resources

Posted on December 28, 2014  •  1 minutes  • 146 words

Most major browsers have support for .woff font format for quite awhile now. The number is around 85%+ with IE8 is the most high profile exception. But … who actually cares about IE8 right! Chances are if you are reading my blog, you won’t be using it anyway ¹.

Ok, I’m convinced. How do I download and use .woff fonts now?

There is a npm package called webfont-dl which will create a ready-to-use CSS file with .woff fonts inline and other font formats as well as fallback. Including it in your main stylesheet and you’re done. Maybe organize it in a /fonts/ folder and update the font links in the CSS. That’s it.

To install webfont-dl: (nodejs required)

npm install -g webfont-dl

To download the CSS and webfonts:

webfont-dl "http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic|Raleway:500" \
  -o css/font.css