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:
parent
d3e7ffa7f5
commit
f9cfe1583b
1 changed files with 3 additions and 3 deletions
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue