10 ms·
The Fastest Google Fonts
- brenden2 6y agoIt's better to block web fonts with uBlock Origin. It would be sweet if someone could add support for these fonts to Decentraleyes as well, which seems to be missing. Seems to be some debate about the merits of doing so, however: https://github.com/Synzvato/decentraleyes/issues/34 https://github.com/Synzvato/decentraleyes/issues/34 I'm okay with 1st party usage, but I don't want Google following me around the web.
- Proven 6y agoYes!!! Block 'em, that makes all of them equally fast! Sometimes that can make things inconvenient (navigation buttons in HTML5 video players that use Web fonts) but it's well worth it.
- inetknght 6y agouMatrix blocks them when you disable css from third party sites. Noscript has an explicit checkbox for fonts.
- snazz 6y agoSo does uBlock Origin. It's the two As at the bottom of the panel.
- tyingq 6y agoI wonder if Mozilla or DDG or some other privacy centric org might consider mirroring Google's fonts.
- snazz 6y agoCloudflare should do this. They already have the infrastructure and they have a pretty good privacy reputation.
- WorldMaker 6y agoMozilla (and Chromium) could mirror Top X Google Fonts directly into the user's font system and entirely eliminate remote calls for a small size increase in the browser installation. (Or Microsoft and Apple could do it in OS images.) You can do it yourself, even, but unfortunately font loading timings are a deanonymization vector with its own privacy implications and it would take a concerted group effort to install similar font sets locally to avoid those privacy issues.
- snazz 6y agoThat would be an interesting concept. I like the idea of including them in Windows and macOS.
- eloff 6y agoJust use the built-in fonts. Use a good fallback list so each platform gets a good option. Specifying custom fonts is largely a waste of bandwidth for a very marginal improvement in aesthetic. The people who care most are the ones making the decision to use that font. The solution, tritely, is they should stop caring about the little details that much. The bigger details are usually what move the needle. Don't get stuck optimizing a local maxima, which is very easy to do if you're using AB tests. Arguably the point of an AB test is to find the local maxima, but the goal should be to broaden the search space and look for something closer to the global maxima.
- Elidrake24 6y agoI agree entirely; the clients don't. It's an almost universal question brought up by them during the design phase - "this font looks like everyone else, we want our own". The changes to TypeKit have certainly put a squeeze on their options, but they still almost universally hate the system level fonts. Wish I could convince the business guys to push back, but eh, there are bigger problems we face on a day to day basis.
- winrid 6y agoEven the System Font Stack? Also, this list won't help anyway. The clients aren't picking fonts by performance.
- onion2k 6y agoThat might change. Google are changing their search ranking metrics to include the new Core Web Vitals metrics[1]. One of those is "Cumulative Layout Shift", or how much the page changes the layout over time. Using a font that isn't performant will cause the page to render, and then to move around once the page loads, which could push your site down on Google's search results page. [1] https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html https://webmasters.googleblog.com/2020/05/evaluating-page-ex...
- 6y ago
- rkagerer 6y agoThis page opens crazy fast (at least for me). Well done. EDIT: Okay, still a few things they could improve on (https://gtmetrix.com/reports/csswizardry.com/N9gkLyhq https://gtmetrix.com/reports/csswizardry.com/N9gkLyhq)
- microcolonel 6y agoThe main content may load quickly, at least with javascript disabled, and that's a good thing; but I can hardly read the text though. 300 weight text at 51% grey is awful. When I see pages formatted like this, I tend to make a decision between opening the inspector and fixing the fonts, or just not bothering to read it, since it's clearly not designed to be read. Original: https://qui.suis.je/drop/faster/illegible.png https://qui.suis.je/drop/faster/illegible.png 400 weight: https://qui.suis.je/drop/faster/better.png https://qui.suis.je/drop/faster/better.png 400 weight and black: https://qui.suis.je/drop/faster/black.png https://qui.suis.je/drop/faster/black.png (not necessarily an improvement, once the weight is normal).
- shash7 6y agoSimply bumping the weight upto 400 would make the site much more readable.
- csswizardry 6y agoAbout to release this fix now.
- jandrese 6y agoYeah, I couldn't read through the whole page either. It seemed like they were trying to speed up the font by making it thinner and sleeker.
- csswizardry 6y agoThanks for the feedback!
- onion2k 6y ago
- davidhyde 6y agoThe modern bloatware web where 1.7 seconds is considered fast. Good article though, great research effort.
- seanwilson 6y ago> It’s widely accepted that self-hosted fonts are the fastest option: same origin means reduced network negotiation, predictable URLs mean we can preload, self-hosted means we can set our own cache-control directives, and full ownership mitigates the risks that come with leaving static assets on third-party origins. This is my general approach now. Feels like a lot of work to keep up with what the ideal remote loading snippet is when local hosting can be simpler and the fastest option. The deep dive into how all the approaches compare is really interesting though. It's frustrating web developers still need to deal with this complexity just to load a font. I don't think most non-frontend developers realise how much effort it takes to make a nontrivial high performance website. Most of the time in frontend there's many ways to do the same thing, each with their own subtle performance tradeoffs.
- cpascal 6y agoAnother plus is you are not potentially leaking information about your users to a third party.
- Ayesh 6y agoThis is my approach too. For logo/slogan fonts, one can go ahead even subset the font. It's probably a good idea to refresh the fonts off Google once or twice a year though. Although not often, these font file get updated.
- seanwilson 6y ago> For logo/slogan fonts, one can go ahead even subset the font. SVG is a nice option for logos. You can inline the SVG file directly into the HTML as well so there's no loading delay - especially useful for logos that need to be rendered immediately at the top of the page.
- partiallypro 6y agoI do like that now Google lets you downloads the fonts, so you can serve from your own CDN without having to hunt them down or download them manually from their CDN endpoint. One thing I'd like to see Google do is add icon font sets to their repo.
- kps 6y agoThey've always all been open, and you've always been able to get them. https://github.com/google/fonts https://github.com/google/fonts
- noneeeed 6y agoOh nice. I've always downloaded from the fonts website, I had no idea they had them hosted on GitHub, that's useful. Thanks.
- phonon 6y agohttps://github.com/google/material-design-icons/archive/master.zip https://github.com/google/material-design-icons/archive/mast...
- ezequiel-garzon 6y agoWould it bloat Chrome significantly if Google included their web fonts in the browser? And, you know... the other browsers can actually download them? I know it doesn't seem like fair play, but... I'm surprised they haven't done it yet.
- slig 6y agoCan't track the usage this way, though.
- vjba 6y agoNot sure if it applies to fonts too but https://decentraleyes.org https://decentraleyes.org
- jlokier 6y agoSure they can, just get Chrome to notify Google whenever a site uses one of the pre-downloaded webfonts. Chrome is pretty chatty with Google; you probably wouldn't notice the extra traffic from these notifications.
- csswizardry 6y agoFonts have versions, too; adding them all to the browser would be nigh on impossible.
- deleted 6y ago[deleted]
- Solar19 6y agoFaster still would be to skip the request for the CSS altogether by inlining it in the head. Therefore you'd just request the font immediately and directly. This makes the preconnect moot, and should be faster. Faster still is to use already installed fonts, as others have noted. But don't use "system" fonts if that means UI fonts like San Francisco or Segue. Exploit the rich font options on the desktop: Georgia, Sitka Text (Windows 8.1+), Calibri, Hoef, etc. Bootstrap and Medium started a ridiculous fad of using system UI fonts for body text. There are actual body text fonts available people.
- csswizardry 6y agoOP here. Inlining CSS won’t work as the request is UA-sniffed.
- r1ch 6y agoModern browsers are smart enough to only download the required file type, sniffing is unnecessary the vast majority of the time and you save an entire 3rd party connection. There are tools like https://google-webfonts-helper.herokuapp.com/fonts https://google-webfonts-helper.herokuapp.com/fonts which will get you the needed css.
- csswizardry 6y agoI know how browsers work, but thanks. The tool you linked does not solve the same problem, as the problems isn’t file types but URIs. Google is able to provide the tiniest possibly font files by hinting them for the specific browser/platform requesting them. We never consistently or predictably know the resultant URI of a Google Fonts-hosted font file. Here is a Tweet to the same effect from two days ago. Believe me, I’ve researched this :( https://twitter.com/csswizardry/status/1265716520346320903 https://twitter.com/csswizardry/status/1265716520346320903
- r1ch 6y agoThe URLs on gstatic.com are static. I've been doing this for years in production without issues.
- xsc 6y agoThe fastest google fonts are the ones you don't import.
- irrational 6y agoOff topic, but does anyone have a thought on what is the best unicode font? That is, a font that includes all the characters for the 30+ most use languages (including all the double byte languages)? I know every system had a default unicode font that any character can fall back to (I was surprised when I was working with Turkish and the font didn't 3 of the Turkish characters so it fell back to the system font for those three. That was the first time that I learned that text is rendered character by character and if the indicated font doesn't have that character then it will keep going through the fall backs before reaching the system font and then falling back to some default no font character found symbol), but what is the best non-system font that also covers the vast majority (by percentage of people) of modern languages?
- ArgyleSound 6y agoI think the architectural limitation of many font formats to 65,536 glyphs means that there aren’t really any good mainstream fonts that contain the entirety of Unicode, but families like Noto have multiple separate fonts that cover most of it.
- Ayesh 6y agoNoto (https://www.google.com/get/noto/ https://www.google.com/get/noto/) is a popular font that contains glyphs for all languages. It's a gigantic 1.1 GB file. I'm involved in fonts for my native language (Sinhalese), and let me tell you: dealing with fonts for multiple languages are is not easy! Some of the Asian languages including Sinhalese are pretty difficult to get right, and glyphs are quite difficult to give a character without breaking their meaning, specially when it comes ZWJs, diacritics, etc. You can subset a font like Noto to serve your languages, but it will come pretty large. Note that for web, @font-face declarations can set a Unicode character range for each font file, so browser downloads those fonts only when necessary.
- threepio 6y agoUnsafe at any speed.
- fevangelou 6y agoHere's a simple idea for the Chromium team: Bundle the top 100-200 Google web fonts (in .woff2 format) with Chromium (less than 20-30MBs) and boom, you just accelerated the entire internet.
- Ayesh 6y agoFirefox's Decentraleyes addon is built on a similar idea: https://addons.mozilla.org/en-US/firefox/addon/decentraleyes/ https://addons.mozilla.org/en-US/firefox/addon/decentraleyes... It does not work with fonts as far as I'm aware, but it can serve popular libraries locally, saving bandwidth, and protecting privacy.
- chance_state 6y agoWhat about all that juicy tracking data though?
- vntok 6y agoWhat data do you think is tracked exactly?
- chance_state 6y agoI don't know exactly what they're harvesting, but I'm assuming Google isn't offering a free font API out of the goodness of their hearts. Do you disagree? Maybe they're giving away a font API for literally nothing in return........
- MintelIE 6y agoDoes anybody else block fonts? Not only is it wasteful for my mobile data plan, but I just have this suspicion that sooner than later they will be used as a vector for some kind of security issue.
- Groxx 6y agoFaster rendering, no layout jumping, heck yes. I block them on every platform, but it's especially helpful on mobile.
- inetknght 6y ago> I just have this suspicion that sooner than later they will be used as a vector for some kind of security issue. You mean like being rendered into a canvas to get a high-entropy fingerprint of your device?
- skrebbel 6y agoHow do downloadable web fonts help with that?
- abjKT26nO8 6y agoTrueType implementations need to include an interpreter for a Turing-complete language (the hinting language). More about vulnerabilities: 1. https://security.stackexchange.com/questions/91347/how-can-a-font-be-used-for-privilege-escalation https://security.stackexchange.com/questions/91347/how-can-a... 2. https://threatpost.com/of-truetype-font-vulnerabilities-and-the-windows-kernel/101263/ https://threatpost.com/of-truetype-font-vulnerabilities-and-... 3. https://googleprojectzero.blogspot.com/2015/07/one-font-vulnerability-to-rule-them-all.html https://googleprojectzero.blogspot.com/2015/07/one-font-vuln...
- adrianN 6y agoI just set browser.display.use_document_fonts to false. This sometimes leads to problems for websites that want to use symbol fonts, but I don't mind that. If I use that website frequently I might write some user script to replace the weird letters with better letters, but that's rare.
- nicbou 6y agoOn allaboutberlin.com, I serve Google Fonts locally. Aside from the benefits mentioned in the article, it also makes HTTP2 server push possible. This means the font is pushed along with the page, without first having to parse the HTML and the CSS. It's significantly faster. There are fewer server round trips. The website loads from start to finish in 200ms on my end (in Berlin of course). At this point, DNS and server distancs are bigger issues than what's on the page. I find the call for system fonts rather funny, because it's such a pointless sacrifice. Another significant benefit is privacy. I don't like sending visitor information to third parties. I removed Google Fonts requests, and I'm working on removing Analytics. Once this is done, there won't be any third party requests on the page.
- csunbird 6y agoI did not know that you were active in HN. Thanks for the site, it helped me out greatly!
- XCSme 6y agoI also removed yesterday the Google Fonts import and just imported them locally. Performance seemed the same in my case, but I finally managed to completely remove Google 3rd party scripts from my site (no more GA, Google Fonts or Google Tag Manager). The only 3rd party left in my case is the chat widget from Tawk.to, but I will soon replace it with a simple contact form, as I am only using it as one anyway.
- chrismorgan 6y agoI don’t understand why the async stylesheet thing works: <link rel="stylesheet" href="$CSS&display=swap" media="print" onload="this.media='all'" /> The media query doesn’t match. Why does the browser even load the stylesheet? Shouldn’t it only load it if it starts to match? Especially for things like print stylesheets, where the media query will only become true by deliberate user action (unlike viewport size media queries where actions like rotating a device could cause them to start matching). Print stylesheets will be used by <0.0001% of users on almost all pages, and could easily be loaded only when the user tries to print the document. The whole thing is a dubious technique anyway because it depends on JavaScript—if JavaScript is disabled, the stylesheet will now not load ever. You’re probably OK with that in a case like this (the fonts are deliberately optional), but inevitably with such techniques people start using them on stylesheets that actually are important, because “it makes the page load faster” or something. P.S. Why the trailing slash on the tag? It’s completely useless, by definition, and trailing slashes can mislead people into thinking that you can close tags that way, which you can’t.
- Kovah 6y agoIt is explained in the article how it works: "This will implicitly tell the browser to load the CSS file in a non-blocking fashion, applying the styles only to the print context. However, the moment the file arrives, we tell the browser to apply it to all contexts, thus styling the rest of the page." The browser ignores the file because it's just for print and can be loaded later on. But when the page is fully loaded (onload="..."), the media property is set to "all" and does not stay at "print". When this happens, the browser now knows it should load it as soon as possible and does so. As you mentioned: if JS is disabled, the file will never load. The author states that his solution is not 100% perfect: "[Async webfonts] should always be considered an enhancement anyway, so we need to be able to cope without them; we can and should design decent fallbacks for use during their absence, and;"
- chrismorgan 6y agoYou missed my point, or I didn’t explain it well enough. I’m saying: why is the browser even starting to load the stylesheet? It should see media=print and decide that it doesn’t need it at all, and only fetch and load it when the media query starts to match, or perhaps by heuristics when there’s a reasonable chance that it will soon match. As it stands, browsers are fetching print stylesheets all the time (sure, at idle priority, but they’re still fetching them) even though they’re used less than once per million page loads. This seems silly.
- mstaoru 6y ago||fonts.googleapis.com^ is one of the first things I do when setting up a new browser.
- XCSme 6y agoI use `font-display: optional` instead of `swap` as it leads to less paint flashing, and if the font is too slow to load, it's not the end of the world if it displays it with the fallback system font.
- XCSme 6y agoI noticed this is actually mentioned in the article at the end as a bonus section. In my case `optional` did seem to work better. I didn't encounter the empty page flash he mentined. LE: I don't have that problem because I don't use async CSS. I didn't even know that was a thing, why would you use JavaScript to make sure the browser doesn't wait for the CSS to load? If JS is disabled you end up without any styles or have to add a noscript fallback. Also, why would you let the browser render FOUC?