majodev / google-webfonts-helper

A Hassle-Free Way to Self-Host Google Fonts. Get eot, ttf, svg, woff and woff2 files + CSS snippets
https://gwfh.mranftl.com
MIT License
12.02k stars 420 forks source link

offer inline single css option #92

Open beppe9000 opened 4 years ago

beppe9000 commented 4 years ago

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

nextgenthemes commented 4 years ago

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.

beppe9000 commented 4 years ago

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 ?

nextgenthemes commented 4 years ago

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.

beppe9000 commented 4 years ago

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

nextgenthemes commented 4 years ago

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 commented 4 years ago

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

beppe9000 commented 4 years ago

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