I was going to wait to post this until I've finished the CLI and documentation, but this seems like a relevant time to plug my web font subsetting/self-hosting tool: https://glypht.valadaptive.dev/
It lets you pick from the Google Fonts catalog, and comes with various options for further reducing the fonts' sizes if you're as obsessed with webpage size as I am.
ksymph · 1h ago
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!
WebBurnout · 1h ago
FontSource releases all of google fonts and more as NPM packages: https://fontsource.org
Imustaskforhelp · 1h ago
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!!
filt · 1h ago
This is the way to do it!
jaredwiener · 14m ago
FYI, In addition to being able to download straight from fonts.google.com, Many (if not all?) of the fonts are also on Github, including TTF/OTF/WOFF2 files.
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.
olivia-banks · 2h ago
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
erikpukinskis · 2h ago
Not if the styles + fonts are all in the <head>?
booi · 1h ago
wouldn't the problem be the fonts are basically in every single request and uncacheable then?
kellengreen · 34m ago
^ this
Velocifyer · 45m ago
That increases FONC (flash of no content)
dewey · 2h ago
And once you use these fonts, make sure to not use blue as link color with a dark background, so that your readers can actually read your content too ;)
tmdetect · 1h ago
I used to use Google fonts a fair amount, but why do I need to download a font when my browser/os already have a reasonable amount of good ones? Engineer aesthetic/logic maybe?
I had to go digging for it again and I've now bookmarked it, but this website/repo has some nice examples: https://modernfontstacks.com/
Velocifyer · 1h ago
Some of my readers don't have Noto Sans (the best font) and Fira Code (the best font for coding) installed.
tracker1 · 54m ago
I really like Noto Sans for readability.
dylan604 · 38m ago
And here is the crux of the problem. What you think is the best font is not the best font to other people. So people use the font they think is the best, so yet another font. It feels like a twist on the xkcd about creating a new standard
chuckadams · 13m ago
It would be a terrible day for humanity if we were all so homogeneous that one aesthetic satisfied everyone.
hluska · 1h ago
Oddly, I did some work around this recently. I’m a terrible designer but I’m less terrible now because I did a self guided course. A 120 day course to go from a terrible designer to just a really really bad designer isn’t very marketable.
With built in fonts, if you want to support a wide range of machines, you have seven reliable fonts, one monospace and one cursive font to choose from. Georgia is a good looking serif font and I use it too much now, but the sans serif pairings aren’t great.
With CSS, you can make arial work as a heading font with a Georgia body for example, but that takes time and creates a testing burden. It only takes seconds to host a font that looks great out of the box and imposes a smaller testing burden. So for me the answer is a lack of talent that I’ve mitigated through transferring fonts on requests. I don’t think that’s a good thing, but my designs are no longer covered by a Geneva convention so that makes me feel better. :)
jrm4 · 1h ago
Okay, so as something of an old-timer:
WAT
Like, as someone who teaches IT -- an article like this getting this high in hacker news is just very wild to me. Which is to say:
The answer that ought to be obvious to this crowd is "Download it and link to it in your HTML/CSS in your local html directory."
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 as well as perhaps cdn stuff.
But still; wow. As far as we have gotten in some ways, we've clearly lost A LOT of simplicity that shouldn't be -- but apparently -- really difficult to recover.
jraph · 1h ago
> 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".
freedomben · 1h ago
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
jraph · 1h ago
And it's legal because Google Fonts hosts open source fonts exclusively :-)
jrm4 · 1h ago
I'm a lawyer so an example something I WOULD NEVER SAY IN EARNEST, but I perhaps would if I wasn't might be:
"And perhaps even the idea of having to think about the legality of such things is part of the problem, I can remember when we'd just DO IT."
:)
codeulike · 18m ago
They had something on the front page the other week about how SQL views can show you whats in your database
Propelloni · 1h ago
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 ;)
hluska · 1h ago
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?
Just found out about this recently. So lean and snappy compared to the default interface.
rs186 · 2h ago
I tried to do something similar myself once but quickly gave up. I decided to just slap that line Google gave me in the web page.
I get why it is "better" -- CDN, optimized for browser blah blah. But I really wanted to host it myself, because 1) it's my website 2) I don't want every visitor to send a piece of information about themselves to Google just to get some fonts.
But apparently Google is not motivated to offer such a solution, at all.
OskarS · 2h ago
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.
dawnerd · 2h ago
It’s like we’ve taken a step back and people forgot how the web used to be built. I’ve also seen someone ask how you use JavaScript if you don’t have a preprocessor like webpack.
rs186 · 1h ago
It's not a single file with a simple line of CSS like in the old days. It's a bunch of files, so you need to make sure you do have all the files and understand how exactly these come together.
OskarS · 49m ago
I'm a very dedicated anti-Google person who's trying to move everything I can off of any kind of Google service, so I very much understand the desire to self-host. But I find it hard to find fault with Google here. "If you don't want to worry about hosting, here's a one-liner you can add to CSS that hosts it off our servers. If you want to do something else, here are the raw font files as a single click download, do whatever you like!". That seems perfectly reasonable to me, and it's a great service to improve typography on the web.
Velocifyer · 12m ago
Google fonts download button gives you a TTF file and not a WOFF2 file so you have to read the CSS to get the WOFF2 file.
Velocifyer · 2h ago
Google fonts download button gives you a TTF file and not a WOFF2 file so you have to read the CSS to get the WOFF2 file.
Any idea if the woff2 files served by Google are the same? Or that they maybe are more optimized for web?
darrenf · 49m ago
I’m afraid I don’t know for sure, I only know that the woff2 file I generated with the CLI worked fine in all the browsers I needed it to. Other posters have said that Google may do some user-agent sniffing or other fingerprinting to maybe serve an even more reliable version, but I can’t comment on that.
trnglina · 2h ago
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?
rs186 · 1h ago
I needed to figure out exactly which files need to be there, and I needed to understand what's happening in that CSS file. I vaguely remember seeing different content for the CSS file in different browsers.
At that time it would take me more than a few minutes (which was what I had), and seemed a rabbit hole. I decided not to pursue that.
cornedor · 2h ago
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.
Everything old is new again. ;) Jokes aside, I think it's good to serve the fonts directly, there's no need to do a 'phone home' roundtrip to google only to present some fonts.
And while you're at it (and you use multiple fonts), you might as well use CSS's font-face to harmonize the different fonts a little. Fonts with the same size might look bigger or smaller to the eye, depending on thickness of the lines and other font styles.
thm · 1h ago
Article forgot to mention variable fonts, so you should do something like
The method in the article just uses the Google Fonts CSS but with the paths modified
dktalks · 1h ago
What benefits are you getting from this? I mean have you built an entire CDN to cache the fonts so that your server does not have to download it every time a new page is loaded? I understand self-hosting for your own servers, but for a website this is overkill.
mlunar · 1h ago
Not the author, but last time I checked (3y ago), the fonts CDN was surprisingly slow, like hundreds of milliseconds of latency.
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.
ameliaquining · 1h ago
Hotlinking Google Fonts leaks your visitors' IP addresses to Google. This bothers some people.
JimDabell · 1h ago
It’s more than just “bothers people”. Some jurisdictions consider this to be leaking PII without consent and will issue fines if you don’t self-host or ask permission. For example:
> Also, please note that Google LLC is certified under both the EU-U.S. and Swiss-U.S. Privacy Shield frameworks and our certifications can be viewed on the Privacy Shield list.
It’s very important to be aware that the Privacy Shield was declared invalid by the European Court of Justice in 2020, so that note from April 17, 2018 is worthless.
freedomben · 1h ago
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)
Velocifyer · 1h ago
I have Cloudflare and I have the TTL set to 10 years
nick_ · 1h ago
But doesn't Google serve a different font depending on the User Agent string? IIRC, it serves fonts based on your OS and browser so that differences in rendering implementations are corrected for.
gethly · 2h ago
It's like people are rediscovering CSS from 20 years ago.
aleyan · 1h ago
The view warrant canaries[0] link on the bottom of the page goes to a cloudflare 502 page. Bitrot is indistinguishable from subpoena, but neither is a good indicator.
It lets you pick from the Google Fonts catalog, and comes with various options for further reducing the fonts' sizes if you're as obsessed with webpage size as I am.
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!!
For example, here's Roboto Mono WOFF2s: https://github.com/googlefonts/RobotoMono/tree/main/fonts/we...
https://damieng.com/blog/2021/12/03/using-variable-webfonts-...
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.
I had to go digging for it again and I've now bookmarked it, but this website/repo has some nice examples: https://modernfontstacks.com/
With built in fonts, if you want to support a wide range of machines, you have seven reliable fonts, one monospace and one cursive font to choose from. Georgia is a good looking serif font and I use it too much now, but the sans serif pairings aren’t great.
With CSS, you can make arial work as a heading font with a Georgia body for example, but that takes time and creates a testing burden. It only takes seconds to host a font that looks great out of the box and imposes a smaller testing burden. So for me the answer is a lack of talent that I’ve mitigated through transferring fonts on requests. I don’t think that’s a good thing, but my designs are no longer covered by a Geneva convention so that makes me feel better. :)
WAT
Like, as someone who teaches IT -- an article like this getting this high in hacker news is just very wild to me. Which is to say:
The answer that ought to be obvious to this crowd is "Download it and link to it in your HTML/CSS in your local html directory."
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 as well as perhaps cdn stuff.
But still; wow. As far as we have gotten in some ways, we've clearly lost A LOT of simplicity that shouldn't be -- but apparently -- really difficult to recover.
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'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
"And perhaps even the idea of having to think about the legality of such things is part of the problem, I can remember when we'd just DO IT."
:)
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 get why it is "better" -- CDN, optimized for browser blah blah. But I really wanted to host it myself, because 1) it's my website 2) I don't want every visitor to send a piece of information about themselves to Google just to get some fonts.
But apparently Google is not motivated to offer such a solution, at all.
I have very recent -- like, 2 weeks ago -- successful experience of using these, since I wanted to distribute a WOFF2 as part of a browser extension.
[0] edited to add - you don't have to build it, you can get it from homebrew https://formulae.brew.sh/formula/woff2 or an Arch package https://archlinux.org/packages/extra/x86_64/woff2/ and presumably other distros
At that time it would take me more than a few minutes (which was what I had), and seemed a rabbit hole. I decided not to pursue that.
https://dev.to/rstacruz/public-cdns-arent-useful-anymore-2b6...
And while you're at it (and you use multiple fonts), you might as well use CSS's font-face to harmonize the different fonts a little. Fonts with the same size might look bigger or smaller to the eye, depending on thickness of the lines and other font styles.
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.
https://www.theregister.com/2022/01/31/website_fine_google_f...
Google Fonts has an open issue that is three years old here, with no response from Google:
https://github.com/google/fonts/issues/5537
https://github.com/google/fonts/issues/1495
> Also, please note that Google LLC is certified under both the EU-U.S. and Swiss-U.S. Privacy Shield frameworks and our certifications can be viewed on the Privacy Shield list.
It’s very important to be aware that the Privacy Shield was declared invalid by the European Court of Justice in 2020, so that note from April 17, 2018 is worthless.
[0] https://files.velocifyer.com/Warant%20canaries/