1
Fork 0

Use Arial as fallback font instead of sans-serif.

On most platforms and browsers, `sans-serif` is equivalent to Arial.
However, on Firefox on Ubuntu (and possibly other Linuxes), `sans-serif`
is DejaVu Sans, a much wider font. This creates a larger shift in text
when the custom fonts finally load. Arial is a web-safe font, and
specifying it explicitly gives us more cross-platform consistency, as
well as reducing the layout shift that happens when fonts load.
This commit is contained in:
Jacob Hoffman-Andrews 2021-03-02 18:27:34 -08:00
parent d3e7ffa7f5
commit f9cfe1583b

View file

@ -136,7 +136,7 @@ h1, h2, h3, h4,
#source-sidebar, #sidebar-toggle,
/* This selector is for the items listed in the "all items" page. */
#main > ul.docblock > li > a {
font-family: "Fira Sans", sans-serif;
font-family: "Fira Sans", Arial;
}
.content ul.crate a.crate {
@ -482,7 +482,7 @@ h4 > code, h3 > code, .invisible > code {
}
#main > .since {
top: inherit;
font-family: "Fira Sans", sans-serif;
font-family: "Fira Sans", Arial;
}
.content table:not(.table-display) {
@ -1301,7 +1301,7 @@ h4 > .notable-traits {
.help-button {
right: 30px;
font-family: "Fira Sans",sans-serif;
font-family: "Fira Sans", Arial;
text-align: center;
font-size: 17px;
}