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.
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!
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!
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.
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
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/
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. :)
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 ;)
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.
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. 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 ;)
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?
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.
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.
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.
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.
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.
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?
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.
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.
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.
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.
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.
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)
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.
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!!
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.
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."
:)
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".
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?
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.
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...
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/