10 ms·

How to self-host a web font from Google Fonts

181 points by Velocifyer 1y ago

damieng 1y ago
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-for-speed/ https://damieng.com/blog/2021/12/03/using-variable-webfonts-...
- olivia-banks 1y ago
  Couldn't this increase FOUC? At least before you could load in your style-sheet before the font, but if you embed the font inside you get no styling at all until it can fetch all of the data, correct
  - erikpukinskis 1y ago
    Not if the styles + fonts are all in the <head>?
    - booi 1y ago
      wouldn't the problem be the fonts are basically in every single request and uncacheable then?
      - kellengreen 1y ago
        ^ this
      - kevincox 1y ago
        Your CSS should be cacheable shouldn't it?
    - Velocifyer 1y ago
      That increases FONC (flash of no content)
  - dspillett 1y ago
    > 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.
- deleted 1y ago
  [deleted]
- jraph 1y ago
  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.
dewey 1y ago
And once you use these fonts, make sure to not use blue as link color with a dark background, so that your readers can actually read your content too ;)
- Velocifyer 1y ago
  I did that!
gethly 1y ago
It's like people are rediscovering CSS from 20 years ago.
- efilife 1y 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?
  - gethly 1y ago
    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.
    - Velocifyer 1y ago
      As a gen-alpha kid, i confirm that is not true.
      - efilife 1y ago
        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!
rs186 1y ago
I tried to do something similar myself once but quickly gave up. I decided to just slap that line Google gave me in the web page. I get why it is "better" -- CDN, optimized for browser blah blah. But I really wanted to host it myself, because 1) it's my website 2) I don't want every visitor to send a piece of information about themselves to Google just to get some fonts. But apparently Google is not motivated to offer such a solution, at all.
- trnglina 1y ago
  What made you give up? As the article describes, self hosting fonts is as easy as making the static font files available and then adding a few lines of CSS. What solution would you want Google to offer?
  - rs186 1y ago
    I needed to figure out exactly which files need to be there, and I needed to understand what's happening in that CSS file. I vaguely remember seeing different content for the CSS file in different browsers. At that time it would take me more than a few minutes (which was what I had), and seemed a rabbit hole. I decided not to pursue that.
    - rs186 1y ago
      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.
      - trnglina 1y ago
        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 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 https://github.com/fonttools/fonttools), but that's quite optional. Unless your font includes CJK, it's probably not that big to begin with.
valadaptive 1y ago
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/ https://glypht.valadaptive.dev/ It lets you pick from the Google Fonts catalog, and comes with various options for further reducing the fonts' sizes if you're as obsessed with webpage size as I am.
- ksymph 1y ago
  This is fantastic! I was recently trying to prepare a number of fonts for web use and there was a lot of friction -- each part of the process needed a different tool, each with its own weird quirks. Glypht looks to have everything in one place without any extraneous stuff or legacy cruft. I didn't even know it was possible to make a subset of weights for variable fonts. I'll be making thorough use of this, thank you!
- Theodores 1y ago
  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.
  - simlevesque 1y ago
    I was about to make that command. it needs to be a primary button with text.
- vintagedave 1y ago
  If I may, here is my font subsetting tool intended for use as part of a SSG: https://github.com/vintagedave/Fontimize 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.
