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.
Completely different use case, where it assumes you have the font downloaded already, and every new regen of your static site you regenerate the font for what’s required to render it.
This looks really cool! When I was optimizing my SSG website, the big win was self-hosting the fonts. The fonts are still the biggest part of the payload on some of the pages, though, so I'm wondering how small I can make them. I think I'll have to give this tool a shot!
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!
Fair play, that is awesome, and just what I wanted.
I do have a minor constructive criticism, as someone that does not use Apple, I found the '+' to actually select a Google Font to be far from intuitive. I was looking for a big button in the bottom right with 'Select' (or some other label).
Other than that, bookmarked, kettle on and fired up to get my fonts optimised. Thank you.
There seems to be a great deal of paranoia about what data is collected by Google, so I checked[1]:
> What does using the Google Fonts Web API mean for the privacy of my users?
> The Google Fonts API is designed to limit the collection, storage, and use of end-user data. The use of the Google Fonts Web API is unauthenticated and the Google Fonts API does not set or log cookies. Requests to the Google Fonts Web API are made to resource-specific domains, such as fonts.googleapis.com or fonts.gstatic.com. Font requests are separate from and don't contain any credentials sent to google.com while using other Google services that are authenticated, such as Gmail.
> When I embed Google Fonts in my website via the Google Fonts Web API, what data does Google receive from my website visitors?
> When end users visit a website that embeds Google Fonts, their browsers send HTTP requests to the Google Fonts Web API. [ snipped details of how HTTP works and headers like referrer ]
> For clarity, Google does not use any information collected by Google Fonts to create profiles of end users or for targeted advertising.
(There's also an answer to what they do that is different than statically hosting: [2])
I'm guessing you read that and think, see they are awesome and privacy preserving! I read that and think much differently, but I'm obviously a pessimist here.
I really love this line:
> For clarity, Google does not use any information collected by Google Fonts to create profiles of end users or for targeted advertising.
Except they already have a profile of you, I promise. For instance, they explicitly don't say they don't use information from google fonts requests to update their existing profiles of you.
That’s accurate. Google has a massive amount of user-specific data, but it’s not exposed to advertisers in a way that exposes PII or is traceable back to specific users.
Like you said- it doesn’t mean that Google itself can’t use that data.
My problem with giving any company the benefit of doubt or other less-than-cynical interpretation, is that almost all agreements/promises come with an explicit “we can change this at will” clause, or at very least given no promise that things won't change for the worse.
I think that
> Google does not use any information collected by Google Fonts to create profiles of end users or for targeted advertising.
should be read as:
> Google does not CURRENTLY use any information collected by Google Fonts to create profiles of end users or for targeted advertising.
Also note that the text as-is says nothing about updating existing profiles, just that new ones won't be created from this data.
All of this is in the context of "as currently understood". Things can change. The information quoted could be wrong (wouldn't be the first time). Why risk it at all if you can copy the font and host it yourself trivially?
GOOG certainly doesn’t care either, as they really don’t need secret, ill-gotten font data. Like 80% of Internet use is using the browser they wrote and most sites already have their ad tracking JS running.
Just thought it relevant that the popular opinion here about it is in direct contradiction of what Google is saying. Persisting in believing there’s some secret malevolence at play here is not surprising, but it’s not disprovable, so it is fair to say it’s a matter of faith rather than of fact.
As I understand it, Google wants to "organize the world's data": that means all of it, secret, public, private, legal, illegal, ill-gotten and freely handed over. There's no "malevolence", Google is not a person. It's an organization and hoovering up data is its raison d'etre. Unless regulators force it to do otherwise, it will gather and store data.
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!
With a zero-tracking and no-logging policy, Bunny Fonts helps you stay fully GDPR compliant and puts your user's personal data into their own hands. Additionally, you can enjoy lightning-fast load times thanks to bunny.net's global CDN network to help improve SEO and deliver a better user experience.
You don't need to use bunny when you can use fontsource with something like jsdelivr
I think that jsdelivr is also gdpr compliant considering how much they are used, right?
+1
I can understand if author doesn't know how to use npm just for fonts yknow but he should definitely look to your comment and respond what his opinions are on the matter
Definitely curious as this seems a much better way to handle things ergonomically instead of the way author suggested way
I also feel like hosting your own cdn is definitely easy with this by just downloading npm package or embedding it directly I suppose?
There are definitely other ways to do this too. This discussion was really fun as I saw so many ways to embed fonts other than what I had known but this seems to be a mix and match between privacy and not having to embed it myself.
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 ;)
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/
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
That's exactly why I should be the one picking my fonts, not whoever's site I'm viewing. My taste might be subjectively terrible, but no one else uses my devices, so why should someone else be sending me fonts when I just want to use whatever terrible font I like?
It's been a pretty terrible day for the Web since webfonts were born then, since every site tries to force a single font to everyone for branding reasons alone. Case in point, Atlassian's hideous new font (which I've personally blocked using uBlock Origin, lol)
I do really wish that instead of moving in that direction, that customization was the norm, with sites specifying "serif" and "sans-serif" and users were assumed to be setting those settings to what they prefer. Similar to how dark mode is now respected on at least the plurality of "important" sites.
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. :)
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.
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.
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.
I must say, this is a little bit like complaining that Google supplied a PNG when you wanted a JPG. Like, the original file is the TTF/OTF, that's the raw material and what you would use in an OS or an application. And it works fine in CSS as well. Just convert it to a WOFF2 if you really want to, it's not hard.
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.
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.
LOL downvoted. The sentence "self hosting fonts is as easy as making the static font files available and then adding a few lines of CSS" is a complete lie and you could tell they have never gone through the process themselves and were just making things up.
If you don't believe me, you are welcome to try it out yourself FROM SCRATCH without any references whatsoever, and see how long it takes you to come up a solution that works on all 5 or 6 platforms, desktop or mobile.
From memory, what I would do is simply download the original ttfs or otfs, run them through woff2 (https://github.com/google/woff2), and then write the @font-face declarations for each weight/style variation. Variable fonts make this even easier, since you can get by with just the one declaration.
One could further optimise them for size with fonttools, to do stuff like subsetting by unicode ranges (https://github.com/fonttools/fonttools), but that's quite optional. Unless your font includes CJK, it's probably not that big to begin with.
> The sentence "self hosting fonts is as easy as making the static font files available and then adding a few lines of CSS" is a complete lie and you could tell they have never gone through the process themselves and were just making things up.
It's not a lie—I've been doing exactly that as long as Google fonts has been a thing.
I think people are confusing what was required in the back in the day when browsers were buggy and supported different font formats--15+ years ago.
The technique was called the "bullet proof" @font-face syntax because it "solved" getting web fonts to work across operating systems and devices in the 2010's [1]:
If you weren't doing web development back then, you don't understand what a revelation this syntax was for supporting cross-browser web fonts. There were even websites that would generate the syntax for you. BTW, woff2 didn't exist then.
It seems that some developers, like the Japanese soldiers who didn't stop fighting WWII until the 1970's because they didn't know the war ended in 1945 [2], still believe dealing with fonts in 2025 is like it was 15 years ago.
It's never been easier to self-host fonts… why make an additional HTTPS request if you don't have to?
There are plenty of utilities to compress TrueType or OpenType fonts to WOFF2.
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.
See my top-level comment pointing to where Google is specifically refuting that. So you're welcome to believe they do, but it'd have to be a conspiracy that nobody at GOOG has ever whistleblown.
Your top-level comment does not refute that. As one of the replies to it already states, saying that aren't going to use to info to "create" a targeted profile doesn't really mean a whole lot when they already have so much data on most people already. Even for people that they don't already have a profile on, it's not obvious that they couldn't just add it in to an existing profile in the future if the person made a Google account or something.
It's also not nearly as unbelievable as you seem to think it sounds that it could be happening without anyone blowing the whistle. What would you expect to happen if they did? Does "Google tracks lied about tracking users through front downloads" sound like front page news, or something that would stay on people's radar for more than a day or two even if it was? It's hard to imagine that there would be any sort of fine that would reach a level that mattered to Google, or that the recent antitrust case would have had a different outcome if only the font conspiracy had been discovered. Trying to blow the whistle on it just wouldn't be worth it.
> But apparently Google is not motivated to offer such a solution, at all.
Wait a moment, why should this be Google's job? They're not the lords of your HTML and CSS. In fact, they have no duty to help you with anything at all, and neither does anybody else except your mother.
It's not as much that they should do it that it's weird that they don't do it. They're already doing a ton of work to try to get people to download fonts from them, supposedly without an ulterior motive other than being helpful, and yet for some reason they seem kinda hesitant to let people actually, you know, actually download them. It's like if Netflix didn't make anyone sign in or charge any money, and went out of their way to get to get people to link to them, but then got shy when someone wanted to download a video to host on their site directly. Being surpsingly unmotivated to do something that ostensibly should be less effort in the long run kind of makes it seem like maybe there's something else going on here.
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.
> 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".
Have you ever tried to self-host a font from Google fonts? I have. It's actually quite a lot of work. It doesn't just give you a blob of CSS that links to a font file. It dynamically populates the contents based on what Google thinks of your request. You can't just examine your browser network logs to get the content you need. You have to synthesize the contents of a lot of different requests to fully populate the CSS, and get a bunch of different font files. And it's not just combining things blindly, you have to work around all the weird splitting it does to attempt to optimize common cases.
Writing a tool to do all that work for you is the hacker spirit. Mocking the work is not.
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
I would almost agree, but I wouldn't want to assert that confidently without an attorney since there could be some attribution obligation or something. After all, "open source" != "public domain"
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 ;)
I have a small site and spent an unreasonably long time weighing in between
- host my fonts and therefore if something does not work, nothing iwll work (whihc is a consistent user experience)
- or source from Google directly but if Google goes down or the user somehow filters Google, the experience will be awful
I chose to use the Google way - not only are they much better than I am in everything, but the user may miraculously have the font cached, a small bonus
no, assets are siloed by domain to prevent tracking, so the user will never have the font cached. I say just mirror it, if your site is down, it's down anyway, and the user will have to connect to one less domain. If you have any images at all on your site, the font is basically just the size of one more small image.
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.
Yes, the article is indeed a simplification. Google fonts also checks for font format (eg woff2, ttf, otf...) compatibility based on user agent and changes the files served depending on your browser.
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.
All fonts from Google Fonts are available under open source licenses. What is the point of padding out this 3-step guide with an extra 3 steps of license-checking fluff?
They still require you to replicate the copyright/license of the font itself even if open-source. Like SIL:
> Original or Modified Versions of the Font Software may be bundled, redistributed and/or sold with any software, provided that each copy contains the above copyright notice and this license.
I get exactly the same feeling. People from the comments here literally gave up trying to self host a font and hotlinked to google. It's as easy as downloading the file and writing a CSS one liner. What the hell is happening?
We, the millennials are the most tech-savvy generation because we were not born with the modern technology but we were able to have a childhood before it hit us. But when it did, in our very early teens, we got really into it and learnt a lot. We learnt the internet, the mobile phone, online games, PHP, websites, JavaScript, CSS, online forums... you name it. We invented this sh... :)
But Gen-Z, and now Gen-A even more, were born into the technology, so they never had to learn it besides as users. So they have no clue how thing work. All they know is how to push a button. So in a way, they are crippled by the comfort they were brought into from the get-go. They were never forced to build their own computer nor figure out issue with the operating system, let alone how to program something, etc...
So with each new generation, the technological literacy falls off the cliff more and more. It is not their fault, their circumstances are simply different.
I just realized that you are the author of the article seemingly not knowing the proper way to do it (or maybe I am missing something), thus confirming what the above commenter said. What's wrong with just downloading the zip and then @font-face in css?
Side note: it really IS people rediscovering css from 20 years ago!
we could argue whether it's semantics or not. But I'm genuinely curious and you seem to have missed the question, what's wrong with just downloading the zip off the site and using the ttf?
I kinda agree, but I'm not sure. When I got into webdev, hotlinking google fonts was already a thing. I did this once or twice and then wondered how to host the file myself. One google search to get the css for it and I was done. No lifetime experience needed, just one internet search. If you are building your own website, you are googling everything already
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.
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.
If I may, here is my font subsetting tool intended for use as part of a SSG: https://github.com/vintagedave/Fontimize
Completely different use case, where it assumes you have the font downloaded already, and every new regen of your static site you regenerate the font for what’s required to render it.
This looks really cool! When I was optimizing my SSG website, the big win was self-hosting the fonts. The fonts are still the biggest part of the payload on some of the pages, though, so I'm wondering how small I can make them. I think I'll have to give this tool a shot!
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!
Fair play, that is awesome, and just what I wanted.
I do have a minor constructive criticism, as someone that does not use Apple, I found the '+' to actually select a Google Font to be far from intuitive. I was looking for a big button in the bottom right with 'Select' (or some other label).
Other than that, bookmarked, kettle on and fired up to get my fonts optimised. Thank you.
I was about to make that command. it needs to be a primary button with text.
There seems to be a great deal of paranoia about what data is collected by Google, so I checked[1]:
> What does using the Google Fonts Web API mean for the privacy of my users?
> The Google Fonts API is designed to limit the collection, storage, and use of end-user data. The use of the Google Fonts Web API is unauthenticated and the Google Fonts API does not set or log cookies. Requests to the Google Fonts Web API are made to resource-specific domains, such as fonts.googleapis.com or fonts.gstatic.com. Font requests are separate from and don't contain any credentials sent to google.com while using other Google services that are authenticated, such as Gmail.
> When I embed Google Fonts in my website via the Google Fonts Web API, what data does Google receive from my website visitors?
> When end users visit a website that embeds Google Fonts, their browsers send HTTP requests to the Google Fonts Web API. [ snipped details of how HTTP works and headers like referrer ]
> For clarity, Google does not use any information collected by Google Fonts to create profiles of end users or for targeted advertising.
(There's also an answer to what they do that is different than statically hosting: [2])
[1] https://developers.google.com/fonts/faq/privacy
[2] https://developers.google.com/fonts/faq/privacy#what_are_the...
I'm guessing you read that and think, see they are awesome and privacy preserving! I read that and think much differently, but I'm obviously a pessimist here.
I really love this line:
> For clarity, Google does not use any information collected by Google Fonts to create profiles of end users or for targeted advertising.
Except they already have a profile of you, I promise. For instance, they explicitly don't say they don't use information from google fonts requests to update their existing profiles of you.
That’s accurate. Google has a massive amount of user-specific data, but it’s not exposed to advertisers in a way that exposes PII or is traceable back to specific users.
Like you said- it doesn’t mean that Google itself can’t use that data.
My problem with giving any company the benefit of doubt or other less-than-cynical interpretation, is that almost all agreements/promises come with an explicit “we can change this at will” clause, or at very least given no promise that things won't change for the worse.
I think that
> Google does not use any information collected by Google Fonts to create profiles of end users or for targeted advertising.
should be read as:
> Google does not CURRENTLY use any information collected by Google Fonts to create profiles of end users or for targeted advertising.
Also note that the text as-is says nothing about updating existing profiles, just that new ones won't be created from this data.
Even if google was a magic privacy paradice, it would still be slower to make a new http connection. 103 early hints might slightly improve it.
All of this is in the context of "as currently understood". Things can change. The information quoted could be wrong (wouldn't be the first time). Why risk it at all if you can copy the font and host it yourself trivially?
Why would anyone care about someone that wants to self-host a font
I don’t care, I think it’s fine of course.
GOOG certainly doesn’t care either, as they really don’t need secret, ill-gotten font data. Like 80% of Internet use is using the browser they wrote and most sites already have their ad tracking JS running.
Just thought it relevant that the popular opinion here about it is in direct contradiction of what Google is saying. Persisting in believing there’s some secret malevolence at play here is not surprising, but it’s not disprovable, so it is fair to say it’s a matter of faith rather than of fact.
As I understand it, Google wants to "organize the world's data": that means all of it, secret, public, private, legal, illegal, ill-gotten and freely handed over. There's no "malevolence", Google is not a person. It's an organization and hoovering up data is its raison d'etre. Unless regulators force it to do otherwise, it will gather and store data.
This is the company that set up a fleet of cars to take photos of everything and snort up wifi traffic while they were at it. https://www.wired.com/2012/05/google-wifi-fcc-investigation/
FontSource releases all of google fonts and more as NPM packages: https://fontsource.org
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 just checked and jsdelivr has had like 300 billion requests past month and over 16,813 TB
My brain breaking because I don’t know if that comma denotes thousand or decimal in this context.
They have left a space in the website so like 16 813 TB as an example.
Knowing about npm / js I genuinely think that it might in the thousands in this context (I think)
Someone should confirm it I suppose
Wow
Insane to think about fonts and all this bandwidth.
Skip the middleman with coolab? https://fonts.bunny.net/
With a zero-tracking and no-logging policy, Bunny Fonts helps you stay fully GDPR compliant and puts your user's personal data into their own hands. Additionally, you can enjoy lightning-fast load times thanks to bunny.net's global CDN network to help improve SEO and deliver a better user experience.
Do you work for bunnyCDN? This sounds more like a sales pitch than a honest recommendation.
Not associated and not a customer. It was a copy paste from the page.
You don't need to use bunny when you can use fontsource with something like jsdelivr I think that jsdelivr is also gdpr compliant considering how much they are used, right?
How is this service financially supported? The website offers no clues.
This is the way to do it!
But i don't know how to use NPM.
you don't need npm; you can just link to the cdn https://fontsource.org/fonts/inter/cdn
+1 I can understand if author doesn't know how to use npm just for fonts yknow but he should definitely look to your comment and respond what his opinions are on the matter
Definitely curious as this seems a much better way to handle things ergonomically instead of the way author suggested way
I also feel like hosting your own cdn is definitely easy with this by just downloading npm package or embedding it directly I suppose?
There are definitely other ways to do this too. This discussion was really fun as I saw so many ways to embed fonts other than what I had known but this seems to be a mix and match between privacy and not having to embed it myself.
That's not self hosting
Now you have two problems.
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 ;)
I did that!
I use google-webfonts-helper (https://gwfh.mranftl.com/fonts) to get google fonts
Just found out about this recently. So lean and snappy compared to the default interface.
Even better download it, subset it then base64 encode it into your CSS for zero FOUC.
https://damieng.com/blog/2021/12/03/using-variable-webfonts-...
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
Not if the styles + fonts are all in the <head>?
wouldn't the problem be the fonts are basically in every single request and uncacheable then?
Your CSS should be cacheable shouldn't it?
^ this
That increases FONC (flash of no content)
> Couldn't this increase FOUC?
Not if the font data is in a style tag in head, or otherwise before any content that's display might need, or be indirectly affected by, the font.
It will delay first paint on slow connections (all connections, in fact, but on a strong link you'll not notice) though.
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/
Some of my readers don't have Noto Sans (the best font) and Fira Code (the best font for coding) installed.
I really like Noto Sans for readability.
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
Code examples that is onts with ligatures for === => etc really get in the way of comprehension for people who aren’t familiar with those ligatures
It would be a terrible day for humanity if we were all so homogeneous that one aesthetic satisfied everyone.
That's exactly why I should be the one picking my fonts, not whoever's site I'm viewing. My taste might be subjectively terrible, but no one else uses my devices, so why should someone else be sending me fonts when I just want to use whatever terrible font I like?
It's been a pretty terrible day for the Web since webfonts were born then, since every site tries to force a single font to everyone for branding reasons alone. Case in point, Atlassian's hideous new font (which I've personally blocked using uBlock Origin, lol)
I do really wish that instead of moving in that direction, that customization was the norm, with sites specifying "serif" and "sans-serif" and users were assumed to be setting those settings to what they prefer. Similar to how dark mode is now respected on at least the plurality of "important" sites.
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. :)
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.
For example, here's Roboto Mono WOFF2s: https://github.com/googlefonts/RobotoMono/tree/main/fonts/we...
Noto Sans (the best font) is not there
> Noto Sans (the best font)
debatable :)
> is not there
https://github.com/google/fonts/tree/main/ofl/notosans
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.
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.
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.
I must say, this is a little bit like complaining that Google supplied a PNG when you wanted a JPG. Like, the original file is the TTF/OTF, that's the raw material and what you would use in an OS or an application. And it works fine in CSS as well. Just convert it to a WOFF2 if you really want to, it's not hard.
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.
Or you use Google's own TTF <-> WOFF2 converter tools: https://github.com/google/woff2 [0]
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
Any idea if the woff2 files served by Google are the same? Or that they maybe are more optimized for web?
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.
Why do you need the woff file? Fonts work fine with TTF
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.
LOL downvoted. The sentence "self hosting fonts is as easy as making the static font files available and then adding a few lines of CSS" is a complete lie and you could tell they have never gone through the process themselves and were just making things up.
If you don't believe me, you are welcome to try it out yourself FROM SCRATCH without any references whatsoever, and see how long it takes you to come up a solution that works on all 5 or 6 platforms, desktop or mobile.
Please educate me if I'm missing something!
From memory, what I would do is simply download the original ttfs or otfs, run them through woff2 (https://github.com/google/woff2), and then write the @font-face declarations for each weight/style variation. Variable fonts make this even easier, since you can get by with just the one declaration.
One could further optimise them for size with fonttools, to do stuff like subsetting by unicode ranges (https://github.com/fonttools/fonttools), but that's quite optional. Unless your font includes CJK, it's probably not that big to begin with.
> The sentence "self hosting fonts is as easy as making the static font files available and then adding a few lines of CSS" is a complete lie and you could tell they have never gone through the process themselves and were just making things up.
It's not a lie—I've been doing exactly that as long as Google fonts has been a thing.
I think people are confusing what was required in the back in the day when browsers were buggy and supported different font formats--15+ years ago.
The technique was called the "bullet proof" @font-face syntax because it "solved" getting web fonts to work across operating systems and devices in the 2010's [1]:
If you weren't doing web development back then, you don't understand what a revelation this syntax was for supporting cross-browser web fonts. There were even websites that would generate the syntax for you. BTW, woff2 didn't exist then.It seems that some developers, like the Japanese soldiers who didn't stop fighting WWII until the 1970's because they didn't know the war ended in 1945 [2], still believe dealing with fonts in 2025 is like it was 15 years ago.
It's never been easier to self-host fonts… why make an additional HTTPS request if you don't have to?
There are plenty of utilities to compress TrueType or OpenType fonts to WOFF2.
[1]: https://www.paulirish.com/2009/bulletproof-font-face-impleme...
[2]: https://en.wikipedia.org/wiki/Hiroo_Onoda
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 likes collecting referers and IP adresses
See my top-level comment pointing to where Google is specifically refuting that. So you're welcome to believe they do, but it'd have to be a conspiracy that nobody at GOOG has ever whistleblown.
Your top-level comment does not refute that. As one of the replies to it already states, saying that aren't going to use to info to "create" a targeted profile doesn't really mean a whole lot when they already have so much data on most people already. Even for people that they don't already have a profile on, it's not obvious that they couldn't just add it in to an existing profile in the future if the person made a Google account or something.
It's also not nearly as unbelievable as you seem to think it sounds that it could be happening without anyone blowing the whistle. What would you expect to happen if they did? Does "Google tracks lied about tracking users through front downloads" sound like front page news, or something that would stay on people's radar for more than a day or two even if it was? It's hard to imagine that there would be any sort of fine that would reach a level that mattered to Google, or that the recent antitrust case would have had a different outcome if only the font conspiracy had been discovered. Trying to blow the whistle on it just wouldn't be worth it.
> But apparently Google is not motivated to offer such a solution, at all.
Wait a moment, why should this be Google's job? They're not the lords of your HTML and CSS. In fact, they have no duty to help you with anything at all, and neither does anybody else except your mother.
It's not as much that they should do it that it's weird that they don't do it. They're already doing a ton of work to try to get people to download fonts from them, supposedly without an ulterior motive other than being helpful, and yet for some reason they seem kinda hesitant to let people actually, you know, actually download them. It's like if Netflix didn't make anyone sign in or charge any money, and went out of their way to get to get people to link to them, but then got shy when someone wanted to download a video to host on their site directly. Being surpsingly unmotivated to do something that ostensibly should be less effort in the long run kind of makes it seem like maybe there's something else going on here.
Then this guide will be very usefull for you
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.
> 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 thought HN automatically stripped "How To" from the titles, which would have made this one "Self-host a web font from GF"
It strips out "Why" for sure, I don't know about how to
I think you can revert by editing your submission afterwards.
Have you ever tried to self-host a font from Google fonts? I have. It's actually quite a lot of work. It doesn't just give you a blob of CSS that links to a font file. It dynamically populates the contents based on what Google thinks of your request. You can't just examine your browser network logs to get the content you need. You have to synthesize the contents of a lot of different requests to fully populate the CSS, and get a bunch of different font files. And it's not just combining things blindly, you have to work around all the weird splitting it does to attempt to optimize common cases.
Writing a tool to do all that work for you is the hacker spirit. Mocking the work is not.
I mean, I appreciate a "Make Doom run on a pregnancy test" as much as the next guy, but what are you talking about?
At fonts.google.com:
Find font; click download (it's the SECOND blue button)
Unzip and upload to your website.
What am I missing here?
That download is TTF format when it should be WOFF2 split by unicode chrarector sets. And it doesn't have the CSS for it to be a variable font
WOFF2 is an optimization, but TTF fonts generally work fine.
(Genuine question)
Is it not as simple as...
https://github.com/ebrasha/abdal-ttf-woff2
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
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."
:)
And it's legal because Google Fonts hosts open source fonts exclusively :-)
I would almost agree, but I wouldn't want to assert that confidently without an attorney since there could be some attribution obligation or something. After all, "open source" != "public domain"
Attribution is required by almost all licenses even permissive indeed.
I'm not sure that it matters that you or Google hosts it. Same as any free software actually.
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 ;)
man i used <table> for layouts with Verdana 10px. i am very old
They had something on the front page the other week about how SQL views can show you whats in your database
I have a small site and spent an unreasonably long time weighing in between
- host my fonts and therefore if something does not work, nothing iwll work (whihc is a consistent user experience)
- or source from Google directly but if Google goes down or the user somehow filters Google, the experience will be awful
I chose to use the Google way - not only are they much better than I am in everything, but the user may miraculously have the font cached, a small bonus
no, assets are siloed by domain to prevent tracking, so the user will never have the font cached. I say just mirror it, if your site is down, it's down anyway, and the user will have to connect to one less domain. If you have any images at all on your site, the font is basically just the size of one more small image.
Thanks for the tip. My other point was that google is going to be faster than me so it may be an advantage.
But yes, I get what you are saying and the rationale I used initially when hosting everything was the same. I may indeed get back to that.
You are dismissing the obvious, default natural option of not specifying a font and letting your visitors pick the one that suit them best.
99.7% of users will not have a font that that picked because they would do not even know this is a thing.
In that case I prefer to set one for a consistent and predictable experience
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.
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.
Hotlinking Google Fonts leaks your visitors' IP addresses to Google. This bothers some people.
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:
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
Also:
https://github.com/google/fonts/issues/1495
From the official Google note:
> 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)
In cases where this matters, you are already using a CDN for your site, like Cloudflare. Advantage is better speed for page visitors.
I have Cloudflare and I have the TTL set to 10 years
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
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.
Yes, the article is indeed a simplification. Google fonts also checks for font format (eg woff2, ttf, otf...) compatibility based on user agent and changes the files served depending on your browser.
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.
Was this not common knowledge? Isn't it even documented on the site? https://fonts.google.com/knowledge/using_type/self_hosting_w...
That guide does not work for Google Fonts
Not at all related but I honestly can't read the links on the dark background. They are just blue blurry blobs. You the author should really fix that.
That's fixed!
All fonts from Google Fonts are available under open source licenses. What is the point of padding out this 3-step guide with an extra 3 steps of license-checking fluff?
They still require you to replicate the copyright/license of the font itself even if open-source. Like SIL:
> Original or Modified Versions of the Font Software may be bundled, redistributed and/or sold with any software, provided that each copy contains the above copyright notice and this license.
Yes, but the license info is included in the font metadata, within the font file itself.
It's like people are rediscovering CSS from 20 years ago.
I get exactly the same feeling. People from the comments here literally gave up trying to self host a font and hotlinked to google. It's as easy as downloading the file and writing a CSS one liner. What the hell is happening?
We, the millennials are the most tech-savvy generation because we were not born with the modern technology but we were able to have a childhood before it hit us. But when it did, in our very early teens, we got really into it and learnt a lot. We learnt the internet, the mobile phone, online games, PHP, websites, JavaScript, CSS, online forums... you name it. We invented this sh... :)
But Gen-Z, and now Gen-A even more, were born into the technology, so they never had to learn it besides as users. So they have no clue how thing work. All they know is how to push a button. So in a way, they are crippled by the comfort they were brought into from the get-go. They were never forced to build their own computer nor figure out issue with the operating system, let alone how to program something, etc...
So with each new generation, the technological literacy falls off the cliff more and more. It is not their fault, their circumstances are simply different.
As a gen-alpha kid, i confirm that is not true.
I just realized that you are the author of the article seemingly not knowing the proper way to do it (or maybe I am missing something), thus confirming what the above commenter said. What's wrong with just downloading the zip and then @font-face in css?
Side note: it really IS people rediscovering css from 20 years ago!
It's not rediscovering CSS, i only started learning CSS this month
we could argue whether it's semantics or not. But I'm genuinely curious and you seem to have missed the question, what's wrong with just downloading the zip off the site and using the ttf?
I kinda agree, but I'm not sure. When I got into webdev, hotlinking google fonts was already a thing. I did this once or twice and then wondered how to host the file myself. One google search to get the css for it and I was done. No lifetime experience needed, just one internet search. If you are building your own website, you are googling everything already
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.
[0] https://files.velocifyer.com/Warant%20canaries/
I fixed it. Bitrot from a blog i started this month would be ridiculus.
Thanks for fixing. Out of curiosity, what made you think your blog needs a warrant canary?