Click above and type to preview your own text

sans-serifVariable (wdth, wght)OFL

Mozilla Headline

Mozilla's brand headline face with a uniwidth design — spacing and kerning stay identical across all weights, so no text reflow when weight changes.

WebsiteGoogle FontsStudio DRAMA

Font settings

400
100
These settings in CSS
.mozilla-headline {
  font-family: "Mozilla Headline", sans-serif;
}

Waterfall

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Character set

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

!@#$%&*()[]{}<>,.;:'"?/—–-+=

Paragraph

Typography is the craft of endowing human language with a durable visual form. It shapes how words are read, felt and remembered — from wayfinding on a station platform to the small print of a contract. Good type disappears into reading; great type gives a voice to the text.

Install

Google Fonts

Embed in the <head> of your HTML
<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=Mozilla+Headline:wdth,wght@75..125,200..700&display=swap" rel="stylesheet">
Use Mozilla Headline in CSS
/* <weight>: use a value from 200 to 700 */

.mozilla-headline {
  font-family: "Mozilla Headline", sans-serif;
  font-weight: <weight>;
}

Fontsource

Install from npm
npm install @fontsource-variable/mozilla-headline
Import once in your app entry
// Supports weights 200-700
import "@fontsource-variable/mozilla-headline";
Use in CSS
body {
  font-family: "Mozilla Headline Variable", sans-serif;
}

Self-host

Google Fonts and Fontsource serve stripped builds — most OpenType features are removed. Self-hosting the original files is the only way to get the full feature set.

Download the font files from Studio DRAMA and serve them yourself:

Declare with @font-face
@font-face {
  font-family: "Mozilla Headline";
  src: url("/fonts/mozilla-headline.woff2") format("woff2");
  font-display: swap;
}

Details

Designer
Studio DRAMA
Foundry
Mozilla
Licence
OFL
Format
Variable (wdth, wght)
Variable axes
wdth, wght