How did you do this?

steakejjs · on Dec 27, 2014

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.

mmastrac · on Dec 27, 2014

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