SigmundurM 1y ago
I use google-webfonts-helper (https://gwfh.mranftl.com/fonts https://gwfh.mranftl.com/fonts) to get google fonts
- wonger_ 1y ago
  Just found out about this recently. So lean and snappy compared to the default interface.
WebBurnout 1y ago
FontSource releases all of google fonts and more as NPM packages: https://fontsource.org https://fontsource.org
- filt 1y ago
  This is the way to do it!
  - Velocifyer 1y ago
    But i don't know how to use NPM.
    - lordgilman 1y ago
      Now you have two problems.
    - yawnxyz 1y ago
      you don't need npm; you can just link to the cdn https://fontsource.org/fonts/inter/cdn https://fontsource.org/fonts/inter/cdn
      - Imustaskforhelp 1y ago
        +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.
      - Velocifyer 1y ago
        That's not self hosting
jrm4 1y ago
Okay, so as something of an old-timer: WAT Like, as someone who teaches IT -- an article like this getting this high in hacker news is just very wild to me. Which is to say: The answer that ought to be obvious to this crowd is "Download it and link to it in your HTML/CSS in your local html directory." Now, I'm aware that at least part of the reason this isn't the extremely obvious answer has to do with some friction on the downloading as well as perhaps cdn stuff. But still; wow. As far as we have gotten in some ways, we've clearly lost A LOT of simplicity that shouldn't be -- but apparently -- really difficult to recover.
- freedomben 1y ago
  I had the same thought. Makes me think we're getting old and the old ways of the web just aren't known as widely anymore. I've had to do this several times in the past because the customer firewall blocks google domains, and it never required a second thought. The only question I had was around the legality of doing so (which I checked on). Once I verified that, it was about 2 minutes of wget (or curl) the file down, stick in a static web server, and update the links in the HTML page and Bob's your Uncle
  - jrm4 1y ago
    I'm a lawyer so an example something I WOULD NEVER SAY IN EARNEST, but I perhaps would if I wasn't might be: "And perhaps even the idea of having to think about the legality of such things is part of the problem, I can remember when we'd just DO IT." :)
  - jraph 1y ago
    And it's legal because Google Fonts hosts open source fonts exclusively :-)
    - xp84 1y ago
      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"
dktalks 1y ago
What benefits are you getting from this? I mean have you built an entire CDN to cache the fonts so that your server does not have to download it every time a new page is loaded? I understand self-hosting for your own servers, but for a website this is overkill.
- ameliaquining 1y ago
  Hotlinking Google Fonts leaks your visitors' IP addresses to Google. This bothers some people.
  - JimDabell 1y ago
    It’s more than just “bothers people”. Some jurisdictions consider this to be leaking PII without consent and will issue fines if you don’t self-host or ask permission. For example: https://www.theregister.com/2022/01/31/website_fine_google_fonts_gdpr/ 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/5537
    - brycewray 1y ago
      Also: https://github.com/google/fonts/issues/1495 https://github.com/google/fonts/issues/1495
      - JimDabell 1y ago
        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.
- freedomben 1y ago
  For me the biggest benefit is that my customer doesn't have to whitelist a google endpoint to use our website. Secondary benefit is being in control of downtime and/or updates (though the secondary benefit on it's own is nowhere near enough to justify self-hosting to me, but for some people it might be)
deleted 1y ago
[deleted]
nick_ 1y ago
But doesn't Google serve a different font depending on the User Agent string? IIRC, it serves fonts based on your OS and browser so that differences in rendering implementations are corrected for.
- Koffiepoeder 1y ago
  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.
thm 1y ago
Article forgot to mention variable fonts, so you should do something like @supports (font-variation-settings: normal) { body { font-family: "V-Font", regular fonts...; } }
- Velocifyer 1y ago
  The method in the article just uses the Google Fonts CSS but with the paths modified
tmdetect 1y ago
I used to use Google fonts a fair amount, but why do I need to download a font when my browser/os already have a reasonable amount of good ones? Engineer aesthetic/logic maybe? I had to go digging for it again and I've now bookmarked it, but this website/repo has some nice examples: https://modernfontstacks.com/ https://modernfontstacks.com/
- Velocifyer 1y ago
  Some of my readers don't have Noto Sans (the best font) and Fira Code (the best font for coding) installed.
  - tracker1 1y ago
    I really like Noto Sans for readability.
  - dylan604 1y ago
    And here is the crux of the problem. What you think is the best font is not the best font to other people. So people use the font they think is the best, so yet another font. It feels like a twist on the xkcd about creating a new standard
    - chuckadams 1y ago
      It would be a terrible day for humanity if we were all so homogeneous that one aesthetic satisfied everyone.
      - xp84 1y ago
        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.
aleyan 1y ago
The view warrant canaries[0] link on the bottom of the page goes to a cloudflare 502 page. Bitrot is indistinguishable from subpoena, but neither is a good indicator. [0] https://files.velocifyer.com/Warant%20canaries/ https://files.velocifyer.com/Warant%20canaries/
- deleted 1y ago
  [deleted]
