hckrnws
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.
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?
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.
Why would anyone care about someone that wants to self-host a font
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!!
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.
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
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 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-...
Comment was deleted :(
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)
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. :)
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.
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.
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]:
@font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local(''),
url("GraublauWeb.woff") format("woff"),
url("GraublauWeb.otf") format("opentype"),
url("GraublauWeb.svg#grablau") format("svg");
}
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...
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...
Comment was deleted :(
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.
Then this guide will be very usefull for you
> 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.
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.
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.
> 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.
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. 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
Comment was deleted :(
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?
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
Comment was deleted :(
Article forgot to mention variable fonts, so you should do something like
@supports (font-variation-settings: normal) {
body {
font-family: "V-Font", regular fonts...;
}
}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.
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?
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:
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)
I have Cloudflare and I have the TTL set to 10 years
In cases where this matters, you are already using a CDN for your site, like Cloudflare. Advantage is better speed for page visitors.
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?
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
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 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?
Comment was deleted :(
Crafted by Rajat
Source Code