Google Fonts

Google Fonts is a free, open-source web font service operated by Google, offering over 1,900 font families that can be loaded directly from Google's CDN or self-hosted in projects. Launched in 2010, it democratized access to quality web typography by removing both licensing complexity and the performance burden of self-hosting fonts in early web infrastructure.

The library spans a broad range of styles — geometric sans-serifs like Nunito and Poppins, humanist designs like Open Sans and Lato, elegant serifs like Playfair Display and Merriweather, display faces, monospace fonts for code, and variable fonts. Many of the most widely used typefaces on the web today come from Google Fonts.

Loading via CDN:

<!-- Single family -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

body {
  font-family: 'Inter', sans-serif;
}

Loading multiple families:

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;1,400&family=Source+Sans+3:wght@400;600&display=swap" rel="stylesheet">

The display=swap parameter applies font-display: swap to all fonts in the request, which improves Core Web Vitals by preventing Flash of Invisible Text (FOIT).

Self-hosting for performance:

While the CDN approach is convenient, self-hosting Google Fonts often yields better performance, especially after changes to cross-origin caching policies in modern browsers. Tools like google-webfonts-helper simplify downloading the correct WOFF2 files:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('/fonts/roboto-v32-latin-regular.woff2') format('woff2');
}

All fonts in the library are released under open licenses — primarily the SIL Open Font License (OFL) or Apache License — meaning they can be used commercially, modified, and embedded in products without per-seat licensing fees.

Google Fonts also supports variable fonts, allowing a single font file to cover a full range of weights and styles. Fonts like Inter, Roboto Flex, and Source Sans 3 ship as variable fonts, which can dramatically reduce the number of HTTP requests and total bytes transferred:

@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:[email protected]&display=swap');

h1 { font-weight: 700; }
p  { font-weight: 400; }

For privacy-conscious projects or offline-capable apps, self-hosting is always preferable. For rapid prototyping or projects where setup time matters, the CDN is hard to beat. The Google Fonts API documentation provides detailed guidance on subsetting, variable font axes, and optimization techniques.