google-webfonts-helper
google-webfonts-helper copied to clipboard
offer inline single css option
like https://plnkr.co/edit/ACR3CF?p=preview does
Why? I think base64 make the encoded files actually bigger and in an HTTP/2 world you do not need to care about saving http requests.
I often prefer such a solution for caching purposes and to avoid the flash of unstyled text problem. it is also useful in situations like the html code of emails where external requests are blocked by default by most clients.
I'm not the world is http2 yet, but what specific feature(s) do you refer to ?
With display: swap
the browser gives fonts a very short time to load the fonts. I do not think FOUC is really an issue nowadays. Also, if you bloat up your CSS, not lazy load your CSS then the browser will block rendering until the CSS and the fonts are fully loaded. I rather show people something while loading and may have some FOUC then to make them wait and highly likely bounce. The FOUC I see because of lazyloading CSS is super fast quick.
other use cases include quick copy-pasting in wordpress custom css box. sometime hosted wordpress has no ftp access to file system 😐
That is actually a pretty good used case, not thought about that. But the plnkr.co link you posted does it already perfectly no?
// well, it actually has a bug that the last URL gets not converted.
Here you go, added it to my Google Webfont Downloader. However, base64 blows up the size to almost double.
yeah, the key is to just use it responsibly. thnks :)