google-webfonts-helper icon indicating copy to clipboard operation
google-webfonts-helper copied to clipboard

offer inline single css option

Open beppe9000 opened this issue 4 years ago • 7 comments

like https://plnkr.co/edit/ACR3CF?p=preview does

beppe9000 avatar Dec 30 '19 10:12 beppe9000

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.

nextgenthemes avatar Jun 29 '20 17:06 nextgenthemes

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 ?

beppe9000 avatar Jun 30 '20 11:06 beppe9000

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.

nextgenthemes avatar Jun 30 '20 11:06 nextgenthemes

other use cases include quick copy-pasting in wordpress custom css box. sometime hosted wordpress has no ftp access to file system 😐

beppe9000 avatar Jul 01 '20 23:07 beppe9000

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.

nextgenthemes avatar Jul 01 '20 23:07 nextgenthemes

Here you go, added it to my Google Webfont Downloader. However, base64 blows up the size to almost double.

nextgenthemes avatar Jul 02 '20 03:07 nextgenthemes

yeah, the key is to just use it responsibly. thnks :)

beppe9000 avatar Jul 02 '20 13:07 beppe9000