14 ms·
Should you self-host Google Fonts?
- droithomme 7y agoAt this point you have to self host assets, assuming their license allows that, if you want to comply with privacy regulation. If you don't have a signed legal contract with Google asserting they are not tracking your customers via embedded links, then you must assume they are doing so and you are out of legal compliance.
- _eht 7y agoIn a word; yes.
- pg_is_a_butt 7y agoIn a better word; duh.
- inopinatus 7y agoWhat’s the current thinking on stashing fonts in localStorage for FOUT reduction?
- microcolonel 7y agoProbably better to split your font, and put your critical glyphs somewhere fast. Plus localStorage limits are very low, a couple decent sized fonts will blow your budget.
- EGreg 7y agoIs IndexedDB bigger? Why not use that?
- bhl 7y agoYou can. Another thing you can do is setup a service worker and intercept requests to Google Fonts, responding with an entry from cache or indexeddb instead.
- deleted 7y ago[deleted]
- EGreg 7y agoThat service worker stuff doesn’t work in iOS Safari though Can service workers intercept requests to other sites?
- ficklepickle 7y agoIt does since like 11.1. Yes, SW can cache all resources. This is how offline PWAs work.
- EGreg 7y agoTalkin about WebView
- pier25 7y agoWhat would be the advantage over loading the fonts from the browser cache?
- mkj 7y agoSeems rude to take up space in the browser that won't automatically expire.
- deleted 7y ago[deleted]
- kevingadd 7y agolocalStorage at least historically is painfully synchronous and in some cases it has to be fully loaded from disk before the page's JS can run. So if you're sure you're going to be using the font on every page I guess you can eat that load penalty, but then you have to deal with the size limit for localStorage (~2mb worst case, iirc), and also go to the trouble of doing string encode/decode to get the raw font bytes, then shove the font bytes into a blob and get a url for the bytes so you can finally load the font. At the end of that whole song and dance you've wasted a bunch of CPU and probably wall clock time being clever. Not sure it'd be faster than just hosting the files locally the regular way.
- tolmasky 7y agoWe’re basically forced to switch to self hosting due to the bizarre way Google implements statistics for Google Fonts. 1 out of 1000 requests will include a “tracking font” which is actually invalid and breaks document.fonts.load. This was an incredibly frustrating bug to track down. Bug for those interested: https://github.com/google/fonts/issues/2345 https://github.com/google/fonts/issues/2345
- alwillis 7y agoUseful information on self-hosting 3rd party resources: https://calendar.perfplanet.com/2019/self-hosting-third-party-resources-the-good-the-bad-and-the-ugly/ https://calendar.perfplanet.com/2019/self-hosting-third-part...
- arthurcolle 7y agoThe guy who is affiliated with Google Fonts who showed up on a thread a few days ago said that he didn't think there was any tracking related to new implementations of Google Fonts stuff. I guess this says the opposite. Let me try to dig up the thread for completeness... EDIT: Well that was faster than I thought I'd be able to do. Here's the comment, and the thread: https://news.ycombinator.com/item?id=22369415 https://news.ycombinator.com/item?id=22369415
- tolmasky 7y agoI actually don’t care what they’re doing with the data, I care that it crashes the site. The font that gets loaded once every thousand requests is https://fonts.gstatic.com/stats/Roboto/normal/400 https://fonts.gstatic.com/stats/Roboto/normal/400 so it’s some form of statistics. But again, my actual concern is that it breaks. Here’s the code I used to “catch” it. Here, it took roughly 500 requests: https://runkit.com/tolmasky/5e49b314ef61f900146c9a3b https://runkit.com/tolmasky/5e49b314ef61f900146c9a3b Edit: To be clear, I’m not implying this is something they try to keep secret, just showing a way to observe it since it purposely rarely shows up.
- tjoff 7y ago
- Noumenon72 7y agoWill some of the fonts already be available if you've visited other Google sites?
- abbeyj 7y agoIn the past this may have worked. But it won't anymore since browsers have introduced partitioning by origin in their caches. https://www.jefftk.com/p/shared-cache-is-going-away.amp https://www.jefftk.com/p/shared-cache-is-going-away.amp
- detaro 7y agoThe article argues that it's unlikely, with IMHO good reasons given.
- rgbrenner 7y agoI have this bookmarked that makes it very convenient to download a font from google: https://google-webfonts-helper.herokuapp.com/fonts https://google-webfonts-helper.herokuapp.com/fonts
- h2odragon 7y agoI switched my blog over to self hosted fonts the other day; that helper made it so easy. Do notice the tabs and checkboxes, it has many options.
- owenshen24 7y agoThis is a great resource. Thanks for sharing!
- SahAssar 7y agoOne thing I see is that it by default includes specific support for IE6-IE9, IOS before v5, android before v4.4 which definitely should not be the default these days. It should be an option, but not the default.
- majodev 7y agoCreator here. Yeah, you can possibly switch to "Modern Browsers" by now. Haven't touched this project in a while...
- earthboundkid 7y agoThanks, I use your web app for all my projects.
- nirui 7y agoI could add another point: A software should be self-sufficient (at least to a degree). When user opens the page, the page should not require an external service to function. Imagine a user who can access your page but cannot access Google, the user then has to wait a long time looking at a blank page before the web browser stopped trying, that is some really really bad experience. And your users won't blame Google for been too slow, they will just simply close your page, and try another search result instead.
- yathern 7y ago> Imagine a user who can access your page but cannot access Google, the user then has to wait a long time looking at a blank page before the web browser stopped trying, that is some really really bad experience. Not quite how web fonts work, usually they just swap in for the system fonts once loaded.
- nirui 7y agoYes, a well-designed system can minimize the impact by for example lazy-load the font file or even `Font Face Observer`[0] them for manual hot swap. But that is not the main point. The main point is: You are the one who's in charge of the user experience, not Google. Don't shift the responsibility to somebody (external service) you don't have control of. The software works the best when all it's parts are predicable, and make it more self-sufficient can help. [0] https://fontfaceobserver.com/ https://fontfaceobserver.com/
- swiley 7y agoGoogle’s own pages don’t do that, they intentionally hide the text until the font loads to prevent a “flash of unstylised content.” (It’s quite a bit longer than a flash on many connections, plenty long enough to start reading.)
- spookthesunset 7y agoThe odds of google being down / slow instead of your site are pretty bad. Unless you build your own data center, pull in all the fiber yourself, make the network switches yourself, build the servers yourself, etc... you are always going to be dependent on a third party or external service.
- elvicherrera 7y agoI believe stuff like this is what localstorage was for
- bovermyer 7y agoSo, to counter the point that "fonts only make the web look pretty," consider that font choice has a major impact on how accessible your website is. For example, most people don't consider that the W and the M in your font must look distinctly different, and not just vertical mirrors of each other. That is a user inclusion choice, not just a "make it look pretty" or "make it on-brand" choice.
- setr 7y agoWhy "must"? What group is being excluded by this?
- devbat8712 7y agoDyslexics
- polyphonicist 7y ago> For example, most people don't consider that the W and the M in your font must look distinctly different, and not just vertical mirrors of each other. Why isn't relying on default fonts provided by the user's system good enough for that?
- luckylion 7y agoI don't know what specific problem the parent is pointing to, but generally, users don't set up defaults, so you're really using the defaults of the vendor of whatever system the user uses. That may or may not be useful. Tool customization may be where the users and power users are separated - but it's hard to tell who is who when you're just looking at an HTTP request.
- LaGrange 7y ago...rule one of accessibility is let the user configure how they access your content, and you just chose to override that. So that's a pretty weak excuse.
- 7y ago
- marcan_42 7y agoIf you have a worldwide CDN yourself, or you only care about local users, or your fonts are small (Latin subset), yes. If you're using CJK fonts and you don't already have a CDN for your stuff, no. Google Fonts' CDN is going to beat your own server from any other continent.
- nsomaru 7y agoBut if you’re already loading your entire site from your server, what difference does it make if the fonts come from there too?
- maple3142 7y agoMaybe the site owner has a CDN(CloudFront, CloudFlare, ...) in front of their whole website.
- gen3 7y agoWouldn't that cache font files along with the rest of the website?
- robjan 7y ago[deleted]
- jeff18 7y agoShared cache is going away: https://news.ycombinator.com/item?id=21429621 https://news.ycombinator.com/item?id=21429621
- marcan_42 7y agoCJK fonts can be megabytes. The rest of an otherwise lean site can be a few hundred kilobytes or less. E.g. my site's About page is tiny, but pulls in a CJK font (with delayed load) for one line of text. It would make no sense to self-host that: https://marcan.st/about/ https://marcan.st/about/
- bcrosby95 7y agoIn addition to this, If you have users that live in or travel to China, you want to self host. Unless you like broken websites.
- Yeroc 7y agoAs is pointed out in the article for the most part fonts are a form of progressive enhancement and lacking the font normally doesn't actually break a website. Unless a little less pretty == broken of course.
- adrianN 7y agoAs someone who browses with "browser.display.use_document_fonts=0", virtually no site breaks without its fancypants fonts.
- deleted 7y ago[deleted]
- paulie_a 7y agoPersonally I block all third party fonts and have never noticed an issue with a plain old font. The web is so much nicer with a very restricted font set and range of sizes.
- detaro 7y agoOnly thing I've noticed breaking badly are symbol fonts that try to be clever with ligatures, so that e.g. "arrow_right" gets turned into an arrow symbol. Happens a bunch on Google documentation sites.
- Proven 7y agoWhy use Google for anything? I block remote fonts. uBlock > Default behavior > Block remote fonts
- potench 7y agoSafari does more than other browsers to prevent cross domain tracking. 3rd party cookies disabled by default, cookies in iframes considered 3rd party (so, blocked), and TIL it maintains a separate local cache for each domain to prevent fingerprinting a user across domains. I have a hunch you could probably drop 3rd party cookies using a <video> element (maybe for DRM stuff? Just a hunch I have because video-ad CPMs are consistent or better on iOS over android/desktop indicating perhaps advertisers know the user somehow). Awesome article, great reference links, super interesting!
- pcurve 7y agoWe ran into a rather large issue using Google Font CDN a few years ago. We were using Rubik font and pages were font was render as blank in certain browser combination. They had to rollback, but there were a lot of escalations. You can see the issue here. https://github.com/google/fonts/issues/1137 https://github.com/google/fonts/issues/1137 Self-hosting fixed the problem. We no longer use Google Font CDN.
- tuananh 7y agoif you happen to use cloudflare, you can do this: https://blog.cloudflare.com/fast-google-fonts-with-cloudflare-workers/ https://blog.cloudflare.com/fast-google-fonts-with-cloudflar...
- partiallypro 7y agoHonestly though, this is absolutely ridiculous that you have to do something this complex to fix something so simple. Why doesn't Cloudflare just build this in and let users toggle it on and off under their performance tab?
- tuananh 7y agoeventually i guess. if the interest is high. this is just an example of what cloudflare workers can do.
- irrational 7y agoShould you use Google fonts?
- supportlocal4h 7y agoI read this question more generally as I have just revisited it myself in the past week. For me this isn't just a question about Google Fonts. It's a question about jQuery and React and any common js lib off a CDN. And it's even a question about DLLs. glibc, zlib, .net. If it doesn't ship as part of your product, but your product can't work without it... There's the problem of malicious replacement. There's the problem of disappearance. And various other problems. On the other hand, there are all the positives. One upgrade at one URL and tons of dependent software gets a free security fix or performance fix or what have you. There's better caching. There's the speed benefit of CDNs. There's the lower memory consumption of DLLs. This time around I have decided to self-host. But I don't think there's one right answer.
- jeltz 7y agoBetter caching is no longer an advantage since they changed how caching works to prevent data leaks https://bugzilla.mozilla.org/show_bug.cgi?id=1536058 https://bugzilla.mozilla.org/show_bug.cgi?id=1536058
- oracle2025 7y agoGoogle-Fonts could be made part of Google-Chrome and would never be downloaded ever again for Chrome Users
- ThePhysicist 7y agoThere are a lot of fonts on Google Fonts that are many GB in size if you’d include them all.
- jstewartmobile 7y agoyou should self host EVERYTHING
- tempodox 7y agoBut wouldn't that stop Google from putting ads into their fonts and AMP into URLs? Does anybody self-host Gmail?
- jstewartmobile 7y agoStep 1) get a degree to jerk around with docker all day for money Step 2) realize that this computer shit is hard Step 3) let google do it instead
- hannob 7y agoSurprised I didn't see that point mentioned: If you self-host Fonts ("Google Fonts" is ultimately just a collection of open source fonts) it's one less thing to care about regarding privacy laws, sharing data with third parties and potentially having to justify due to GDPR etc.
- tunetheweb 7y agoFrom the post: “That leads nicely into the privacy implications of using third-party CDNs. You have no idea what sort of tracking they are doing to your users by using them, rather than self-hosting. And recent legislation means a lot of sites have to explicitly list all the cookies used on the site, which gets more complicated when using a third-party.“
- GrumpyNl 7y agoYou should host everything yourself.
- cateye 7y agoBesides performance and other completely technical reasons, in my view it is mostly a question how dependent an individual or a company wants to be. Of course it can be technically and operationally convenient but it also means that now you are even more dependent on the fickle choices that Google makes that is per definition in their own interests.
- TazeTSchnitzel 7y agoA while ago I routed Google Fonts to ::/0.0.0.0 in my /etc/hosts file. It makes pages load a little faster, and shows me which websites thought to provide a sensible fallback and which did not.
- jackewiehose 7y agoSome time ago I disabled all webfonts (ublock or umatrix) because I really don't care about stupid individual fonts and I thought I could save some bytes. Unfortunately that broke a lot of video-players (like netflix) because they use font-symbols for play/pause buttons etc.
- TazeTSchnitzel 7y agoMm, to me that feels like an abuse of fonts — it's inaccessible at least. It makes me sad that they don't bother using the Unicode codepoints corresponding to those symbols if they exist.
- Aachen 7y agoI turned off custom fonts and find some websites are much nicer to read.
- lbj 7y agoI love how this guy thinks. "Why does this font flash on pageload?" and then procedes a 5-page write up on the intricacies of fonts, caches and everything in between. Great write-up!
- swiley 7y agoIMO: don’t force your users to load fonts. On slow connections they’ll read part of the page until suddenly the font loads and everything gets rearranged. Worse is what google does: hide the text with JavaScript until the font loads so the whole page takes eons before you can read it. If there’s a font with identical metrics that most people have installed then fine, otherwise don’t be a dick to people on bad connections.
- 1337shadow 7y agoAnother reason would be to simplify CSP configuration.
- 101404 7y agoI'd say that in 99% of the cases, your users would be better off and your site more useful, if you just used one of the standard fonts.
- abiro 7y agoGood article, but the best solution to the font problem is to simply use native fonts: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/ https://www.smashingmagazine.com/2015/11/using-system-ui-fon... This solves both privacy and performance problems and this is also what Bootstrap recommends now: https://getbootstrap.com/docs/4.0/content/typography/ https://getbootstrap.com/docs/4.0/content/typography/
- beefhash 7y agoLong prose does not benefit from those fonts. A system font is usually used for UIs and is optimized accordingly. There's more to font selection than "use the same font as native applications".
- filleduchaos 7y agoI'm not quite sure what about e.g. Roboto or SF Pro Text isn't suited to long prose, or if you think OSes ship with just the font used for system UI (and not also dozens of others several of which were pretty much designed for longform text).
- triangleman 7y agoOne time a Dell support install overwrote my Helvetica Neue font and it took me months to figure out why some sites looked absolutely terrible. Not saying that you shouldn't use native fonts but man Dell threw a wrench into that idea for me.
- paulcarroty 7y agoSure if you/your clients don't want be tracked.
- mschuster91 7y agoIf you're in the EU you might want to self-host the fonts (and other assets!) anyway for GDPR compliance - technically, loading any 3rd party asset exposes the visitor's IP address plus any possible tracking cookie plus the exact URL of the website your visitor is reading to the provider. Google might say they're not doing any tracking on the fonts, but I don't believe them at all.
- drewg123 7y agoLooking at this, as an old fart who works in the kernel, I just can't help but wonder: How is it possible that we have arrived at something this painfully slow? What are we getting from all these zillion resources a page is loading to make it worth the 3-6 second wait? The static web of the 90s over dialup was faster than this. I want my 28800 modem, pentium pro running netscape on FreeBSD 2.x, and static pages back. It was faster (with images disabled at least) than today's web with a 1Gb/s symmetric fiber connection, FF/Chrome on a MBP, even with ads blocked.
- GordonS 7y agoWhile I take your point about bloated web pages, I think you have a serious case of nostalgia viewed through rose-tinted glasses. I recall the days of a 14k modem, and they were not pleasant, even for just text. And when you added images to the mix, it was just painful. Let's not even discuss videos...
- knodi123 7y agoHe took it too far, granted, but overall there's a valid point. By coincidence, I'm writing an applicant tracking tool in rails+react now, and I also wrote one in perl about 16 years ago. The modern app uses so many javascript libraries, 3rd party fonts, and is generally just so... ouch. I remember demoing the perl app internally at my first job, and in many cases our page could render the page about as fast as it took to click. Our boss thought it was a static html demo just based on how fast it was.
- GordonS 7y agoI've had similar experiences, except it used to be PHP for me back in the day, rather than perl - I recall a servicedesk system, as well as a purchase order approval system, amongst many others. Not a single line of JS in sight! But some of us never abandoned server-side rendering - I work a lot with ASP.NET Core MVC, and it's great; I'm very productive with it. But I do add Javascript on top here and there, where it adds value.
- 7y ago
- 33degrees 7y agoIf you use npm, there are packages for most (if not all?) google fonts via the Typefaces project, which makes them trivial to self host. https://github.com/KyleAMathews/typefaces https://github.com/KyleAMathews/typefaces
- vinniejames 7y agoIt's a good idea to self-host ALL 3rd party assets. Otherwise you open yourself up to the possibility any one of those contains malicious code. At the very minimum, always check the integrity hash of third party assets
- web007 7y agoAnother reason to self-host: Google will gladly change the font characteristics out from under you. https://github.com/JulietaUla/Montserrat/issues/60#issuecomment-342618135 https://github.com/JulietaUla/Montserrat/issues/60#issuecomm...
- neillyons 7y agoI’m about to switch to self hosting so the font will load in mainland China.
- zaroth 7y agoSo the only thing that self-hosting would be missing is all the magic that Google is doing server-side to optimize the served files for the particular browser that is making the request. Things like encoding (WOFF vs WOFF2) and font hinting need to be dynamically enabled/disabled based on the browser making the request to get the best possible result. You can’t do that with self-hosting without writing some code.... that would be a great open source plugin to have, so that self-hosting could be done without any quality compromises. Getting the right asset served to every browser was the reason I punted on self-hosting fonts last time I tried. For example, I care much more about the page looking correct (legible crisp rendering fonts) than shaving 10Kb off the page size. Nothing is worse than the wrong font package causing blurry letters on 20% of your users’ devices.
- zelly 7y agoFree fonts aren't sufficiently better than the default system fonts to justify the slowdown. More people will leave your site because of the added microsecond latency than because "the font doesn't look good." You shouldn't use Google Fonts period. https://practicaltypography.com/font-basics.html#why-use-professional-fonts https://practicaltypography.com/font-basics.html#why-use-pro...
- sascha_sl 7y agoThat post doesn't come across as anything but pure elitism, it makes no real point and just claims "yeah system and free fonts are just worse". Fonts like Roboto, Fira, Open Sans, Ubuntu, Merriweather or Vollkorn are all "professional grade" font families with lots of variants and options. Basic typesetting knowledge is going to get you much much further than buying a random professional font if you're designing "a document".