Skip to content

Commit d517972

Browse files
escattoneescattone
authored
Fix fonts (#7345)
* fix fonts to use MozillaHeadline & MozillaText * fix font config to use Protocol by default
1 parent 005be39 commit d517972

File tree

7 files changed

+44
-32
lines changed

7 files changed

+44
-32
lines changed

‎kitsune/sumo/static/sumo/scss/_protocol.scss‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,14 @@
1515

1616

1717
// Fonts
18-
@use 'protocol/css/includes/fonts/inter';
19-
@use 'protocol/css/includes/fonts/metropolis';
18+
@use 'protocol/css/includes/fonts/inter'; // used as fallback for locales with partial Mozilla font support
2019
@use 'protocol/css/includes/fonts/mozilla-headline';
2120
@use 'protocol/css/includes/fonts/mozilla-text';
2221

2322

23+
// Theme - defines CSS custom properties for fonts, colors, and type scale
24+
@use 'protocol/css/includes/themes';
25+
2426
// Base elements - general HTML elements
2527
@use 'protocol/css/base/elements/reset';
2628
@use 'protocol/css/base/elements/common';
@@ -63,3 +65,16 @@
6365
@use 'protocol/css/components/zap';
6466
@use 'protocol/css/templates/card-layout';
6567
@use 'protocol/css/templates/main-with-sidebar';
68+
69+
// Override Protocol components that hardcode Inter via the font-base mixin.
70+
// We use Mozilla Text for all body/UI text.
71+
.mzp-c-card .mzp-c-card-tag,
72+
.mzp-c-menu-category .mzp-c-menu-title,
73+
.mzp-c-menu h4,
74+
.mzp-c-menu h5,
75+
.mzp-c-menu h6,
76+
.mzp-c-modal-inner > header h2,
77+
.mzp-c-sidemenu-label,
78+
.mzp-c-sidemenu-title {
79+
font-family: var(--body-font-family);
80+
}

‎kitsune/sumo/static/sumo/scss/base/_typography.scss‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,9 +57,10 @@ h1, h2, h3, h4, h5, h6,
5757

5858
.has-moz-headings {
5959
color: var(--color-moz-text);
60+
font-family: var(--body-font-family);
6061

6162
h1, h2, h3, h4, h5, h6, [class*=text-display] {
62-
font-family: var(--heading-font-family-moz);
63+
font-family: var(--title-font-family);
6364
color: var(--color-moz-heading);
6465
}
6566
}
@@ -106,7 +107,7 @@ h4,
106107
}
107108

108109
h5, h6, .text-display-sm {
109-
font-family: var(--base-font-family);
110+
font-family: var(--body-font-family);
110111
@include c.text-display-sm;
111112
}
112113

‎kitsune/sumo/static/sumo/scss/base/forms/_buttons.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@
153153
background: transparent;
154154
font-weight: normal;
155155
font-size: var(--base-font-size);
156-
font-family: var(--base-font-family);
156+
font-family: var(--body-font-family);
157157
text-align: left;
158158

