majodev/google-webfonts-helper

★ 12,952TypeScriptAudience · developerComplexity · 1/5Setup · easy

Mindmap

mindmap
  root((webfonts-helper))
    What it does
      Font downloading
      CSS generation
      Self hosting
    Tech stack
      TypeScript
    Font formats
      woff2
      woff
      ttf
      eot
    Use cases
      GDPR compliance
      Smaller file sizes
      Private instance

mindmap root((webfonts-helper)) What it does Font downloading CSS generation Self hosting Tech stack TypeScript Font formats woff2 woff ttf eot Use cases GDPR compliance Smaller file sizes Private instance

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Download Google Font files with matching CSS to self-host them and stop visitor requests going to Google's servers.

USE CASE 2

Select only the character subsets and weights you need to minimize font file sizes in production.

USE CASE 3

Run a private instance of the tool in a restricted or air-gapped environment instead of using the public hosted version.

Tech stack

TypeScript

Getting it running

Difficulty · easy Time to first run · 5min

No installation required to use the hosted version, self-hosting requires running the TypeScript project locally.

In plain English

google-webfonts-helper is a web application that makes it straightforward to download and self-host fonts from the Google Fonts catalog. When a website loads Google Fonts the standard way, each visitor's browser makes a request directly to Google's servers, which passes information about the visitor to Google. Hosting the font files on your own server removes that third-party request. The tool is available as a hosted web app where you can search for any font in the Google Fonts library, select the character sets (called subsets) and weights you need, and download the files in all the common web font formats: woff2, woff, ttf, eot, and svg. Along with the downloaded files, it generates a ready-to-paste CSS snippet that tells browsers how to load the fonts from your own server. The project description sums up the output as font files plus CSS snippets with minimal effort. The workflow is simple: pick a font, choose the weights and character subsets you want (for example, only the Latin alphabet to keep file sizes down), copy the generated CSS into your stylesheet, and place the downloaded font files in your project. Your website then loads fonts from your own server rather than from Google. The source code is available on GitHub if you prefer to run your own private instance rather than use the public hosted version. The project is written in TypeScript and is maintained with community sponsorship, which the README reflects in a long list of contributors who support it financially.

Copy-paste prompts

Prompt 1

I want to self-host the Inter font on my website for GDPR compliance. Using google-webfonts-helper, show me which files to download and what CSS to add to my stylesheet.

Prompt 2

I need only the Latin subset of Roboto at weights 400 and 700 to keep file sizes small. Walk me through selecting the right options in google-webfonts-helper and pasting the CSS.

Prompt 3

How do I run my own private instance of google-webfonts-helper locally so I can use it without network access to the public hosted version?

Open on GitHub → Explain another repo

← majodev on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.