4 ms·

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

• danieltillett 12y ago
  How did you do this?
  • steakejjs 12y ago
    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 12y ago
      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-italic-and-bold-browser-styles 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