Design Library
FT-001 · F. Fonts and Typography

Google Fonts

Free open-source font library + CSS API; variable fonts; Noto coverage.

Summary

Free open-source font library + CSS API; variable fonts; Noto coverage.

What it is

A catalog of open-licensed fonts you can browse, test and self-host.

Who it’s for

Anyone choosing a typeface pair for a product or site with clear licensing.

Monochrome lightSidebar app shellNeutral, tool-like
Google Fonts: hero image
Figure 1. Specimens: Inter, Roboto, Playfair Display, JetBrains Mono. Source: RENDERED BY US via the Google Fonts CSS API (fonts.googleapis.com); fonts under SIL OFL

Key takeaways

  • Captured fonts.google.com: an app shell with a left filter sidebar and a long list of large type specimens.
  • Almost no color; the type specimens are the visual content, with a sample-text field at the top.
  • Color: monochrome light theme; dominant colors #FFFFFF, #97A5B8 (ESTIMATED from our capture).

Best practices to borrow

  • Keep chrome neutral and let content carry color.
  • Keep navigation in a persistent sidebar and give content the widest column.
  • Use at most two families; test them at your real UI sizes before committing.
ESTIMATED

Palette preview

#FFFFFF~50%#97A5B8~7%

Quick links

Source PDF notes DESIGN.md Images (.zip)

Figures

Extracted from the v2 research PDF. Only figures the research team rendered from open-licensed or official public values are shown; official page screenshots and third-party artwork are not published here (they are blanked in the downloadable PDF). Captions and credits are as written in the PDF.

Figure 1. Specimens: Inter, Roboto, Playfair Display, JetBrains Mono. Source: RENDERED BY US via the Google Fonts CSS API (fonts.googleapis.
Figure 1. Specimens: Inter, Roboto, Playfair Display, JetBrains Mono. Source: RENDERED BY US via the Google Fonts CSS API (fonts.googleapis.com); fonts under SIL OFL
Download full resolutionRendered by the research team; see caption for source and license. Entry license: Mostly SIL OFL; some Apache-2.0 / Ubuntu Font License

Related entries

FT-002 · Font Library

Fontshare

Warm neutralCard grid
DS-001 · Design System

Material Design 3

PastelSplit hero
IC-004 · Icon Framework

Iconify

Monochrome lightCentered hero
AV-001 · Avatar Library

DiceBear

Monochrome lightSplit hero
ESTIMATED

Dominant palette from our captures

Measured by us from our screenshot(s) of https://fonts.google.com (median-cut quantization; share = % of pixels). Approximate and not official.

#FFFFFF~50% of pixels#97A5B8~7% of pixels

Layout pattern: Sidebar app shell

Observed by us on the captured page(s). See all entries by layout.

How to apply it: Keep navigation in a persistent sidebar and give content the widest column.

Other entries with this layout: none yet.

Our analysis

Captured fonts.google.com: an app shell with a left filter sidebar and a long list of large type specimens. Almost no color; the type specimens are the visual content, with a sample-text field at the top.

Monochrome lightSidebar app shellNeutral, tool-like

Similar to this

Ranked by shared color theme, layout, category, type and mood tags.

IC-004 · Icon Framework

Iconify

Monochrome lightCentered hero
FT-002 · Font Library

Fontshare

Warm neutralCard grid
AV-001 · Avatar Library

DiceBear

Monochrome lightSplit hero
AV-002 · Avatar Style

DiceBear · Lorelei

Monochrome lightDocumentation

Downloads

PDF notes All images (.zip) DESIGN.md

PDF: research notes made for this library; third-party images inside follow the credits in their captions. License / terms of the source: Mostly SIL OFL; some Apache-2.0 / Ubuntu Font License

DESIGN.md for AI coding agents

Copy this into your repo or agent context. OFFICIAL and ESTIMATED values are labelled.

Download .mdAll entries
# DESIGN.md · Google Fonts (FT-001)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Font Library · Category: F. Fonts and Typography
- Platforms: Web, Android, Desktop
- Color theme: Monochrome light · Layout pattern: Sidebar app shell · Mood: Neutral, tool-like
- License / terms: Mostly SIL OFL; some Apache-2.0 / Ubuntu Font License

Free open-source font library + CSS API; variable fonts; Noto coverage.

### Analysis (ours)
Captured fonts.google.com: an app shell with a left filter sidebar and a long list of large type specimens. Almost no color; the type specimens are the visual content, with a sample-text field at the top.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FFFFFF` ~50%
- `#97A5B8` ~7%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
No component inventory documented for this entry.

## Layout rules
- Observed layout pattern: **Sidebar app shell** (from our captures).

## Do’s and don’ts
- Do: Keep chrome neutral and let content (images, icons, type) carry color.
- Don’t: Don’t introduce decorative color that competes with content.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://fonts.google.com
- Library entry: https://design-library-byt.pages.dev/entry/FT-001