How to self-host a web font from Google Fonts

Original Article ↗ Hacker News Discussion ↗

Performance and loading strategies

  • Some advocate downloading, subsetting, and base64‑embedding fonts in CSS to avoid FOUC; others argue this can delay first paint and increase “flash of no content,” especially on slow connections.
  • Putting large base64 fonts directly in CSS makes stylesheets heavier and, if inlined per page, harder to cache. It’s also worse for users who block fonts or are on unreliable networks.
  • Variable fonts and @supports (font-variation-settings: normal) are suggested for performance and flexibility but were largely missing from the original article.

Ease or difficulty of self-hosting

  • One camp says modern self‑hosting is trivial: download TTF/OTF, optionally convert to WOFF2, add @font-face, done. Old “bulletproof” multi‑format syntax is mostly obsolete.
  • Another camp reports substantial friction: Google’s dynamic CSS, multiple variants, unicode ranges, and variable font configs make it non‑obvious which files and declarations are needed for full cross‑platform support.

Privacy, legal, and policy concerns

  • Many want to self‑host to avoid leaking visitor IPs and referers to Google, and to comply with GDPR rulings that consider Google Fonts hotlinking a PII leak without consent.
  • Google’s FAQ says Fonts doesn’t set cookies or build profiles “for targeted advertising,” but commenters distrust this, noting profiles can already exist and policies can change.

CDN vs self-host tradeoffs

  • Since browser caches are siloed by domain, public CDNs no longer give big cross‑site cache wins; self‑hosting (often behind Cloudflare or similar) can be as fast or faster.
  • Some report Google’s fonts CDN adding noticeable latency; others think using Google is simpler than maintaining their own static hosting.
  • A few still prefer linking to Google for perceived reliability and the chance that fonts are already cached, though others note the domain‑siloing undercuts this.

Tools and workflows mentioned

  • Tools to simplify self‑hosting and subsetting: Glypht (Google catalog + subsetting), Fontimize (SSG integration), google‑webfonts‑helper, FontSource (npm + jsDelivr/CDN), plus Google’s own woff2 converter and GitHub font repos.
  • Bunny Fonts and other third‑party CDNs are suggested as privacy‑friendlier Google Fonts replacements.

Generational and knowledge-gap discussion

  • Older developers express shock that “download font and link it in CSS” isn’t seen as obvious, framing this as a loss of basic web literacy.
  • Others argue the ecosystem’s complexity (tooling, Discord‑siloed knowledge, build chains) explains why such “plumbing” topics need explicit tutorials.
  • Some generational stereotyping (millennials vs Gen‑Z/Alpha) appears; younger participants push back, noting they are simply earlier in the learning curve.

Fonts, design, and UX opinions

  • Several complain about unreadable blue links on dark backgrounds and overuse of custom fonts when system fonts could suffice.
  • There’s tension between site owners wanting branding/“best fonts” and users wanting control over fonts and accessibility (e.g., skepticism about ligature coding fonts and the proliferation of bespoke webfonts).