Hacker News Reader

Comment by steakejjs | Hacker News Reader

I got tired of using font CDNs, didn't like extra round trips for the woff files, and I also really liked open-sans, so I made an OpenSans.css which inlines all the OpenSans fonts.

It makes my life a little more convenient. https://github.com/steakejjs/OpenSans-CSS/blob/master/OpenSa...

View on HN

How did you do this?

It's surprisingly not difficult.

I got the woff files, base64'd them, and then threw the output into several CSS files.

Words of warning, If you use Content Security policy, you must allow Unsafe Inline for the style-src directive.

One thing you might want to consider is just using the same family for each of those versions of the font, rather than using the same name as the font file, per this article: http://www.metaltoad.com/blog/how-use-font-face-avoid-faux-i...

Also, I hooked up support for data: URLs so you can use your stylesheet as a source for fonts (if someone was interested in extracting the .woff files back to individual files, for instance):

  webfont-dl -d "https://github.com/steakejjs/OpenSans-CSS/raw/master/OpenSans.css" \
    -o css/font.css --font-out=font --css-rel=../font --woff=link

Reply on news.ycombinator.com