159159
&:hover {

‎kitsune/sumo/static/sumo/scss/components/_card.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -209,7 +209,7 @@
209209
margin-bottom: p.$spacing-md;
210210

211211
.card--title {
212-
font-family: Inter;
212+
font-family: var(--body-font-family);
213213
font-size: 16px;
214214
font-weight: 700;
215215
margin: 0;
@@ -297,7 +297,7 @@
297297
}
298298

299299
&.has-moz-headings .card--title {
300-
font-family: var(--heading-font-family-moz);
300+
font-family: var(--title-font-family);
301301
color: var(--color-moz-heading);
302302
}
303303

@@ -387,7 +387,7 @@
387387

388388
&--title {
389389
@include c.sumo-card-heading();
390-
font-family: var(--base-font-family);
390+
font-family: var(--body-font-family);
391391
margin-bottom: 0;
392392

393393
>a {

‎kitsune/sumo/static/sumo/scss/config/_project-theme.scss‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,8 @@
3434
--color-moz-text: var(--color-moz-heading);
3535
--color-moz-inverse-bg: var(--color-ink-08);
3636

37-
--base-font-family: Inter, X-LocaleSpecific, sans-serif;
3837
--base-font-size: 1rem;
39-
--heading-font-family-moz: 'Mozilla Headline', Inter, X-LocaleSpecific, serif;
40-
--heading-font-family: Metropolis, Inter, X-LocaleSpecific, sans-serif;
38+
--heading-font-family: var(--title-font-family);
4139
--heading-alt-font-family: var(--heading-font-family);
4240
--code-font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
4341

@@ -48,13 +46,11 @@
4846
--focus-shadow: 0 0 0 #{p.$spacing-xs} rgba(0, 96, 223, 0.3), 0 0 0 2px rgb(0, 138, 234);
4947
}
5048

51-
// With locales where Mozilla Headline and Metropolis have partial support, we just use Inter for everything
52-
// to avoid only some characters falling back to a different font within a word/sentence:
53-
[lang="de"], [lang="ee"], [lang="ig"], [lang="vi"], [lang="yo"] {
54-
--base-font-family: Inter, X-LocaleSpecific, sans-serif;
55-
--heading-font-family-moz: var(--base-font-family);
56-
--heading-font-family: var(--base-font-family);
57-
--heading-alt-font-family: var(--base-font-family);
49+
// With locales where Mozilla Headline and Mozilla Text have partial character support,
50+
// we use Inter for everything to avoid mixed fonts within a word/sentence:
51+
[lang="ee"], [lang="ig"], [lang="vi"], [lang="yo"] {
52+
--body-font-family: Inter, X-LocaleSpecific, sans-serif;
53+
--title-font-family: Inter, X-LocaleSpecific, sans-serif;
5854
}
5955

6056
.shade-bg {

‎kitsune/sumo/static/sumo/scss/config/_typography-mixins.scss‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ $text-display-line-height: 1.1 !default;
1111
@include c.line-height(72px);
1212
@if $family == 'no-fam' {}
1313
@else if $family == 'moz' {
14-
font-family: var(--heading-font-family-moz);
14+
font-family: var(--title-font-family);
1515
} @else {
1616
font-family: var(--heading-font-family);
1717
}
@@ -22,7 +22,7 @@ $text-display-line-height: 1.1 !default;
2222
@include c.line-height(64px);
2323
@if $family == 'no-fam' {}
2424
@else if $family == 'moz' {
25-
font-family: var(--heading-font-family-moz);
25+
font-family: var(--title-font-family);
2626
} @else {
2727
font-family: var(--heading-font-family);
2828
}
@@ -33,7 +33,7 @@ $text-display-line-height: 1.1 !default;
3333
@include c.line-height(56px);
3434
@if $family == 'no-fam' {}
3535
@else if $family == 'moz' {
36-
font-family: var(--heading-font-family-moz);
36+
font-family: var(--title-font-family);
3737
} @else {
3838
font-family: var(--heading-font-family);
3939
}
@@ -45,7 +45,7 @@ $text-display-line-height: 1.1 !default;
4545

4646
@if $family == 'no-fam' {}
4747
@else if $family == 'moz' {
48-
font-family: var(--heading-font-family-moz);
48+
font-family: var(--title-font-family);
4949
} @else {
5050
font-family: var(--heading-font-family);
5151
}
@@ -57,7 +57,7 @@ $text-display-line-height: 1.1 !default;
5757

5858
@if $family == 'no-fam' {}
5959
@else if $family == 'moz' {
60-
font-family: var(--heading-font-family-moz);
60+
font-family: var(--title-font-family);
6161
} @else {
6262
font-family: var(--heading-font-family);
6363
}
@@ -69,7 +69,7 @@ $text-display-line-height: 1.1 !default;
6969
font-weight: bold;
7070
@if $family == 'no-fam' {}
7171
@else if $family == 'moz' {
72-
font-family: var(--heading-font-family-moz);
72+
font-family: var(--title-font-family);
7373
color: var(--color-moz-heading);
7474
} @else {
7575
font-family: var(--heading-font-family);
@@ -80,15 +80,15 @@ $text-display-line-height: 1.1 !default;
8080
@mixin text-display-xxs() {
8181
@include p.font-size(18px);
8282
@include c.line-height(24px);
83-
font-family: var(--base-font-family);
83+
font-family: var(--body-font-family);
8484
color: var(--color-heading);
8585
font-weight: bold;
8686
}
8787

8888
@mixin text-display-xxxs() {
8989
@include p.font-size(16px);
9090
line-height: $text-body-line-height;
91-
font-family: var(--base-font-family);
91+
font-family: var(--body-font-family);
9292
color: var(--color-heading);
9393
font-weight: bold;
9494
}
@@ -97,31 +97,31 @@ $text-display-line-height: 1.1 !default;
9797
@mixin text-body-lg {
9898
@include p.font-size(18px);
9999
line-height: $text-body-line-height;
100-
font-family: var(--base-font-family);
100+
font-family: var(--body-font-family);
101101
}
102102

103103
@mixin text-body-md {
104104
@include p.font-size(16px);
105105
line-height: $text-body-line-height;
106-
font-family: var(--base-font-family);
106+
font-family: var(--body-font-family);
107107
}
108108

109109
@mixin text-body-sm {
110110
@include p.font-size(14px);
111111
line-height: $text-body-line-height;
112-
font-family: var(--base-font-family);
112+
font-family: var(--body-font-family);
113113
}
114114

115115
@mixin text-body-xs {
116116
@include p.font-size(12px);
117117
line-height: $text-body-line-height;
118-
font-family: var(--base-font-family);
118+
font-family: var(--body-font-family);
119119
}
120120

121121
@mixin text-body-cta {
122122
@include p.font-size(16px);
123123
line-height: $text-body-line-height;
124-
font-family: var(--base-font-family);
124+
font-family: var(--body-font-family);
125125
}
126126

127127

‎kitsune/sumo/static/sumo/scss/layout/_document.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -394,7 +394,7 @@
394394
margin-top: p.$spacing-md;
395395
padding-bottom: p.$spacing-md;
396396
margin-bottom: p.$spacing-xl;
397-
font-family: 'Inter', sans-serif;
397+
font-family: var(--body-font-family);
398398
font-size: 1rem;
399399

400400
&.has-border-bottom {

0 commit comments

Comments
 (0)