Inline Google fonts to further reduce number of blocking CSS resources

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 1.

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 ",400italic|Raleway:500" \
  -o css/font.css

  1. I provide fallbacks for unsupported browser anyway. See how nice I am ;) ↩︎