HN Distilled

Essential insights from Hacker News discussions

How to self-host a web font from Google Fonts

Original Article

Hacker News Discussion

Here's a summary of the themes expressed in the Hacker News discussion:

Self-Hosting vs. Google Fonts CDN

A primary theme revolves around the decision to self-host web fonts (particularly from Google Fonts) versus using the Google Fonts CDN. Proponents of self-hosting often cite privacy concerns, control over resources, and potential performance benefits. On the other hand, the convenience and perceived optimization of Google's CDN are acknowledged.

  • Privacy and Data Collection: Many users expressed concern about Google collecting visitor data (IP addresses, referrers) when linking to Google Fonts directly, citing privacy regulations and personal preferences.

    • "Hotlinking Google Fonts leaks your visitors' IP addresses to Google. This bothers some people." - ameliaquining
    • "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." - JimDabell
    • "Google likes collecting referers and IP adresses" - Velocifyer
    • "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." - rs186

  • Control and Independence: Self-hosting offers greater control over font delivery, updates, and the ability to avoid relying on third-party services. This also includes the benefit of not having to worry about external firewalls blocking Google domains.

    • "For me the biggest benefit is that my customer doesn't have to whitelist a google endpoint to use our website." - freedomben
    • "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" - freedomben

  • Performance Considerations: While Google's CDN is generally fast, some users noted that self-hosting could offer performance improvements, especially when integrated with their own caching strategies or on self-hosted servers.

    • "mlunar: Not the author, but last time I checked (3y ago), the fonts CDN was surprisingly slow, like hundreds of milliseconds of latency. As the website I was optimizing was selfhosted, also selfhosting the font had a noticeable effect on the page load time." - mlunar
    • "I have Cloudflare and I have the TTL set to 10 years" - Velocifyer

  • Google's Role and Support for Self-Hosting: There's a sentiment that Google, despite making fonts available for download, doesn't offer a seamless or officially prioritized solution for self-hosting, which some find surprising given their open-source font offerings.

    • "But apparently Google is not motivated to offer such a solution, at all." - rs186
    • "It makes it even weirder that Google does not offer a simple solution to self host fonts." - cornedor
    • "OskarS: Google Fonts lets you just download the font, right? So what's the problem with self-hosting them? They're not encrypted or anything. Like, I'm not sure what else you would want Google to do. ... That seems perfectly reasonable to me, and it's a great service to improve typography on the web." - OskarS

Web Font Delivery Techniques and Optimization

The discussion touches upon various technical approaches for delivering web fonts, including embedding, subsetting, and the use of modern formats like WOFF2.

  • Embedding Fonts in CSS (Base64): The idea of embedding font data directly into CSS files (e.g., via Base64 encoding) was proposed for eliminating Flash of Unstyled Content (FOUC) and reducing FOUT. However, concerns were raised about increased file size and cacheability.

    • "Even better download it, subset it then base64 encode it into your CSS for zero FOUC." - damieng
    • "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" - olivia-banks
    • "Wouldn't the problem be the fonts are basically in every single request and uncacheable then?" - booi
    • "That increases FONC (flash of no content)" - Velocifyer

  • Subsetting and File Optimization (WOFF2): Users highlighted the importance of font subsetting to reduce file sizes, especially for variable fonts. There was also discussion about the availability and conversion of WOFF2 files.

    • "Google Fonts download button gives you a TTF file and not a WOFF2 file so you have to read the CSS to get the WOFF2 file." - Velocifyer
    • "Or you use Google's own TTF <-> WOFF2 converter tools:" - darrenf
    • "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." - valadaptive (referring to his tool Glypht)

  • Variable Fonts: The article was noted for not explicitly mentioning variable fonts, which offer more advanced typographic control and potential for smaller file sizes by including multiple font styles in a single file.

    • "Article forgot to mention variable fonts, so you should do something like" - thm (provides code snippet)

Rediscovering Old Web Practices and Simplicity

