Skip to content
This repository has been archived by the owner on Aug 26, 2022. It is now read-only.

Bug 1490392: Reduce web font usage #4967

Merged
merged 10 commits into from
Sep 13, 2018
Merged

Bug 1490392: Reduce web font usage #4967

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
98da502
Removing Open Sans from Gaia demos
tkadlec Sep 10, 2018
f27897f
Fixing linting issue on mixins
tkadlec Sep 10, 2018
93b0a33
removing open sans from maintenance page
tkadlec Sep 10, 2018
707630c
Tweaking styles now that Verdana is in place to minimize differences
tkadlec Sep 11, 2018
8296a6c
Preload zilla bold
tkadlec Sep 11, 2018
6ce4f62
Removing actual font files
tkadlec Sep 11, 2018
ddae2bc
Using a variable in the breakpoints
tkadlec Sep 12, 2018
5157838
Using rems for letter-spacing
tkadlec Sep 12, 2018
5c05188
Using body-font-size in document
tkadlec Sep 13, 2018
7c96947
Font smoothing
tkadlec Sep 13, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions jinja2/includes/preload.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
{# because this is non-blocking, preload as early as possible #}
<link rel="preload" href="{{ static('fonts/locales/ZillaSlab-Regular.woff2') }}" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="{{ static('fonts/locales/ZillaSlab-Bold.woff2') }}" as="font" type="font/woff2" crossorigin />
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm sneaking another preload in here now that we have it down to just the two web fonts. Helps a bit with rendering (about 35% reduction over not preloading for the home page which doesn't have much render work to begin with, but only about 5% reduction over no preload on an interactive example page), but mostly ensures the web fonts are available right away.

Binary file removed kuma/static/fonts/OpenSans-Bold-webfont.woff
View file
Open in desktop
Binary file not shown.
Binary file removed kuma/static/fonts/OpenSans-Bold-webfont.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed kuma/static/fonts/OpenSans-BoldItalic-webfont.woff
View file
Open in desktop
Binary file not shown.
Binary file removed kuma/static/fonts/OpenSans-BoldItalic-webfont.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed kuma/static/fonts/OpenSans-Italic-webfont.woff
View file
Open in desktop
Binary file not shown.
Binary file removed kuma/static/fonts/OpenSans-Italic-webfont.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed kuma/static/fonts/OpenSans-Light-webfont.woff
View file
Open in desktop
Binary file not shown.
Binary file removed kuma/static/fonts/OpenSans-Light-webfont.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed kuma/static/fonts/OpenSans-LightItalic-webfont.woff
View file
Open in desktop
Binary file not shown.
Binary file removed kuma/static/fonts/OpenSans-LightItalic-webfont.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed kuma/static/fonts/OpenSans-Regular-webfont.woff
View file
Open in desktop
Binary file not shown.
Binary file removed kuma/static/fonts/OpenSans-Regular-webfont.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed kuma/static/fonts/OpenSans-Semibold-webfont.woff
View file
Open in desktop
Binary file not shown.
Binary file removed kuma/static/fonts/OpenSans-Semibold-webfont.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed kuma/static/fonts/OpenSans-SemiboldItalic-webfont.woff
View file
Open in desktop
Binary file not shown.
Binary file removed kuma/static/fonts/OpenSans-SemiboldItalic-webfont.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed kuma/static/fonts/locales/ZillaSlab-BoldItalic.woff
View file
Open in desktop
Binary file not shown.
Binary file removed kuma/static/fonts/locales/ZillaSlab-BoldItalic.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed kuma/static/fonts/locales/ZillaSlab-Italic.woff
View file
Open in desktop
Binary file not shown.
Binary file removed kuma/static/fonts/locales/ZillaSlab-Italic.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed kuma/static/fonts/locales/ZillaSlab-Light.woff
View file
Open in desktop
Binary file not shown.
Binary file removed kuma/static/fonts/locales/ZillaSlab-Light.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed kuma/static/fonts/locales/ZillaSlab-LightItalic.woff
View file
Open in desktop
Binary file not shown.
Binary file removed kuma/static/fonts/locales/ZillaSlab-LightItalic.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed kuma/static/fonts/locales/ZillaSlab-Medium.woff
View file
Open in desktop
Binary file not shown.
Binary file removed kuma/static/fonts/locales/ZillaSlab-Medium.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed kuma/static/fonts/locales/ZillaSlab-MediumItalic.woff
View file
Open in desktop
Binary file not shown.
Binary file removed kuma/static/fonts/locales/ZillaSlab-MediumItalic.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed kuma/static/fonts/locales/ZillaSlab-RegularItalic.woff
View file
Open in desktop
Binary file not shown.
Binary file removed kuma/static/fonts/locales/ZillaSlab-RegularItalic.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed kuma/static/fonts/locales/ZillaSlab-SemiBold.woff
View file
Open in desktop
Binary file not shown.
Binary file removed kuma/static/fonts/locales/ZillaSlab-SemiBold.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed kuma/static/fonts/locales/ZillaSlab-SemiBoldItalic.woff
View file
Open in desktop
Binary file not shown.
Binary file removed kuma/static/fonts/locales/ZillaSlab-SemiBoldItalic.woff2
View file
Open in desktop
Binary file not shown.
3 changes: 2 additions & 1 deletion kuma/static/styles/base/elements/document.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ html {
}

body {
line-height: 1.5;
line-height: 1.6;
@include set-site-font-family();
@include set-font-size(15px);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't normally like to reduce the font size below 16px, but Verdana is big. Playing with https://meowni.ca/font-style-matcher/ shows that 15px (with some tiny tweaks like the line-height and some letter-spacing) is nearly identical to 16px Open Sans.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can use $body-font-size here now.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

}
2 changes: 1 addition & 1 deletion kuma/static/styles/base/elements/forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ textarea {
background: $form-background-color;
border: $form-border-width solid $form-border-color;
padding: $content-vertical-spacing $content-horizontal-spacing;
font-weight: bold;
font-weight: normal;

@include set-placeholder-style(color, $placeholder-text);
}
Expand Down
1 change: 0 additions & 1 deletion kuma/static/styles/components/wiki/toc.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,6 @@ $padding-horizontal: 30px;
color: $accent-light;
display: inline-block;
@include set-font-size(17px);
font-weight: bold;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Verdana's bold is heavier than Open Sans. I pulled the bold here (and a couple other spots) to minimize the difference.

letter-spacing: .02em;
@include bidi(((padding, $padding-vertical $padding-horizontal $padding-vertical 0, $padding-vertical 0 $padding-vertical $padding-horizontal),));
white-space: nowrap;
Expand Down
1 change: 0 additions & 1 deletion kuma/static/styles/gaia.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,3 @@ Fonts for Gaia demos
********************************************************************** */

@import 'base/fonts/moztt';
@import 'base/fonts/opensans';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is Gaia? I'll search repository history, and ask the writers.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From what I know, Gaia was the codename for the front-end codebase of Firefox-OS

Copy link
Contributor

@jwhitlock jwhitlock Sep 11, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@schalkneethling is right: https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/Platform/Gaia

A lot of this was added in 2013, like bug 844531, to support documentation and samples. There's a few samples in the archive, like https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/Firefox_OS_apps/Building_blocks/Slider/2.0. That one has been converted to use external assets, hosted on GitHub.

Removing these may break some samples, but keeping those samples working is a low priority. Future work, including some research to see what will break.

Update: opened https://bugzilla.mozilla.org/show_bug.cgi?id=1490411, looks safe to remove Gaia stuff.

3 changes: 2 additions & 1 deletion kuma/static/styles/includes/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ Provides main mixins for use within the MDN theme.

@mixin set-site-font-family() {
font-family: $site-font-family;
letter-spacing: -.05px;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: Prefer rem units over px for typography

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should be set here.

}


Expand Down Expand Up @@ -485,7 +486,7 @@ These are not dynamic but serve as mixins

@mixin callout() {
@include restrict-line-length();
@include set-font-size(20px);
@include set-font-size(19px);
border: $section-border-width solid $accent-light;
border-width: $section-border-width 0;
padding: $grid-spacing 0;
Expand Down
16 changes: 8 additions & 8 deletions kuma/static/styles/includes/_vars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ $error: #900;
typography
====================================================================== */
$site-font-family-fallback: arial, x-locale-body, sans-serif;
$site-font-family: 'Open Sans', $site-font-family-fallback;
$site-font-family: 'Verdana', $site-font-family-fallback;
$heading-font-family-fallback: 'Palatino', 'Palatino Linotype', x-locale-heading-secondary, serif;
$heading-font-family: x-locale-heading-primary, zillaslab, $heading-font-family-fallback;
$heading-line-height: 1.2;
Expand Down Expand Up @@ -177,18 +177,18 @@ break points
- divide pixels by browser default font size (16px)
- and multiply by 1em to convert unit to em.
*/
$max-width-default: (1399px / 16px) * 1em;
$small-desktop-ends: (1199px / 16px) * 1em;
$tablet-ends: (1023px / 16px) * 1em;
$mobile-ends: (767px / 16px) * 1em;
$small-mobile-ends: (479px / 16px) * 1em;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was necessary to keep the same general width of our content. I tested the layout using devtools and we seem ok with the minor adjustments to our breakpoints.

$max-width-default: (1399px / 15px) * 1em;
$small-desktop-ends: (1199px / 15px) * 1em;
$tablet-ends: (1023px / 15px) * 1em;
$mobile-ends: (767px / 15px) * 1em;
$small-mobile-ends: (479px / 15px) * 1em;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: Is it possible to move 15px into a SCSS variable? This change from 16px to 15px would have been a one-line change...

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed. It is dividing by the base body font size. I would suggest updating the variable here https://github.com/mozilla/kuma/blob/master/kuma/static/styles/includes/_vars.scss#L132 to be 15px and then use the variable for consistency.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All set!


$small-desktop-starts: $tablet-ends + .001em;
$tablet-starts: $mobile-ends + .001em;
$mobile-starts: $small-mobile-ends + .001em;

$navigation-break-ends: (1100px / 16px) * 1em;
$navigation-block-ends: (850px / 16px) * 1em;
$navigation-break-ends: (1100px / 15px) * 1em;
$navigation-block-ends: (850px / 15px) * 1em;

$navigation-break-starts: $navigation-block-ends + .001em;

Expand Down
9 changes: 0 additions & 9 deletions kuma/static/styles/locales/_zilla.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,3 @@
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: zillaslab;
font-display: 'fallback';
src: url('#{$path-to-locale-fonts}#{"ZillaSlab-Italic.woff2"}') format('woff2'),
url('#{$path-to-locale-fonts}#{"ZillaSlab-Italic.woff"}') format('woff');
font-weight: normal;
font-style: italic;
}
2 changes: 0 additions & 2 deletions kuma/static/styles/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@
Main stylesheet for the site, standalone
********************************************************************** */

@import 'base/fonts/opensans';

/* stylesheets used only in main */
@import 'base/elements';
@import 'base/icons';
Expand Down
2 changes: 1 addition & 1 deletion media/gaia/shared/style_unstable/progress_activity/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@

h2.bb-docs {
font-size: 1.8rem;
font-family: "Open Sans", Sans-serif;
font-family: "Verdana", Sans-serif;
font-weight: lighter;
color: #666;
margin: 10px 0;
Expand Down
2 changes: 1 addition & 1 deletion media/gaia/shared/style_unstable/seekbars.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ div[role="slider"] progress::-moz-progress-bar {
div[role="slider"] > label {
font-size: 1.5rem;
line-height: 3.5rem;
font-family: "Open Sans", Sans-serif;
font-family: "Verdana", Sans-serif;
color: #00aacb;
float: right;
padding: 0 0 0 1rem;
Expand Down
2 changes: 1 addition & 1 deletion media/gaia/shared/style_unstable/seekbars/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@

h2.bb-docs {
font-size: 1.8rem;
font-family: "Open Sans", Sans-serif;
font-family: "Verdana", Sans-serif;
font-weight: lighter;
color: #666;
margin: -1px 0 0;
Expand Down
4 changes: 2 additions & 2 deletions media/gaia/shared/style_unstable/tabs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
position: absolute;
width: 100%;
height: 100%;
font-family: "Open Sans", Sans-serif;
font-family: "Verdana", Sans-serif;
}

[role="tablist"] > [role="tab"] {
Expand Down Expand Up @@ -163,7 +163,7 @@
text-overflow: ellipsis;
white-space: nowrap;
background-color: transparent;
font: bold 1.4rem/1em "Open Sans", Sans-serif;
font: bold 1.4rem/1em "Verdana", Sans-serif;
width: auto;
float: none;
}
Expand Down
2 changes: 1 addition & 1 deletion media/gaia/shared/style_unstable/tabs/filters.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@

h2.bb-docs {
font-size: 1.8rem;
font-family: "Open Sans", Sans-serif;
font-family: "Verdana", Sans-serif;
font-weight: lighter;
color: #666;
margin: -1px 0 0;
Expand Down
2 changes: 1 addition & 1 deletion media/gaia/shared/style_unstable/tabs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@

h2.bb-docs {
font-size: 1.8rem;
font-family: "Open Sans", Sans-serif;
font-family: "Verdana", Sans-serif;
font-weight: lighter;
color: #666;
margin: -1px 0 0;
Expand Down
13 changes: 1 addition & 12 deletions media/maintenance/css/maintenance.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,11 @@
@font-face {
font-family: 'Open Sans';
src: url('/media/maintenance/fonts/OpenSans-Regular-webfont.eot');
src: url('/media/maintenance/fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/media/maintenance/fonts/OpenSans-Regular-webfont.woff') format('woff'),
url('/media/maintenance/fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
url('/media/maintenance/fonts/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}

html {
background: #fff;
font-size: 14px;
}

body {
color: #4d4e53;
font-family: 'Open Sans', sans-serif;
font-family: 'Verdana', sans-serif;
line-height: 1.5;
margin: 0;
}
Expand Down