- Velocifyer 1y ago
  I fixed it. Bitrot from a blog i started this month would be ridiculus.
  - aleyan 1y ago
    Thanks for fixing. Out of curiosity, what made you think your blog needs a warrant canary?
rambambram 1y ago
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.
jaredwiener 1y ago
FYI, In addition to being able to download straight from fonts.google.com, Many (if not all?) of the fonts are also on Github, including TTF/OTF/WOFF2 files. For example, here's Roboto Mono WOFF2s: https://github.com/googlefonts/RobotoMono/tree/main/fonts/webfonts https://github.com/googlefonts/RobotoMono/tree/main/fonts/we...
- Velocifyer 1y ago
  Noto Sans (the best font) is not there
  - GuinansEyebrows 1y ago
    > Noto Sans (the best font) debatable :) > is not there https://github.com/google/fonts/tree/main/ofl/notosans https://github.com/google/fonts/tree/main/ofl/notosans
fortyseven 1y ago
Was this not common knowledge? Isn't it even documented on the site? https://fonts.google.com/knowledge/using_type/self_hosting_web_fonts https://fonts.google.com/knowledge/using_type/self_hosting_w...
- Velocifyer 1y ago
  That guide does not work for Google Fonts
xp84 1y ago
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 https://developers.google.com/fonts/faq/privacy [2] https://developers.google.com/fonts/faq/privacy#what_are_the_advantages_of_embedding_google_fonts_in_my_website_via_the_google_fonts_web_api https://developers.google.com/fonts/faq/privacy#what_are_the...
- 1vuio0pswjnm7 1y ago
  Why would anyone care about someone that wants to self-host a font
  - xp84 1y ago
    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.
gred 1y ago
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?
- lyu07282 1y ago
  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.
  - gred 1y ago
    Yes, but the license info is included in the font metadata, within the font file itself.
staticelf 1y ago
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.
- Velocifyer 1y ago
  That's fixed!
BrandoElFollito 1y ago
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
- asddubs 1y ago
  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.
  - BrandoElFollito 1y ago
    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.
- prmoustache 1y ago
  You are dismissing the obvious, default natural option of not specifying a font and letting your visitors pick the one that suit them best.
  - BrandoElFollito 1y ago
    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

181 points by Velocifyer 1y ago

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-for-speed/ https://damieng.com/blog/2021/12/03/using-variable-webfonts-...

olivia-banks 1y ago
Couldn't this increase FOUC? At least before you could load in your style-sheet before the font, but if you embed the font inside you get no styling at all until it can fetch all of the data, correct
- erikpukinskis 1y ago
  Not if the styles + fonts are all in the <head>?
  - booi 1y ago
    wouldn't the problem be the fonts are basically in every single request and uncacheable then?
    - kellengreen 1y ago
      ^ this
    - kevincox 1y ago
      Your CSS should be cacheable shouldn't it?
  - Velocifyer 1y ago
    That increases FONC (flash of no content)
- dspillett 1y ago
  > 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.
deleted 1y ago
[deleted]
jraph 1y ago
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.

dewey 1y ago

And once you use these fonts, make sure to not use blue as link color with a dark background, so that your readers can actually read your content too ;)

Velocifyer 1y ago
I did that!

gethly 1y ago

It's like people are rediscovering CSS from 20 years ago.

efilife 1y 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?
- gethly 1y ago
  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.
  - Velocifyer 1y ago
    As a gen-alpha kid, i confirm that is not true.
    - efilife 1y ago
      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!

rs186 1y ago

I tried to do something similar myself once but quickly gave up. I decided to just slap that line Google gave me in the web page. I get why it is "better" -- CDN, optimized for browser blah blah. But I really wanted to host it myself, because 1) it's my website 2) I don't want every visitor to send a piece of information about themselves to Google just to get some fonts. But apparently Google is not motivated to offer such a solution, at all.

