Couldn't this increase FOUC? At least before you could load in your style-sheet before the font, but if you embed the font inside you get no styling at all until it can fetch all of the data, correct

The default method of loading CSS fonts has no FOUC (`font-display: auto` is `block`), so no need to base64 encode.

`font-display: swap` introduces FOUC but with a quicker first paint, which some find preferable (in Lighthouse terms, you're trading CLS for FCP).

If you're base64'ing with the intent of loading the font file sooner, just use:

     <link rel="preload" href="/assets/my-font.woff2" as="font" type="font/woff2" crossorigin>

This has the downside of loading a WOFF2 file for all browsers, even ones that don't support WOFF2. These days, ~all browsers support that format: https://caniuse.com/woff2

If you do this, you make the page slower to load for people blocking external fonts.

Not doing it is also nicer for people with slow/unreliable network access, where they can block fonts, or even if they don't block them, can access your page more quickly and have a render without the custom font.

What made you give up? As the article describes, self hosting fonts is as easy as making the static font files available and then adding a few lines of CSS. What solution would you want Google to offer?

Since caches are no longer shared between pages, it actually is often better to self host your fonts than rely on public CDN’s. Makes it even weirder that Google does not offer a simple solution to self host fonts.

https://dev.to/rstacruz/public-cdns-arent-useful-anymore-2b6...

Google Fonts lets you just download the font, right? So what's the problem with self-hosting them? They're not encrypted or anything. Like, I'm not sure what else you would want Google to do.

This is fantastic! I was recently trying to prepare a number of fonts for web use and there was a lot of friction -- each part of the process needed a different tool, each with its own weird quirks. Glypht looks to have everything in one place without any extraneous stuff or legacy cruft. I didn't even know it was possible to make a subset of weights for variable fonts. I'll be making thorough use of this, thank you!

Just found out about this recently. So lean and snappy compared to the default interface.

This is the way to do it!

this is really fascinating considering that they package it as a npm package which is then used by jsdelivr which is essentially a free really low latency sponsored/(essentially operated?) by cloudflare and fastly etc.

I just checked and jsdelivr has had like 300 billion requests past month and over 16,813 TB

Really fascinating stuff. I will try to use this from now on! (earlier I was thinking of using something like coollabs.io but I checked its code and I see that the fonts are served through something like bunnycdn from coollabs side which is cool but still)

Honestly, what other things would be better off packaged as npm packages as I never thought that packaging fonts as npm package should make so much sense but here we are!

Bookmarked!!

I had the same thought. Makes me think we're getting old and the old ways of the web just aren't known as widely anymore.

I've had to do this several times in the past because the customer firewall blocks google domains, and it never required a second thought. The only question I had was around the legality of doing so (which I checked on). Once I verified that, it was about 2 minutes of wget (or curl) the file down, stick in a static web server, and update the links in the HTML page and Bob's your Uncle

> an article like this getting this high in hacker news is just very wild to me

It might be because it's a "You should host web fonts from Google Fonts yourself" in disguise. The technical "How to" is almost not the important part here :-)

It may give some pause to web devs who hotlink to google here on HN without much thoughts and make them consider doing it differently next time.

I suspect many people upvoting it are doing it for this. Maybe upvotes here might actually mean "Please host Google Fonts yourself".

I’m old too, but have a different take on this type of content. Part of being old was the privilege of coming up within an industry when everything was documented and most things were searchable. IRC was the only walled garden and it was reasonably common for teams to turn their frequently asked questions into web content.

So things got to become common sense for us because it was easy to get overwhelmed in information on why it should be common sense. The web has changed dramatically - there is a lot of content in Discord servers and it’s rare for frequently asked Discord questions to turn into web content. Common sense isn’t as wide ranging, but that’s been replaced by extreme specialty knowledge.

I see this a lot in software companies when build tools crap out. Younger developers have much more specialized knowledge on the build tools and can outwork me when everything is on the happy path. Off the happy path, all the general bits and pieces we picked up through osmosis back in the day become very helpful.

I’m glad that articles like this are being promoted. This plumbing type knowledge will be useful many many times over the course of a career. Not everything has to be aimed at me to be good, you know?

I'm old,too. I remember when the default fonts of the web browser were good enough. Matter of fact, they still are, but today I, as a user, have to jump through some easy hoops to get the font of my choice ;)

100% agreed.

> Now, I'm aware that at least part of the reason this isn't the extremely obvious answer has to do with some friction on the downloading

Maybe it's changed, but I remember it always being very upfront and easy to download.

The instructions in this article are also silly.

Yes, click the "Get font" button as instructed, but then click "Download all" instead of "Get embed code" and then doing all those extra steps. You'll get a zip file with everything in it.

Hotlinking Google Fonts leaks your visitors' IP addresses to Google. This bothers some people.

For me the biggest benefit is that my customer doesn't have to whitelist a google endpoint to use our website. Secondary benefit is being in control of downtime and/or updates (though the secondary benefit on it's own is nowhere near enough to justify self-hosting to me, but for some people it might be)

Not the author, but last time I checked (3y ago), the fonts CDN was surprisingly slow, like hundreds of milliseconds of latency.

As the website I was optimizing was selfhosted, also selfhosting the font had a noticeable effect on the page load time. See https://github.com/SmilyOrg/photofield/commit/12352667c01624...

I'm not sure what you mean with the rest of the comment though, it's a very small change and it gets cached by the browser like other static assets, so I'm not sure what is the overkill here.

I have Cloudflare and I have the TTL set to 10 years

The method in the article just uses the Google Fonts CSS but with the paths modified

Some of my readers don't have Noto Sans (the best font) and Fira Code (the best font for coding) installed.

I fixed it