> 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]
In 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?
From 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.
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
[2] https://github.com/mmastrac/webfont-dl