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.
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
I provide fallbacks for unsupported browser anyway. See how nice I am ;) ↩