Load Google Fonts Faster in WordPress | Hacker News Reader

Load Google Fonts Faster in WordPress

coffeencoding.com

58 pointspplonski8621 comments

This starts out well outlining the problem then ends abruptly with "use this magical third party service to make your problems disappear" with no insight into how it's solving the problem.

It isn't providing another third-party service - just wrapping some JS around Google fonts d/l. If this is something you don't prefer, self-hosting font files with font-display property is the only way out.

Also, this isn't as performant as correctly self-hosting font files (because of separate DNS lookup to google font domain involved).

Or you could just use standard fonts and save the bandwidth. sans-serif never hurt anybody.

sans serif isn't a font, it is a classification

No, but that's what I write in CSS if I want to use whatever sans serif font the user agent thinks is best.

https://css-tricks.com/sans-serif/

HOpe this helps for those who are wondering what sans-serif does exactly

Thats a good call in many cases, but it's definitely important to have more control when working to constraints. Generic family fallbacks can vary wildly in their box sizing.

Unfortunately in some languages default fonts are simply horrible.

Oh that's interesting. Do you have examples? That sounds like a bug in the user agent to me.

You have essentially four cases for Korean fonts:

- Gulim and Dotum, two sans-serif typefaces introduced with Windows 95 (!!!!!!) [1]. They have hand-fitted bitmaps (which are not that bad for small pixelated displays) and awfully hinted vectors. Their monospaced variants (Gulimche & Dotumche) still remain as the only portable choice for monospaced Korean fonts.

- Malgun Gothic, a sans-serif typeface introduced with Windows XP. Yeah this got much better! Except that it is not well hinted and thus eye-jarring for smaller texts (hopefully this concern will be obsoleted in the future). Also in my opinion it is slightly unbalanced than other alternatives.

- Noto & Source Han Sans CJK, a sans-serif typeface shipped with Android. This is even better than Malgun Gothic, except that it does not ship with Windows (hahaha). Its monospaced version is also very good, except that it does not ship with Windows and Android (you read right).

- And of course Apple Korean fonts. In the past they shipped AppleGothic which is slightly better than Malgun Gothic, and nowadays they ship Apple SD Gothic Pro which pretty much matches well with Noto Sans CJK.

Thus you go with Noto Sans CJK, Apple SD Gothic Pro, Malgun Gothic, and (hopefully never) Gulim or Dotum. And you know what? There is essentially a single different Korean font acceptable for each platform and their metrics drastically vary (Malgun Gothic is the biggest outlier IMO). And note that serif fonts are completely absent in this list---there is really the single most portable serif Korean font there, namely Batang, in the same page with Gulim and Dotum. If you want serif fonts in your web page you are simply doomed.

There are numerous attempts to improve Korean web typography. Spoqa Han Sans [1], an extremely subsetted version of Noto Sans CJK, is a good example. And it still weighs 441KB---at such size it will be a full-featured font for English but for Korean it is barely comfortable. And I don't know what can be done with this.

[1] Their prototypes were much older, back to Windows 3.1.

[2] https://spoqa.github.io/spoqa-han-sans/en-US/

That's why many define a "default font stack" - basically a default for each device:

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

It is fortunate that you have a lot of fonts to fill with.

On your list, Ubuntu font does not cover Hangul (>50 million people) at all for example. You are blessed to write in writing systems with good default fonts.

Not all of the 50 million people use Linux, so they should be covered with the previous fonts. But i'm curious - if some character cannot be displayed, will the browser try the next (or fallback) one automatically? I've been using this list for quite some time, but maybe it's time to revise it.

Oxygen isn't default on Plasma for quite a long time already. It's Noto.

and not get your users tracked by google.

The suggested solution is to use https://googlefonts.3perf.com/

Looks like the suggested solution is to use https://googlefonts.3perf.com/ - which seems to rewrite the link tag to a script that does some DNS prefetching and forces FOUT to get a faster load time. Seems like too much of a stopgap.

If you really want to fully control the font experience, download the font package and CSS from https://google-webfonts-helper.herokuapp.com/ and host them yourself, on the same CDN as your JS and CSS. That way they'll load in parallel with your site's other assets and you have full control over all cache control headers as well.

> they'll load in parallel with your site's

you still have to wait until the css declaration is fetched and parsed, so don't forget a Link: prefetch header on the response (or http push, but a prefetch in the http response header is easier to implement)

For my projects we end up embedding the fonts with base64. Much more manageable https://amio.github.io/embedded-google-fonts/

Can you help me to disable the Google fonts in W3TotalCache plugin?

Reply on news.ycombinator.com