trnglina 1y ago
What made you give up? As the article describes, self hosting fonts is as easy as making the static font files available and then adding a few lines of CSS. What solution would you want Google to offer?
- rs186 1y ago
  I needed to figure out exactly which files need to be there, and I needed to understand what's happening in that CSS file. I vaguely remember seeing different content for the CSS file in different browsers. At that time it would take me more than a few minutes (which was what I had), and seemed a rabbit hole. I decided not to pursue that.
  - rs186 1y ago
    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.
    - trnglina 1y ago
      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 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 https://github.com/fonttools/fonttools), but that's quite optional. Unless your font includes CJK, it's probably not that big to begin with.

valadaptive 1y ago

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/ https://glypht.valadaptive.dev/ It lets you pick from the Google Fonts catalog, and comes with various options for further reducing the fonts' sizes if you're as obsessed with webpage size as I am.

ksymph 1y ago
This is fantastic! I was recently trying to prepare a number of fonts for web use and there was a lot of friction -- each part of the process needed a different tool, each with its own weird quirks. Glypht looks to have everything in one place without any extraneous stuff or legacy cruft. I didn't even know it was possible to make a subset of weights for variable fonts. I'll be making thorough use of this, thank you!
Theodores 1y ago
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.
- simlevesque 1y ago
  I was about to make that command. it needs to be a primary button with text.
vintagedave 1y ago
If I may, here is my font subsetting tool intended for use as part of a SSG: https://github.com/vintagedave/Fontimize 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.

SigmundurM 1y ago

I use google-webfonts-helper (https://gwfh.mranftl.com/fonts https://gwfh.mranftl.com/fonts) to get google fonts

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

WebBurnout 1y ago

FontSource releases all of google fonts and more as NPM packages: https://fontsource.org https://fontsource.org

filt 1y ago
This is the way to do it!
- Velocifyer 1y ago
  But i don't know how to use NPM.
  - lordgilman 1y ago
    Now you have two problems.
  - yawnxyz 1y ago
    you don't need npm; you can just link to the cdn https://fontsource.org/fonts/inter/cdn https://fontsource.org/fonts/inter/cdn
    - Imustaskforhelp 1y ago
      +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.
    - Velocifyer 1y ago
      That's not self hosting

jrm4 1y ago

Okay, so as something of an old-timer: WAT Like, as someone who teaches IT -- an article like this getting this high in hacker news is just very wild to me. Which is to say: The answer that ought to be obvious to this crowd is "Download it and link to it in your HTML/CSS in your local html directory." Now, I'm aware that at least part of the reason this isn't the extremely obvious answer has to do with some friction on the downloading as well as perhaps cdn stuff. But still; wow. As far as we have gotten in some ways, we've clearly lost A LOT of simplicity that shouldn't be -- but apparently -- really difficult to recover.

freedomben 1y ago
I had the same thought. Makes me think we're getting old and the old ways of the web just aren't known as widely anymore. I've had to do this several times in the past because the customer firewall blocks google domains, and it never required a second thought. The only question I had was around the legality of doing so (which I checked on). Once I verified that, it was about 2 minutes of wget (or curl) the file down, stick in a static web server, and update the links in the HTML page and Bob's your Uncle
- jrm4 1y ago
  I'm a lawyer so an example something I WOULD NEVER SAY IN EARNEST, but I perhaps would if I wasn't might be: "And perhaps even the idea of having to think about the legality of such things is part of the problem, I can remember when we'd just DO IT." :)
- jraph 1y ago
  And it's legal because Google Fonts hosts open source fonts exclusively :-)
  - xp84 1y ago
    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"

dktalks 1y ago

What benefits are you getting from this? I mean have you built an entire CDN to cache the fonts so that your server does not have to download it every time a new page is loaded? I understand self-hosting for your own servers, but for a website this is overkill.

ameliaquining 1y ago
Hotlinking Google Fonts leaks your visitors' IP addresses to Google. This bothers some people.
- JimDabell 1y ago
  It’s more than just “bothers people”. Some jurisdictions consider this to be leaking PII without consent and will issue fines if you don’t self-host or ask permission. For example: https://www.theregister.com/2022/01/31/website_fine_google_fonts_gdpr/ 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/5537
  - brycewray 1y ago
    Also: https://github.com/google/fonts/issues/1495 https://github.com/google/fonts/issues/1495
    - JimDabell 1y ago
      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.
