Summit Themes
Blog

40 reliable free & open-source type libraries for serious work

Published on December 18, 2025 by Summit Themes Team · 8 min read

Good typography is usually the last thing a project gets and the first thing a visitor notices. The good news is that the open-source type ecosystem is deep enough that you never need to spend money just to get professional-quality letterforms or a solid font-loading pipeline. This list covers everything from typeface families you can embed today to low-level Python tools for slicing font files — verified real projects, no filler.

The list is organized by what the tool actually does. If you are looking for a family to use in a project, start at the top. If you are fighting a font-loading performance problem, jump to the tooling sections.

Font family collections and repositories

These are places to find and install complete, license-clear typefaces rather than individual families.

  • Fontsource — self-host 1,500+ open-source fonts as individual npm packages. Install one font, import the CSS, done. Each package pins a specific version so upgrades are intentional. Nearly every family is under the SIL Open Font License (OFL).
  • Google Fonts — over 1,900 families including 525+ variable fonts, served from Google's CDN or downloadable for self-hosting. The API has evolved; you can request variable axes directly in the URL.
  • The League of Moveable Type — the first open-source type foundry (2009). Smaller catalogue than Google Fonts but every family is hand-curated. Includes Raleway, Junction, Fanwood, Goudy Bookletter 1911, Orbitron, and a handful of others that aged well.
  • Open Foundry — a curated showcase of open-source typefaces, organized by classification. Good for browsing when you need a specific aesthetic rather than a specific name.
  • Font Library — a catalogued collection filtered by OFL license, script, and classification. Useful when you need to verify a font's license before committing.
  • Font Squirrel — curated free fonts with a "100% free for commercial use" filter and a built-in webfont generator for converting formats.
  • typefaces — the predecessor to Fontsource; npm packages for open-source fonts in a self-hosting pattern. Largely superseded by Fontsource but still referenced in older projects.

Individual typeface families worth knowing by name

These are specific families that show up repeatedly in serious work. Each is OFL-licensed unless noted.

Sans-serif

  • Inter (Rasmus Andersson) — designed for screen legibility at small sizes. Variable font with optical sizing. Probably the most widely used open-source sans on the web today.
  • IBM Plex Sans — IBM's corporate typeface, available in 8 weights with matching Serif, Mono, and Condensed siblings. Multilingual support is exceptional.
  • Geist Sans & Mono (Vercel) — a geometric sans and monospace pair, SIL OFL, designed for UI and developer tooling. Clean, modern, and increasingly visible in design systems.
  • Nunito — rounded, friendly, highly legible. Good for service-business contexts where you want approachable rather than corporate.
  • Outfit — a geometric sans with a wide range of weights and a modern feel that works well in both display and body sizes.
  • DM Sans — a low-contrast geometric intended for small-to-medium-sized text; pairs well with DM Serif.
  • Plus Jakarta Sans — a contemporary sans that reads cleanly across weights from ExtraLight to ExtraBold.
  • Libre Franklin — a faithful revival of ATF Franklin Gothic, optimized for the web.

Serif

  • Source Serif 4 (Adobe) — a variable serif designed for long-form reading. Part of the Source family alongside Source Sans and Source Code Pro.
  • Lora — a well-balanced text serif with contemporary brushed curves. Widely used for editorial and blog copy.
  • Merriweather — designed for screen reading at small sizes; slightly condensed with generous x-height.
  • Crimson Pro — an old-style serif based on Crimson Text, extended with more weights and improved spacing.
  • DM Serif Display — a high-contrast display serif paired with DM Sans above.
  • Playfair Display — high contrast, transitional; works for headings but not body at small sizes.
  • Libertinus Serif — a fork of Linux Libertine, expanded with six styles across three weights. Excellent Unicode and multilingual coverage for academic or long-form content.

Monospace

  • IBM Plex Mono — the monospace member of the Plex family; humanist proportions, 8 weights.
  • Cascadia Code (Microsoft, SIL OFL) — the default font for Windows Terminal, with programming ligatures. Also available as Cascadia Mono without ligatures.
  • Fira Code — a monospace with a large set of programming ligatures derived from Fira Mono.
  • JetBrains Mono (SIL OFL) — designed to reduce eye strain during long coding sessions; increased letter height, distinct symbols.
  • Source Code Pro (Adobe) — part of the Source family; clean, neutral, reliable across editors and terminals.
  • Geist Mono — the monospace companion to Geist Sans above.

Variable fonts

  • Recursive (Arrow Type / Stephen Nixon) — a five-axis variable font covering weight, slant, italics, mono spacing, and a "casual" axis that slides from formal to brushstroke. Remarkable range in a single file.
  • Fraunces — an optical-size variable font with a "wonky" axis for stylistic alternates. Distinctive at display sizes.
  • Literata (TypeTogether) — a variable serif commissioned for Google Play Books; excellent for long-form reading at any screen density.

Font-loading and delivery tools

  • Font Face Observer (Bram Stein) — a tiny promise-based library (1.3 KB gzipped) for detecting when a @font-face font has loaded. Lets you set a fonts-loaded class on <html> and avoid flash-of-invisible-text (FOIT) without blocking the render path.
  • Fontaine (UnJS) — automatically generates @font-face fallback declarations using ascent-override, descent-override, and line-gap-override to match your web font's metrics, eliminating cumulative layout shift (CLS) from font swaps. Nuxt and Next.js integrations exist; it also works standalone.
  • google-webfonts-helper — a no-frills tool for downloading Google Fonts as self-hosted files and generating the corresponding @font-face CSS. Removes the CDN dependency entirely.
  • Transfonter — a browser-based font converter. Drop in an OTF or TTF and get WOFF, WOFF2, and a ready-to-paste @font-face block.

