mirror of
https://github.com/php/web-php.git
synced 2026-03-23 23:02:13 +01:00
f71b6c7396
The following changes are made in this commit: **(1)** Add the WOFF2 variant of web fonts. [WOFF2 standard](https://w3c.github.io/woff/woff2/) reduces the file sizes significantly. This is important to make our website more accessible to folks with limited Internet connections. 96% of browsers support WOFF2 ([source](https://caniuse.com/?search=woff2)) and we still have WOFF and TTF/OTF/EOT formats for those edge-cases which don't support it. Real examples of the file size reductions for php.net: ``` Fira Sans Regular: 183 KB (woff) -> 129 KB (woff2) --> 30% reduction in size Fira Mono Regular: 87 KB (woff) -> 65 KB (woff2) --> 35% reduction in size ``` **(2)** Use `font-display: swap` for web fonts (see [MDN Docs for font-display](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display)) This is recommended to not block the rendering the page for a long time if the web font is not available. Again, this is important for folks with suboptimal network connections. The `swap` value is also the default option in popular font services like [Google Fonts](https://fonts.google.com/). **(3)** Update the list of alternative font families. I updated the sans-serif and mono font stack used in the design. The new stacks are much longer (not a problem in practice thanks to CSS variables) but they cover all common browsing devices (including smartphones). I crafted the list from the recommended font stacks of the most popular CSS frameworks and the most popular websites for developers.
84 lines
3.2 KiB
CSS
84 lines
3.2 KiB
CSS
@font-face{
|
|
font-family: 'Fira Sans';
|
|
src: url('/fonts/Fira/eot/FiraSans-Book.eot');
|
|
src: local('Fira Sans Book'),
|
|
local('FiraSans-Book'),
|
|
url('/fonts/Fira/woff2/FiraSans-Book.woff2') format('woff2'),
|
|
url('/fonts/Fira/woff/FiraSans-Book.woff') format('woff'),
|
|
url('/fonts/Fira/eot/FiraSans-Book.eot') format('embedded-opentype'),
|
|
url('/fonts/Fira/ttf/FiraSans-Book.ttf') format('truetype');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face{
|
|
font-family: 'Fira Sans';
|
|
src: url('/fonts/Fira/eot/FiraSans-BookItalic.eot');
|
|
src: local('Fira Sans Book Italic'),
|
|
local('FiraSans-BookItalic'),
|
|
url('/fonts/Fira/woff2/FiraSans-BookItalic.woff2') format('woff2'),
|
|
url('/fonts/Fira/woff/FiraSans-BookItalic.woff') format('woff'),
|
|
url('/fonts/Fira/eot/FiraSans-BookItalic.eot') format('embedded-opentype'),
|
|
url('/fonts/Fira/ttf/FiraSans-BookItalic.ttf') format('truetype');
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face{
|
|
font-family: 'Fira Sans';
|
|
src: url('/fonts/Fira/eot/FiraSans-Medium.eot');
|
|
src: local('Fira Sans Medium'),
|
|
local('FiraSans-Medium'),
|
|
url('/fonts/Fira/woff2/FiraSans-Medium.woff2') format('woff2'),
|
|
url('/fonts/Fira/woff/FiraSans-Medium.woff') format('woff'),
|
|
url('/fonts/Fira/eot/FiraSans-Medium.eot') format('embedded-opentype'),
|
|
url('/fonts/Fira/ttf/FiraSans-Medium.ttf') format('truetype');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face{
|
|
font-family: 'Fira Sans';
|
|
src: url('/fonts/Fira/eot/FiraSans-MediumItalic.eot');
|
|
src: local('Fira Sans Medium Italic'),
|
|
local('FiraSans-MediumItalic'),
|
|
url('/fonts/Fira/woff2/FiraSans-MediumItalic.woff2') format('woff2'),
|
|
url('/fonts/Fira/woff/FiraSans-MediumItalic.woff') format('woff'),
|
|
url('/fonts/Fira/eot/FiraSans-MediumItalic.eot') format('embedded-opentype'),
|
|
url('/fonts/Fira/ttf/FiraSans-MediumItalic.ttf') format('truetype');
|
|
font-weight: 500;
|
|
font-style: italic;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face{
|
|
font-family: 'Fira Mono';
|
|
src: url('/fonts/Fira/eot/FiraMono-Regular.eot');
|
|
src: local('Fira Mono'),
|
|
local('FiraMono-Regular'),
|
|
url('/fonts/Fira/woff2/FiraMono-Regular.woff2') format('woff2'),
|
|
url('/fonts/Fira/woff/FiraMono-Regular.woff') format('woff'),
|
|
url('/fonts/Fira/eot/FiraMono-Regular.eot') format('embedded-opentype'),
|
|
url('/fonts/Fira/ttf/FiraMono-Regular.ttf') format('truetype');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face{
|
|
font-family: 'Fira Mono';
|
|
src: url('/fonts/Fira/eot/FiraMono-Bold.eot');
|
|
src: local('Fira Mono Bold'),
|
|
local('FiraMono-Bold'),
|
|
url('/fonts/Fira/woff2/FiraMono-Bold.woff2') format('woff2'),
|
|
url('/fonts/Fira/woff/FiraMono-Bold.woff') format('woff'),
|
|
url('/fonts/Fira/eot/FiraMono-Bold.eot') format('embedded-opentype'),
|
|
url('/fonts/Fira/ttf/FiraMono-Bold.ttf') format('truetype');
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|