freedomben 1y ago
For me the biggest benefit is that my customer doesn't have to whitelist a google endpoint to use our website. Secondary benefit is being in control of downtime and/or updates (though the secondary benefit on it's own is nowhere near enough to justify self-hosting to me, but for some people it might be)

deleted 1y ago

[deleted]

nick_ 1y ago

But doesn't Google serve a different font depending on the User Agent string? IIRC, it serves fonts based on your OS and browser so that differences in rendering implementations are corrected for.

Koffiepoeder 1y ago
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.

thm 1y ago

Article forgot to mention variable fonts, so you should do something like @supports (font-variation-settings: normal) { body { font-family: "V-Font", regular fonts...; } }

Velocifyer 1y ago
The method in the article just uses the Google Fonts CSS but with the paths modified

tmdetect 1y ago

I used to use Google fonts a fair amount, but why do I need to download a font when my browser/os already have a reasonable amount of good ones? Engineer aesthetic/logic maybe? I had to go digging for it again and I've now bookmarked it, but this website/repo has some nice examples: https://modernfontstacks.com/ https://modernfontstacks.com/

Velocifyer 1y ago
Some of my readers don't have Noto Sans (the best font) and Fira Code (the best font for coding) installed.
- tracker1 1y ago
  I really like Noto Sans for readability.
- dylan604 1y ago
  And here is the crux of the problem. What you think is the best font is not the best font to other people. So people use the font they think is the best, so yet another font. It feels like a twist on the xkcd about creating a new standard
  - chuckadams 1y ago
    It would be a terrible day for humanity if we were all so homogeneous that one aesthetic satisfied everyone.
    - xp84 1y ago
      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.

aleyan 1y ago

The view warrant canaries[0] link on the bottom of the page goes to a cloudflare 502 page. Bitrot is indistinguishable from subpoena, but neither is a good indicator. [0] https://files.velocifyer.com/Warant%20canaries/ https://files.velocifyer.com/Warant%20canaries/

deleted 1y ago
[deleted]
Velocifyer 1y ago
I fixed it. Bitrot from a blog i started this month would be ridiculus.
- aleyan 1y ago
  Thanks for fixing. Out of curiosity, what made you think your blog needs a warrant canary?

rambambram 1y ago

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.

jaredwiener 1y ago

FYI, In addition to being able to download straight from fonts.google.com, Many (if not all?) of the fonts are also on Github, including TTF/OTF/WOFF2 files. For example, here's Roboto Mono WOFF2s: https://github.com/googlefonts/RobotoMono/tree/main/fonts/webfonts https://github.com/googlefonts/RobotoMono/tree/main/fonts/we...

Velocifyer 1y ago
Noto Sans (the best font) is not there
- GuinansEyebrows 1y ago
  > Noto Sans (the best font) debatable :) > is not there https://github.com/google/fonts/tree/main/ofl/notosans https://github.com/google/fonts/tree/main/ofl/notosans

fortyseven 1y ago

Was this not common knowledge? Isn't it even documented on the site? https://fonts.google.com/knowledge/using_type/self_hosting_web_fonts https://fonts.google.com/knowledge/using_type/self_hosting_w...

Velocifyer 1y ago
That guide does not work for Google Fonts

xp84 1y ago

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 https://developers.google.com/fonts/faq/privacy [2] https://developers.google.com/fonts/faq/privacy#what_are_the_advantages_of_embedding_google_fonts_in_my_website_via_the_google_fonts_web_api https://developers.google.com/fonts/faq/privacy#what_are_the...

1vuio0pswjnm7 1y ago
Why would anyone care about someone that wants to self-host a font
- xp84 1y ago
  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.

gred 1y ago

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?

lyu07282 1y ago
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.
- gred 1y ago
  Yes, but the license info is included in the font metadata, within the font file itself.

staticelf 1y ago

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.

Velocifyer 1y ago
That's fixed!

BrandoElFollito 1y ago

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

asddubs 1y ago
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.
- BrandoElFollito 1y ago
  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.
prmoustache 1y ago
You are dismissing the obvious, default natural option of not specifying a font and letting your visitors pick the one that suit them best.
- BrandoElFollito 1y ago
  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