diff --git a/CHANGELOG.md b/CHANGELOG.md
index d983246dc..59de88925 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,17 +1,16 @@
# HEAD
## Features
-
+* **fonts:** (breaking) Adds rebrand fonts, Mozilla Headline and Mozilla Text. Removes outdated Mozilla Brand font, Zilla Slab. New fonts will only support `woff2` format to simplify maintenance.
* **fonts:** Upgrade Inter font to version 4.1, drop WOFF 1.0 format (#1026)
* **css:** Add `text-wrap: balance` to all headings (#910)
* **css:** Apply hover cursor from Details component to Details element (#948)
## Bug Fixes
-
* **assets:** Update @mozilla-protocol/assets to 5.4.0
## Migration Tips
-
+* **fonts:** Any use of `font-mozilla` mixin should be replaced with `font-mozilla-headline`. NOTE: we recommend `font-mozilla-headline` only for text over 24px (below should be `font-mozilla-text`)
* Headings are now [balanced](https://developer.mozilla.org/docs/Web/CSS/text-wrap-style#balanced_text), which can impact other wrapping rules. Make sure any changes to `h1`–`h6` rendering end up styled as expected, especially if you apply any `white-space`, `word-break` or `hyphens` customizations.
* See notes for [Protocol Assets 5.4.0](https://github.com/mozilla/protocol-assets/blob/main/CHANGELOG.md#540)
diff --git a/assets/fonts/ZillaSlab-Bold.woff b/assets/fonts/ZillaSlab-Bold.woff
deleted file mode 100644
index 4903cf9d9..000000000
Binary files a/assets/fonts/ZillaSlab-Bold.woff and /dev/null differ
diff --git a/assets/fonts/ZillaSlab-Bold.woff2 b/assets/fonts/ZillaSlab-Bold.woff2
deleted file mode 100644
index 34ef46ea3..000000000
Binary files a/assets/fonts/ZillaSlab-Bold.woff2 and /dev/null differ
diff --git a/assets/fonts/ZillaSlab-BoldItalic.woff b/assets/fonts/ZillaSlab-BoldItalic.woff
deleted file mode 100644
index 9af999402..000000000
Binary files a/assets/fonts/ZillaSlab-BoldItalic.woff and /dev/null differ
diff --git a/assets/fonts/ZillaSlab-BoldItalic.woff2 b/assets/fonts/ZillaSlab-BoldItalic.woff2
deleted file mode 100644
index fdde0ff90..000000000
Binary files a/assets/fonts/ZillaSlab-BoldItalic.woff2 and /dev/null differ
diff --git a/assets/fonts/ZillaSlab-Regular.woff b/assets/fonts/ZillaSlab-Regular.woff
deleted file mode 100644
index 145d27321..000000000
Binary files a/assets/fonts/ZillaSlab-Regular.woff and /dev/null differ
diff --git a/assets/fonts/ZillaSlab-Regular.woff2 b/assets/fonts/ZillaSlab-Regular.woff2
deleted file mode 100644
index af73bfabf..000000000
Binary files a/assets/fonts/ZillaSlab-Regular.woff2 and /dev/null differ
diff --git a/assets/fonts/ZillaSlab-RegularItalic.woff b/assets/fonts/ZillaSlab-RegularItalic.woff
deleted file mode 100644
index 1ffe71aba..000000000
Binary files a/assets/fonts/ZillaSlab-RegularItalic.woff and /dev/null differ
diff --git a/assets/fonts/ZillaSlab-RegularItalic.woff2 b/assets/fonts/ZillaSlab-RegularItalic.woff2
deleted file mode 100644
index b9002cb98..000000000
Binary files a/assets/fonts/ZillaSlab-RegularItalic.woff2 and /dev/null differ
diff --git a/assets/fonts/mozilla-headline/MozillaHeadline-Regular.woff2 b/assets/fonts/mozilla-headline/MozillaHeadline-Regular.woff2
new file mode 100644
index 000000000..387e596c4
Binary files /dev/null and b/assets/fonts/mozilla-headline/MozillaHeadline-Regular.woff2 differ
diff --git a/assets/fonts/mozilla-headline/MozillaHeadline-SemiBold.woff2 b/assets/fonts/mozilla-headline/MozillaHeadline-SemiBold.woff2
new file mode 100644
index 000000000..d2ae24dee
Binary files /dev/null and b/assets/fonts/mozilla-headline/MozillaHeadline-SemiBold.woff2 differ
diff --git a/assets/fonts/mozilla-text/MozillaText-Bold.woff2 b/assets/fonts/mozilla-text/MozillaText-Bold.woff2
new file mode 100644
index 000000000..d9576b5b7
Binary files /dev/null and b/assets/fonts/mozilla-text/MozillaText-Bold.woff2 differ
diff --git a/assets/fonts/mozilla-text/MozillaText-BoldItalic.woff2 b/assets/fonts/mozilla-text/MozillaText-BoldItalic.woff2
new file mode 100644
index 000000000..8e55af74d
Binary files /dev/null and b/assets/fonts/mozilla-text/MozillaText-BoldItalic.woff2 differ
diff --git a/assets/fonts/mozilla-text/MozillaText-Italic.woff2 b/assets/fonts/mozilla-text/MozillaText-Italic.woff2
new file mode 100644
index 000000000..a59c77e34
Binary files /dev/null and b/assets/fonts/mozilla-text/MozillaText-Italic.woff2 differ
diff --git a/assets/fonts/mozilla-text/MozillaText-Regular.woff2 b/assets/fonts/mozilla-text/MozillaText-Regular.woff2
new file mode 100644
index 000000000..713a7d4d0
Binary files /dev/null and b/assets/fonts/mozilla-text/MozillaText-Regular.woff2 differ
diff --git a/assets/fonts/mozilla-text/MozillaText-SemiBold.woff2 b/assets/fonts/mozilla-text/MozillaText-SemiBold.woff2
new file mode 100644
index 000000000..4b04c5c2f
Binary files /dev/null and b/assets/fonts/mozilla-text/MozillaText-SemiBold.woff2 differ
diff --git a/assets/fonts/mozilla-text/MozillaText-SemiBoldItalic.woff2 b/assets/fonts/mozilla-text/MozillaText-SemiBoldItalic.woff2
new file mode 100644
index 000000000..61f033b77
Binary files /dev/null and b/assets/fonts/mozilla-text/MozillaText-SemiBoldItalic.woff2 differ
diff --git a/assets/sass/protocol/base/elements/_titles.scss b/assets/sass/protocol/base/elements/_titles.scss
index d2b01ab85..3dced1a84 100644
--- a/assets/sass/protocol/base/elements/_titles.scss
+++ b/assets/sass/protocol/base/elements/_titles.scss
@@ -12,9 +12,10 @@ h3,
h4,
h5,
h6 {
+ $default-font-weight: bold;
font-family: $title-font-family;
color: $title-text-color;
- font-weight: bold;
+ font-weight: $default-font-weight;
text-wrap: balance;
margin: 0 0 0.5em;
@@ -24,6 +25,9 @@ h6 {
@supports (--css: variables) {
font-family: var(--title-font-family);
+ font-variant-ligatures: var(--title-font-ligatures);
+ font-weight: var(--title-font-weight, #{$default-font-weight});
+ letter-spacing: var(--title-letter-spacing);
color: var(--title-text-color);
.mzp-t-dark & {
diff --git a/assets/sass/protocol/includes/_themes-sass.scss b/assets/sass/protocol/includes/_themes-sass.scss
index e01034253..806c6b1c0 100644
--- a/assets/sass/protocol/includes/_themes-sass.scss
+++ b/assets/sass/protocol/includes/_themes-sass.scss
@@ -25,9 +25,9 @@ $v-grid-xl: tokens.$layout-xl;
$h-grid-xl: 80px;
// fonts
-$body-font-family: tokens.$font-stack-base;
-$button-font-family: tokens.$font-stack-base;
-$title-font-family: tokens.$font-stack-mozilla;
+$body-font-family: tokens.$font-stack-mozilla-text;
+$button-font-family: tokens.$font-stack-mozilla-text;
+$title-font-family: tokens.$font-stack-mozilla-headline;
// colors
$background-color-tertiary-inverse: tokens.$color-dark-gray-40;
@@ -105,9 +105,9 @@ $theme-fonts-firefox: (
title-font-family: tokens.$font-stack-firefox,
);
$theme-fonts-mozilla: (
- body-font-family: tokens.$font-stack-base,
- button-font-family: tokens.$font-stack-base,
- title-font-family: tokens.$font-stack-mozilla,
+ body-font-family: tokens.$font-stack-mozilla-text,
+ button-font-family: tokens.$font-stack-mozilla-text,
+ title-font-family: tokens.$font-stack-mozilla-headline,
);
// * -------------------------------------------------------------------------- */
diff --git a/assets/sass/protocol/includes/fonts/_mozilla-headline.scss b/assets/sass/protocol/includes/fonts/_mozilla-headline.scss
new file mode 100644
index 000000000..217e0f943
--- /dev/null
+++ b/assets/sass/protocol/includes/fonts/_mozilla-headline.scss
@@ -0,0 +1,32 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+@use '../config';
+
+@font-face {
+ font-display: swap;
+ font-family: 'Mozilla Headline';
+ font-style: normal;
+ font-weight: normal;
+ src:
+ url('#{config.$font-path}/mozilla-headline/MozillaHeadline-Regular.woff2') format('woff2');
+}
+
+@font-face {
+ font-display: swap;
+ font-family: 'Mozilla Headline';
+ font-style: normal;
+ font-weight: 600;
+ src:
+ url('#{config.$font-path}/mozilla-headline/MozillaHeadline-SemiBold.woff2') format('woff2');
+}
+
+@font-face {
+ font-family: headline-fallback;
+ src: local("Helvetica Neue");
+ ascent-override: 84%;
+ descent-override: 36%;
+ line-gap-override: 0%;
+ size-adjust: 98%;
+ }
diff --git a/assets/sass/protocol/includes/fonts/_mozilla-text.scss b/assets/sass/protocol/includes/fonts/_mozilla-text.scss
new file mode 100644
index 000000000..e66284d3d
--- /dev/null
+++ b/assets/sass/protocol/includes/fonts/_mozilla-text.scss
@@ -0,0 +1,68 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+@use '../config';
+
+@font-face {
+ font-display: swap;
+ font-family: 'Mozilla Text';
+ font-style: normal;
+ font-weight: normal;
+ src:
+ url('#{config.$font-path}/mozilla-text/MozillaText-Regular.woff2') format('woff2');
+}
+
+@font-face {
+ font-display: swap;
+ font-family: 'Mozilla Text';
+ font-style: normal;
+ font-weight: 600;
+ src:
+ url('#{config.$font-path}/mozilla-text/MozillaText-SemiBold.woff2') format('woff2');
+}
+
+@font-face {
+ font-display: swap;
+ font-family: 'Mozilla Text';
+ font-style: italic;
+ font-weight: 600;
+ src:
+ url('#{config.$font-path}/mozilla-text/MozillaText-SemiBoldItalic.woff2') format('woff2');
+}
+
+@font-face {
+ font-display: swap;
+ font-family: 'Mozilla Text';
+ font-style: normal;
+ font-weight: bold;
+ src:
+ url('#{config.$font-path}/mozilla-text/MozillaText-Bold.woff2') format('woff2');
+}
+
+@font-face {
+ font-display: swap;
+ font-family: 'Mozilla Text';
+ font-style: italic;
+ font-weight: normal;
+ src:
+ url('#{config.$font-path}/mozilla-text/MozillaText-Italic.woff2') format('woff2');
+}
+
+@font-face {
+ font-display: swap;
+ font-family: 'Mozilla Text';
+ font-style: italic;
+ font-weight: bold;
+ src:
+ url('#{config.$font-path}/mozilla-text/MozillaText-BoldItalic.woff2') format('woff2');
+}
+
+@font-face {
+ font-family: text-fallback;
+ src: local("Helvetica Neue");
+ ascent-override: 84%;
+ descent-override: 36%;
+ line-gap-override: 0%;
+ size-adjust: 98%;
+ }
diff --git a/assets/sass/protocol/includes/fonts/_zilla-slab.scss b/assets/sass/protocol/includes/fonts/_zilla-slab.scss
deleted file mode 100644
index 6cae565cb..000000000
--- a/assets/sass/protocol/includes/fonts/_zilla-slab.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-
-@use '../config';
-
-@font-face {
- font-display: swap;
- font-family: 'Zilla Slab';
- font-style: normal;
- font-weight: normal;
- src:
- url('#{config.$font-path}/ZillaSlab-Regular.woff2') format('woff2'),
- url('#{config.$font-path}/ZillaSlab-Regular.woff') format('woff');
-}
-
-@font-face {
- font-display: swap;
- font-family: 'Zilla Slab';
- font-style: normal;
- font-weight: bold;
- src:
- url('#{config.$font-path}/ZillaSlab-Bold.woff2') format('woff2'),
- url('#{config.$font-path}/ZillaSlab-Bold.woff') format('woff');
-}
diff --git a/assets/sass/protocol/includes/mixins/_typography.scss b/assets/sass/protocol/includes/mixins/_typography.scss
index 17c909014..662fd1598 100644
--- a/assets/sass/protocol/includes/mixins/_typography.scss
+++ b/assets/sass/protocol/includes/mixins/_typography.scss
@@ -14,8 +14,12 @@
font-family: tokens.$font-stack-base;
}
-@mixin font-mozilla {
- font-family: tokens.$font-stack-mozilla;
+@mixin font-mozilla-text {
+ font-family: tokens.$font-stack-mozilla-text;
+}
+
+@mixin font-mozilla-headline {
+ font-family: tokens.$font-stack-mozilla-headline;
}
@mixin font-firefox {
diff --git a/assets/sass/protocol/includes/themes/_mozilla.scss b/assets/sass/protocol/includes/themes/_mozilla.scss
index bc838f123..a10947a0a 100644
--- a/assets/sass/protocol/includes/themes/_mozilla.scss
+++ b/assets/sass/protocol/includes/themes/_mozilla.scss
@@ -7,9 +7,13 @@
%mozilla-theme {
// fonts
- --body-font-family: #{tokens.$font-stack-base};
- --button-font-family: #{tokens.$font-stack-base};
- --title-font-family: #{tokens.$font-stack-mozilla};
+ --body-font-family: #{tokens.$font-stack-mozilla-text};
+ --button-font-family: #{tokens.$font-stack-mozilla-text};
+ --title-font-family: #{tokens.$font-stack-mozilla-headline};
+ --title-font-ligatures: none;
+ --body-font-ligatures: none;
+ --title-font-weight: 600;
+ --title-letter-spacing: -0.01em;
// colors
--background-color-tertiary-inverse: #{tokens.$color-dark-gray-40};
@@ -37,27 +41,27 @@
%mozilla-type-scale {
// type scale
--title-2xl-size: 4.75rem;
- --title-2xl-line-height: 1;
+ --title-2xl-line-height: 1.1;
--title-xl-size: 4.125rem;
- --title-xl-line-height: 1;
+ --title-xl-line-height: 1.1;
--title-lg-size: 3.5rem;
- --title-lg-line-height: 1;
+ --title-lg-line-height: 1.1;
--title-md-size: 3rem;
- --title-md-line-height: 1;
+ --title-md-line-height: 1.1;
--title-sm-size: 2.375rem;
- --title-sm-line-height: 1.05;
+ --title-sm-line-height: 1.1;
--title-xs-size: 1.75rem;
- --title-xs-line-height: 1.07;
+ --title-xs-line-height: 1.1;
--title-2xs-size: 1.5rem;
- --title-2xs-line-height: 1.08;
+ --title-2xs-line-height: 1.1;
--title-3xs-size: 1.125rem;
- --title-3xs-line-height: 1.11;
+ --title-3xs-line-height: 1.1;
--body-xl-size: 1.313rem;
--body-lg-size: 1.125rem;
--body-md-size: 1rem;
--body-sm-size: 0.875rem;
--body-xs-size: 0.75rem;
- --body-line-height: 1.5;
+ --body-line-height: 1.2;
}
%mozilla-type-scale-condensed {
@@ -82,5 +86,5 @@
--body-md-size: 0.875rem;
--body-sm-size: 0.75rem;
--body-xs-size: 0.688rem;
- --body-line-height: 1.5;
+ --body-line-height: 1.2;
}
diff --git a/assets/sass/protocol/protocol.scss b/assets/sass/protocol/protocol.scss
index ac6c32e3c..939ae9bf0 100644
--- a/assets/sass/protocol/protocol.scss
+++ b/assets/sass/protocol/protocol.scss
@@ -8,13 +8,14 @@
// the fonts, includes, and global components you actually need.
// Individual style sheets can import additional components as needed.
-// Inter is our general-purpose font for body text in both Firefox and
-// Mozilla brands.
+// Inter is our general-purpose fallback font for body text in Mozilla brand
+// It is also general-purpose font for body text in Firefox
@use 'includes/fonts/inter';
-// Zilla Slab is used with the Mozilla brand. Remove this import if
+// Fonts exclusive to Mozilla brand. Remove these imports if
// your site uses the Firefox brand exclusively.
-@use 'includes/fonts/zilla-slab';
+@use 'includes/fonts/mozilla-text';
+@use 'includes/fonts/mozilla-headline';
// Base elements - general HTML elements
@use 'base/elements';
diff --git a/docs/01-fundamentals/02-themes.md b/docs/01-fundamentals/02-themes.md
index 83827e6f4..38f5c562e 100644
--- a/docs/01-fundamentals/02-themes.md
+++ b/docs/01-fundamentals/02-themes.md
@@ -5,7 +5,7 @@ name: Brand Themes
Protocol supports two distinct brands: Mozilla and Firefox.
-The Mozilla brand is distinguished by the Zilla Slab typeface and a limited color
+The Mozilla brand is distinguished by the Mozilla Headline and Mozilla Text typefaces and a limited color
palette, mostly black and white. The Firefox brand uses the Metropolis typeface
and is generally more colorful overall.
diff --git a/docs/01-fundamentals/03-typography.md b/docs/01-fundamentals/03-typography.md
index 1ed9d8cf1..2b35be5ec 100644
--- a/docs/01-fundamentals/03-typography.md
+++ b/docs/01-fundamentals/03-typography.md
@@ -3,10 +3,9 @@ title: Typography
---
## Typefaces
-Protocol comes with three fonts: Zilla Slab, Metropolis, and Inter.
+Protocol comes with four fonts: Mozilla Headline, Mozilla Text, Metropolis, and Inter.
-Mozilla branded websites use Zilla Slab for titles and Inter for body text. Don’t
-use Zilla Slab for body text.
+Mozilla branded websites use Mozilla Headline for titles and Mozilla Text for body text. We recommend Mozilla Headline only for text over 24px (below should be Mozilla Text).
Firefox branded websites use Metropolis for titles and Inter for body text. Don’t
use Metropolis for body text.
@@ -14,7 +13,7 @@ use Metropolis for body text.
### Inter
Inter is an open source, sans-serif font designed by [Rasmus Andersson](https://rsms.me/inter/).
-This is our standard type face for body copy in both Firefox and Mozilla brands.
+This is our standard type face for body copy in Firefox and is used as fallback font in Mozilla brands.
If you need to declare it specifically (such as to override some other inherited
font) you can use the mixin `@include font-base;`.
@@ -30,28 +29,29 @@ font) you can use the mixin `@include font-base;`.
{{ specimens.math }}
-### Zilla Slab
+### Mozilla
-Zilla Slab is our custom typeface for the Mozilla brand. We use it for our wordmark
-and as a display font for headlines on Mozilla branded sites. It’s a contemporary
-slab serif based on Typotheque’s Tesla. Zilla Slab is a free, open source font
-available for download.
+Mozilla Headline and Mozilla Text are our custom typefaces for the Mozilla brand. This typeface font family features a unique uniwidth design. It maintains standardized spacing and kerning across all weights and styles, eliminating risk of text reflow to preserve the integrity of the layout and enhance the user's experience. [Read more about Mozilla's rebrand here](https://blog.mozilla.org/en/mozilla/mozilla-brand-next-era-of-tech/)
-Zilla Slab is primarily a display font and should only be used on large text like
-headings. As a general rule, type set in Zilla Slab should stand out. Avoid
-stacking two sizes of Zilla Slab one on top of the other. Pair headings in Zilla
-Slab with subheadings in Inter.
+You can declare Mozilla Headline explicitly with the mixin `@include font-mozilla-headline;`.
-You can declare Zilla Slab explicitly with the mixin `@include font-mozilla;`.
+You can declare Mozilla Text explicitly with the mixin `@include font-mozilla-headline;`.
-Don’t italicize Zilla Slab. Protocol only includes regular and bold versions of
-this font.
+#### Mozilla Headline
-* [Download from Github](https://github.com/mozilla/zilla-slab/releases/latest)
-* [Use on Google Fonts](https://fonts.google.com/specimen/Zilla+Slab)
+
+ {{ specimens.alphabet }}
+ {{ specimens.alphabet }}
+ {{ specimens.characters }}
+ {{ specimens.digits }}
+ {{ specimens.punctuation }}
+ {{ specimens.special }}
+ {{ specimens.math }}
+
+#### Mozilla Text
-
+{{ specimens.alphabet }}
{{ specimens.alphabet }}
{{ specimens.characters }}
@@ -124,9 +124,9 @@ for main body copy.
### Themes
Protocol includes different branded themes for Mozilla and Firefox, and each theme
-uses different fonts with a slightly altered scale. Titles set in Zilla Slab for
+uses different fonts with a slightly altered scale. Titles set in Mozilla Headline for
the Mozilla brand are slightly larger than their Firefox equivalents, adjusting
-for Zilla Slab being overall a smaller display font.
+for Mozilla Headline being overall a smaller display font.
### Condensed Type Scale
diff --git a/docs/01-fundamentals/design-tokens.config.yml b/docs/01-fundamentals/design-tokens.config.yml
index 725ac6f9e..09da2ce64 100644
--- a/docs/01-fundamentals/design-tokens.config.yml
+++ b/docs/01-fundamentals/design-tokens.config.yml
@@ -48,4 +48,5 @@ context:
$font-stack-base: "Inter, X-LocaleSpecific, sans-serif"
$font-stack-firefox: "Metropolis, Inter, X-LocaleSpecific, sans-serif"
$font-stack-mono: "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace"
- $font-stack-mozilla: "'Zilla Slab', Inter, X-LocaleSpecific, sans-serif"
+ $font-stack-mozilla-text: "'Mozilla Text', Inter, 'Helvetica Neue', Arial, X-LocaleSpecific, sans-serif"
+ $font-stack-mozilla-headline: "'Mozilla Headline', Inter, 'Helvetica Neue', Arial, X-LocaleSpecific, sans-serif"
diff --git a/package-lock.json b/package-lock.json
index ba5a568a5..0deb4d339 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,7 @@
"@frctl/mandelbrot": "^1.10.3",
"@frctl/nunjucks": "^2.0.15",
"@mozilla-protocol/assets": "^5.4.0",
- "@mozilla-protocol/tokens": "^5.0.5",
+ "@mozilla-protocol/tokens": "^6.0.0",
"babel-loader": "^10.0.0",
"clean-webpack-plugin": "^4.0.0",
"copy-webpack-plugin": "^13.0.0",
@@ -2192,9 +2192,10 @@
"license": "MPL-2.0"
},
"node_modules/@mozilla-protocol/tokens": {
- "version": "5.0.5",
- "resolved": "https://registry.npmjs.org/@mozilla-protocol/tokens/-/tokens-5.0.5.tgz",
- "integrity": "sha512-VJ2fYJs09m0x1yWHVGhbqp2ZBOfEZy8vbOGYqNXCVrsYriLZp20CdKJq3+jj/chEVz+S5b0wdIOKkLqvgqIr/A=="
+ "version": "6.0.0",
+ "resolved": "https://registry.npmjs.org/@mozilla-protocol/tokens/-/tokens-6.0.0.tgz",
+ "integrity": "sha512-8ThQsB+tqz36slV7jJ1egnp6yDOMhmn2vST4HTtTk3meshHD+qZK1MFfTsWC7UtJuF9JuNVUu5icaJxJm3Wf1A==",
+ "license": "MPL-2.0"
},
"node_modules/@nodelib/fs.scandir": {
"version": "2.1.5",
diff --git a/package.json b/package.json
index 4b7723c5e..311f838db 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
"@frctl/mandelbrot": "^1.10.3",
"@frctl/nunjucks": "^2.0.15",
"@mozilla-protocol/assets": "^5.4.0",
- "@mozilla-protocol/tokens": "^5.0.5",
+ "@mozilla-protocol/tokens": "^6.0.0",
"babel-loader": "^10.0.0",
"clean-webpack-plugin": "^4.0.0",
"copy-webpack-plugin": "^13.0.0",
diff --git a/theme/assets/sass/components/_header.scss b/theme/assets/sass/components/_header.scss
index e3c4f81a0..7d59f49b2 100755
--- a/theme/assets/sass/components/_header.scss
+++ b/theme/assets/sass/components/_header.scss
@@ -17,7 +17,7 @@
.Header-title {
font-size: 1.6rem;
- font-family: $font-stack-mozilla;
+ font-family: $font-stack-mozilla-headline;
font-weight: bold;
padding-top: 0;
padding-bottom: 0;
diff --git a/theme/assets/sass/components/_type-specimen.scss b/theme/assets/sass/components/_type-specimen.scss
index a72eb4baf..dedecd2da 100644
--- a/theme/assets/sass/components/_type-specimen.scss
+++ b/theme/assets/sass/components/_type-specimen.scss
@@ -13,8 +13,12 @@
@include text-title-md;
}
-#specimen-zilla-slab {
- @include font-mozilla;
+#specimen-mozilla-headline {
+ @include font-mozilla-headline;
+}
+
+#specimen-mozilla-text {
+ @include font-mozilla-text;
}
#specimen-metropolis {
diff --git a/theme/assets/sass/theme.scss b/theme/assets/sass/theme.scss
index b81a1a01a..a9f61411b 100755
--- a/theme/assets/sass/theme.scss
+++ b/theme/assets/sass/theme.scss
@@ -6,7 +6,8 @@
@use '/assets/sass/protocol/includes/fonts/inter';
@use '/assets/sass/protocol/includes/fonts/metropolis';
-@use '/assets/sass/protocol/includes/fonts/zilla-slab';
+@use '/assets/sass/protocol/includes/fonts/mozilla-headline';
+@use '/assets/sass/protocol/includes/fonts/mozilla-text';
@use '/assets/sass/protocol/includes/themes';
// Settings