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
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.
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 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?
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.
> 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.
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.
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.
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.
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.
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/
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.
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.
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.
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])
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 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 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
35 comments
[ 3.8 ms ] story [ 63.2 ms ] threadhttps://damieng.com/blog/2021/12/03/using-variable-webfonts-...
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.
Not doing it is also nicer for people with slow/unreliable network access, where they can block fonts, or even if they don't block them, can access your page more quickly and have a render without the custom font.
I 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.
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 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.
WAT
Like, as someone who teaches IT -- an article like this getting this high in hacker news is just very wild to me. Which is to say:
The answer that ought to be obvious to this crowd is "Download it and link to it in your HTML/CSS in your local html directory."
Now, I'm aware that at least part of the reason this isn't the extremely obvious answer has to do with some friction on the downloading as well as perhaps cdn stuff.
But still; wow. As far as we have gotten in some ways, we've clearly lost A LOT of simplicity that shouldn't be -- but apparently -- really difficult to recover.
I had to go digging for it again and I've now bookmarked it, but this website/repo has some nice examples: https://modernfontstacks.com/
[0] https://files.velocifyer.com/Warant%20canaries/
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.
For example, here's Roboto Mono WOFF2s: https://github.com/googlefonts/RobotoMono/tree/main/fonts/we...
> 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 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.
> 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.
- 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