A recurring theme is the feeling that modern web development practices sometimes overlook or "rediscover" techniques and principles that were common in the early days of the web, leading to a loss of simplicity.

  • Nostalgia for Simpler Times: Several users expressed a sense of déjà vu, suggesting that current discussions about font hosting are reminiscent of how things were done "20 years ago" or in the "old days."

    • "It's like people are rediscovering CSS from 20 years ago." - gethly
    • "It’s like we’ve taken a step back and people forgot how the web used to be built." - dawnerd
    • "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." ... 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." - jrm4
    • "Makes me think we're getting old and the old ways of the web just aren't known as widely anymore." - freedomben
    • "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." - rambambram

  • Value of Foundational Knowledge: Some users defended the article and the discussion, arguing that basic "plumbing" knowledge like self-hosting fonts is still valuable and not as widely understood by newer developers. They see value in sharing these foundational concepts, even if they seem obvious to experienced developers.

    • "hluska: I’m old too, but have a different take on this type of content. Part of being old was the privilege of coming up within an industry when everything was documented and most things were searchable. ... Common sense isn’t as wide ranging, but that’s been replaced by extreme specialty knowledge. ... I’m glad that articles like this are being promoted. This plumbing type knowledge will be useful many many times over the course of a career. Not everything has to be aimed at me to be good, you know?" - hluska

  • The "Obvious" Answer: There's a divide between those who find self-hosting to be the straightforward, "obvious" solution, and those who are learning about it as a less common practice due to the prevalence of CDN-based solutions.

    • "jraph: > an article like this getting this high in hacker news is just very wild to me It might be because it's a "You should host web fonts from Google Fonts yourself" in disguise. The technical "How to" is almost not the important part here :-) It may give some pause to web devs who hotlink to google here on HN without much thoughts and make them consider doing it differently next time. I suspect many people upvoting it are doing it for this. Maybe upvotes here might actually mean "Please host Google Fonts yourself"." - jraph

Tooling and Resources for Self-Hosting

The discussion highlights several tools and resources that facilitate the process of self-hosting web fonts, addressing the friction some users experienced in the past.

  • Dedicated Tools for Subsetting and Hosting: Several user-created tools were shared to simplify the process of downloading, subsetting, and preparing fonts for self-hosting.

    • "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/" - valadaptive
    • "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." - ksymph
    • "I use google-webfonts-helper (https://gwfh.mranftl.com/fonts) to get google fonts" - SigmundurM

  • NPM Packages for Fonts: The emergence of using NPM for font distribution was also noted, as it often relies on CDNs like jsDelivr.

    • "FontSource releases all of google fonts and more as NPM packages: https://fontsource.org" - WebBurnout
    • "This is really fascinating considering that they package it as a npm package which is then used by jsdelivr which is essentially a free really low latency sponsored/(essentially operated?) by cloudflare and fastly etc." - Imustaskforhelp

  • Google's Own Tools and Repositories: Users pointed out official Google resources, like the woff2 converter and the Google Fonts GitHub repository, as ways to obtain and prepare font files.

    • "Or you use Google's own TTF <-> WOFF2 converter tools: https://github.com/google/woff2" - darrenf
    • "Many (if not all?) of the fonts are also on Github, including TTF/OTF/WOFF2 files." - jaredwiener

Font Choice and Design Aesthetics

A minor theme involves personal preferences for fonts and the idea that design aesthetic is subjective, impacting font choices.

  • Subjectivity of "Best" Fonts: The discussion briefly touches on the idea that what one person considers the "best" font is subjective and varies among individuals.

    • "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" - dylan604
    • "It would be a terrible day for humanity if we were all so homogeneous that one aesthetic satisfied everyone." - chuckadams

  • Font Pairing and Design Skills: One user noted that while default browser fonts can be limiting, the effort or skill required for good font pairing and design is a consideration for why people turn to curated font services.

    • "With built in fonts, if you want to support a wide range of machines, you have seven reliable fonts, one monospace and one cursive font to choose from. ... With CSS, you can make arial work as a heading font with a Georgia body for example, but that takes time and creates a testing burden. It only takes seconds to host a font that looks great out of the box and imposes a smaller testing burden. So for me the answer is a lack of talent that I’ve mitigated through transferring fonts on requests." - hluska