Font metrics and spacing tools

  • Capsize (SEEK OSS) — uses font metadata to size text by its cap-height rather than by font-size, then trims the invisible whitespace above capitals and below the baseline that the browser normally adds. The @capsizecss/metrics package includes pre-extracted metrics for Google Fonts and system fonts. Available for vanilla CSS, vanilla-extract, Sprinkles, and others.
  • Utopia (Clearleft) — a fluid type and space scale calculator that generates CSS custom-property declarations using clamp(). Enter a min/max viewport and a type scale ratio; copy the output. Also has a Figma plugin.
  • Fluid Type Scale Calculator — an open-source tool similar to Utopia, hosted on GitHub Pages. Generates a full modular fluid scale as CSS custom properties.
  • postcss-utopia — brings Utopia's fluid interpolation into PostCSS so you can write font-size: utopia.clamp(step) in your source CSS and get clamp() values on output.

Font subsetting and manipulation tools

Subsetting removes glyphs you do not use, shrinking a variable font from several hundred KB down to 20–40 KB for a typical Latin project. These tools make that practical.

  • FontTools (Python) — the foundational library for font manipulation. Includes pyftsubset for subsetting, ttx for converting fonts to/from XML, and woff2 for compression. Most other font tools sit on top of this.
  • Glyphhanger (Zach Leatherman) — an npm CLI that crawls a URL, finds every Unicode character in use, and calls pyftsubset to produce a minimal font file with the right unicode-range. Requires Python and FontTools. One command replaces a lot of manual work.
  • opentype.js — a JavaScript library (browser and Node) for reading and writing OpenType and TrueType fonts. Supports kerning, ligature lookup, glyph path extraction, and unicode-range inspection. Useful when you need to introspect a font at runtime or build a custom text renderer.
  • fontkit — an advanced font engine for Node and the browser used internally by PDFKit. Handles glyph substitution (GSUB/GPOS), color emoji, and font subsetting. Lower-level than opentype.js but more complete for complex layout tasks.
  • lib-font — a lightweight ES-module-native Font object for the browser and Node, in the spirit of new Image(). Good when you need to inspect font tables without pulling in a heavyweight dependency.
  • Brotli — not a font tool per se, but the compression algorithm behind WOFF2. When you generate WOFF2 files from FontTools, Brotli is the compressor doing the heavy lifting; knowing this helps when you hit compression errors in CI pipelines.

OpenType feature utilities

  • utility-opentype — CSS utility classes for OpenType features (font-variant-* and font-feature-settings). Covers ligatures, old-style numerals, small caps, ordinals, fractions, and more. Drop it into any project to get class-based access to features without writing raw font-feature-settings values.
  • Wakamai Fondue — a browser-based font inspector (drop a file on the page). Shows every OpenType feature the font supports, every variable axis with live sliders, and every glyph. Indispensable for evaluating a new family before committing to it.
  • Axis-Praxis — a playground for variable font axes in modern browsers. Lets you scrub every registered and custom axis in real time with no setup.

Type-scale and pairing utilities

  • Type Scale (Jeremy Church) — a visual type-scale generator. Pick a ratio (Minor Third, Perfect Fourth, Golden Ratio, etc.), a base size, and a font; preview and copy the CSS. Open-source on GitHub.
  • @capsizecss/unpack — part of the Capsize repo, this sub-package extracts raw font metrics from any font file so you can compute trimmed spacing for fonts not yet in the metrics catalogue.
  • tailwind-utopia — a Tailwind CSS plugin that wires Utopia's fluid type and space scales into Tailwind utility classes. You configure your min/max steps in tailwind.config and get fluid font-size utilities automatically.

A quick self-hosting setup with Fontsource

Most of the font-delivery friction disappears once you self-host. Here is the full setup for Inter in an Astro project using Fontsource, which avoids the external CDN request and gives you control over subsetting:

npm install @fontsource-variable/inter

Then in your base layout (or a global CSS import):

/* Import only the Latin subset of the variable font */
@import '@fontsource-variable/inter/latin.css';

/* Use it */
:root {
  font-family: 'Inter Variable', system-ui, sans-serif;
}

The latin.css import limits the download to the characters your site actually renders. For a multilingual site, switch to the full index.css or import specific subsets by name. Every Fontsource variable font package follows the same pattern.

If you want to pair this with Capsize to remove the invisible whitespace the browser adds above and below text:

npm install @capsizecss/core @capsizecss/metrics
import { createStyleObject } from '@capsizecss/core';
import interMetrics from '@capsizecss/metrics/inter';

const bodyStyle = createStyleObject({
  fontMetrics: interMetrics,
  fontSize: 16,
  leading: 24,
});
/* bodyStyle is a plain object with CSS properties you apply however you like */

Choosing a license: OFL vs Apache 2.0

Almost every font in this list is under one of two licenses. The SIL Open Font License (OFL) allows free use, modification, and redistribution — including in commercial products — with one constraint: if you distribute a modified version of the font itself, it must remain under the OFL and cannot use the original font name. For web use (embedding in a site, packaging in a zip you sell), the OFL imposes no practical restrictions. The Apache 2.0 license (used by some Google Fonts families) is similar but without the modified-name requirement. Both are safe for commercial work.

Where to go from here

The tools above cover the full lifecycle: find a family, install it as an npm package, subset it down to the glyphs you need, load it without layout shift, and size it with metrics-aware spacing. None of it requires a paid subscription. The actual investment is time spent learning which tool belongs at which stage — font selection belongs at the start of a project, subsetting belongs in your build step, Capsize or Utopia belong in your design tokens. Get those three stages right and font performance stops being a problem you revisit later and becomes a detail you set once.