3 ms·
> Of course you can use WOFF2 as a Base64 encoded string: > ... > url('data:font/woff2;base64,...') format('woff2'), > url('data:font/
by mmastrac 11y ago
> Of course you can use WOFF2 as a Base64 encoded string:
> ...
> url('data:font/woff2;base64,...') format('woff2'),
> url('data:font/woff;base64,...') format('woff');
Please, pretty please don't Base64 the WOFF and WOFF2 fonts in the same file. That's basically just inflating your font size by a guaranteed 80% or so. A browser supporting WOFF2 is guaranteed to support WOFF!
I'd honestly recommend waiting until WOFF2 support is better before you use them at all unless you have server-side support detection. In a year or so it'll make sense. Now? Not so much. [1]
I do believe you should base64 encode your WOFF fonts and link the others. In fact, I wrote a tool for that (if you are pulling fonts from Google's or some other service). [2]
[1] http://caniuse.com/#feat=woff2 http://caniuse.com/#feat=woff2
[2] https://github.com/mmastrac/webfont-dl https://github.com/mmastrac/webfont-dl
- theandrewbailey 11y agoFrom time to time, I will run my blog through some optimization app, and it will complain about my CSS. I dig deeper, and realize that this app is running my CSS through the W3C CSS validator, which screams at data URLs.
- currysausage 11y agoIn a nutshell, this guy explains that the benefit of WOFF2 is that its "compression format offers a 30% average gain over WOFF 1.0", only to go on and demonstrate how to embed both WOFF1 and WOFF2 as data: URLs in the same CSS? Major facepalm.