FRESH

Hacker News

Home

How to self-host a web font from Google Fonts

174 points by Velocifyer

by valadaptive

3 subcomments

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.

by xp84

5 subcomments

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...

by WebBurnout

3 subcomments

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

by dewey

1 subcomments

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 ;)

by SigmundurM

1 subcomments

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

by damieng

3 subcomments

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-...

by tmdetect

2 subcomments

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/

by jaredwiener

1 subcomments

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...

by rs186

5 subcomments

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.

by jrm4

7 subcomments

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.

by BrandoElFollito

2 subcomments

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

by dktalks

5 subcomments

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.

0 subcomment

by thm

1 subcomments

Article forgot to mention variable fonts, so you should do something like

  @supports (font-variation-settings: normal) {
      body {
          font-family: "V-Font", regular fonts...;
      }
  }

by nick_

1 subcomments

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.

by rambambram

0 subcomment

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.

by gred

1 subcomments

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?

by gethly

1 subcomments

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

by staticelf

1 subcomments

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.

by fortyseven

1 subcomments

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

by aleyan

2 subcomments

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/