[web-php] PR #752: Add woff2 fonts and other font related tweaks
| From: | javiereguiluz | Date: | Sat, 28 Jan 2023 09:08:58 +0000 |
| Subject: | [web-php] PR #752: Add woff2 fonts and other font related tweaks | ||
| Groups: | php.webmaster | ||
| Request: | Send a blank email to php-webmaster+get-30752@lists.php.net to get a copy of this message | ||
Pull Request: https://github.com/php/web-php/pull/752
Author: javiereguiluz
This Pull Request proposes 3 changes related to fonts:
**(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.