[web-php] master: Add woff2 fonts and other font related tweaks (#752)

Author: Javier Eguiluz (javiereguiluz) Committer: GitHub (web-flow) Pusher: Girgias Date: 2023-07-19T12:01:23+01:00 Commit: https://github.com/php/web-php/commit/f71b6c7396f5ccc1f5e93eac89c644734da084c5 Raw diff: https://github.com/php/web-php/commit/f71b6c7396f5ccc1f5e93eac89c644734da084c5.diff Add woff2 fonts and other font related tweaks (#752) 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. Changed paths: A fonts/Fira/woff2/FiraMono-Bold.woff2 A fonts/Fira/woff2/FiraMono-Regular.woff2 A fonts/Fira/woff2/FiraSans-Bold.woff2 A fonts/Fira/woff2/FiraSans-BoldItalic.woff2 A fonts/Fira/woff2/FiraSans-Book.woff2 A fonts/Fira/woff2/FiraSans-BookItalic.woff2 A fonts/Fira/woff2/FiraSans-Eight.woff2 A fonts/Fira/woff2/FiraSans-EightItalic.woff2 A fonts/Fira/woff2/FiraSans-Four.woff2 A fonts/Fira/woff2/FiraSans-FourItalic.woff2 A fonts/Fira/woff2/FiraSans-Hair.woff2 A fonts/Fira/woff2/FiraSans-HairItalic.woff2 A fonts/Fira/woff2/FiraSans-Heavy.woff2 A fonts/Fira/woff2/FiraSans-HeavyItalic.woff2 A fonts/Fira/woff2/FiraSans-Light.woff2 A fonts/Fira/woff2/FiraSans-LightItalic.woff2 A fonts/Fira/woff2/FiraSans-Medium.woff2 A fonts/Fira/woff2/FiraSans-MediumItalic.woff2 A fonts/Fira/woff2/FiraSans-Regular.woff2 A fonts/Fira/woff2/FiraSans-RegularItalic.woff2 A fonts/Fira/woff2/FiraSans-SemiBold.woff2 A fonts/Fira/woff2/FiraSans-SemiBoldItalic.woff2 A fonts/Fira/woff2/FiraSans-Thin.woff2 A fonts/Fira/woff2/FiraSans-ThinItalic.woff2 A fonts/Fira/woff2/FiraSans-Two.woff2 A fonts/Fira/woff2/FiraSans-TwoItalic.woff2 M fonts/Fira/fira.css M images/supported-versions.php M styles/theme-base.css Diff: diff --git a/fonts/Fira/fira.css b/fonts/Fira/fira.css index 6ef47b5120..ec17749838 100644 --- a/fonts/Fira/fira.css +++ b/fonts/Fira/fira.css @@ -3,11 +3,13 @@ src: url('/fonts/Fira/eot/FiraSans-Book.eot'); src: local('Fira Sans Book'), local('FiraSans-Book'), - url('/fonts/Fira/eot/FiraSans-Book.eot') format('embedded-opentype'), + 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{ @@ -15,11 +17,13 @@ src: url('/fonts/Fira/eot/FiraSans-BookItalic.eot'); src: local('Fira Sans Book Italic'), local('FiraSans-BookItalic'), - url('/fonts/Fira/eot/FiraSans-BookItalic.eot') format('embedded-opentype'), + 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{ @@ -27,11 +31,13 @@ src: url('/fonts/Fira/eot/FiraSans-Medium.eot'); src: local('Fira Sans Medium'), local('FiraSans-Medium'), - url('/fonts/Fira/eot/FiraSans-Medium.eot') format('embedded-opentype'), + 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{ @@ -39,11 +45,13 @@ src: url('/fonts/Fira/eot/FiraSans-MediumItalic.eot'); src: local('Fira Sans Medium Italic'), local('FiraSans-MediumItalic'), - url('/fonts/Fira/eot/FiraSans-MediumItalic.eot') format('embedded-opentype'), + 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{ @@ -51,11 +59,13 @@ src: url('/fonts/Fira/eot/FiraMono-Regular.eot'); src: local('Fira Mono'), local('FiraMono-Regular'), - url('/fonts/Fira/eot/FiraMono-Regular.eot') format('embedded-opentype'), + 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{ @@ -63,9 +73,11 @@ src: url('/fonts/Fira/eot/FiraMono-Bold.eot'); src: local('Fira Mono Bold'), local('FiraMono-Bold'), - url('/fonts/Fira/eot/FiraMono-Bold.eot') format('embedded-opentype'), + 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; } diff --git a/fonts/Fira/woff2/FiraMono-Bold.woff2 b/fonts/Fira/woff2/FiraMono-Bold.woff2 new file mode 100755 index 0000000000..832aaabbb2 Binary files /dev/null and b/fonts/Fira/woff2/FiraMono-Bold.woff2 differ diff --git a/fonts/Fira/woff2/FiraMono-Regular.woff2 b/fonts/Fira/woff2/FiraMono-Regular.woff2 new file mode 100755 index 0000000000..9fa44b7cc2 Binary files /dev/null and b/fonts/Fira/woff2/FiraMono-Regular.woff2 differ diff --git a/fonts/Fira/woff2/FiraSans-Bold.woff2 b/fonts/Fira/woff2/FiraSans-Bold.woff2 new file mode 100755 index 0000000000..4c550c7d42 Binary files /dev/null and b/fonts/Fira/woff2/FiraSans-Bold.woff2 differ diff --git a/fonts/Fira/woff2/FiraSans-BoldItalic.woff2 b/fonts/Fira/woff2/FiraSans-BoldItalic.woff2 new file mode 100755 index 0000000000..9e66901467 Binary files /dev/null and b/fonts/Fira/woff2/FiraSans-BoldItalic.woff2 differ diff --git a/fonts/Fira/woff2/FiraSans-Book.woff2 b/fonts/Fira/woff2/FiraSans-Book.woff2 new file mode 100755 index 0000000000..9d5db65829 Binary files /dev/null and b/fonts/Fira/woff2/FiraSans-Book.woff2 differ diff --git a/fonts/Fira/woff2/FiraSans-BookItalic.woff2 b/fonts/Fira/woff2/FiraSans-BookItalic.woff2 new file mode 100755 index 0000000000..84f272c44c Binary files /dev/null and b/fonts/Fira/woff2/FiraSans-BookItalic.woff2 differ diff --git a/fonts/Fira/woff2/FiraSans-Eight.woff2 b/fonts/Fira/woff2/FiraSans-Eight.woff2 new file mode 100755 index 0000000000..b5b1dfebc2 Binary files /dev/null and b/fonts/Fira/woff2/FiraSans-Eight.woff2 differ diff --git a/fonts/Fira/woff2/FiraSans-EightItalic.woff2 b/fonts/Fira/woff2/FiraSans-EightItalic.woff2 new file mode 100755 index 0000000000..48dc9f935a Binary files /dev/null and b/fonts/Fira/woff2/FiraSans-EightItalic.woff2 differ diff --git a/fonts/Fira/woff2/FiraSans-Four.woff2 b/fonts/Fira/woff2/FiraSans-Four.woff2 new file mode 100755 index 0000000000..95ebb7e6d6 Binary files /dev/null and b/fonts/Fira/woff2/FiraSans-Four.woff2 differ diff --git a/fonts/Fira/woff2/FiraSans-FourItalic.woff2 b/fonts/Fira/woff2/FiraSans-FourItalic.woff2 new file mode 100755 index 0000000000..cf408094da Binary files /dev/null and b/fonts/Fira/woff2/FiraSans-FourItalic.woff2 differ diff --git a/fonts/Fira/woff2/FiraSans-Hair.woff2 b/fonts/Fira/woff2/FiraSans-Hair.woff2 new file mode 100755 index 0000000000..10e728784b Binary files /dev/null and b/fonts/Fira/woff2/FiraSans-Hair.woff2 differ diff --git a/fonts/Fira/woff2/FiraSans-HairItalic.woff2 b/fonts/Fira/woff2/FiraSans-HairItalic.woff2 new file mode 100755 index 0000000000..6027bad83a Binary files /dev/null and b/fonts/Fira/woff2/FiraSans-HairItalic.woff2 differ diff --git a/fonts/Fira/woff2/FiraSans-Heavy.woff2 b/fonts/Fira/woff2/FiraSans-Heavy.woff2 new file mode 100755 index 0000000000..b61bf0d816 Binary files /dev/null and b/fonts/Fira/woff2/FiraSans-Heavy.woff2 differ diff --git a/fonts/Fira/woff2/FiraSans-HeavyItalic.woff2 b/fonts/Fira/woff2/FiraSans-HeavyItalic.woff2 new file mode 100755 index 0000000000..f12daf3000 Binary files /dev/null and b/fonts/Fira/woff2/FiraSans-HeavyItalic.woff2 differ diff --git a/fonts/Fira/woff2/FiraSans-Light.woff2 b/fonts/Fira/woff2/FiraSans-Light.woff2 new file mode 100755 index 0000000000..5c0e34d6bc Binary files /dev/null and b/fonts/Fira/woff2/FiraSans-Light.woff2 differ diff --git a/fonts/Fira/woff2/FiraSans-LightItalic.woff2 b/fonts/Fira/woff2/FiraSans-LightItalic.woff2 new file mode 100755 index 0000000000..0e9b453ee6 Binary files /dev/null and b/fonts/Fira/woff2/FiraSans-LightItalic.woff2 differ diff --git a/fonts/Fira/woff2/FiraSans-Medium.woff2 b/fonts/Fira/woff2/FiraSans-Medium.woff2 new file mode 100755 index 0000000000..7a1e5fc548 Binary files /dev/null and b/fonts/Fira/woff2/FiraSans-Medium.woff2 differ diff --git a/fonts/Fira/woff2/FiraSans-MediumItalic.woff2 b/fonts/Fira/woff2/FiraSans-MediumItalic.woff2 new file mode 100755 index 0000000000..2d08f9f7d4 Binary files /dev/null and b/fonts/Fira/woff2/FiraSans-MediumItalic.woff2 differ diff --git a/fonts/Fira/woff2/FiraSans-Regular.woff2 b/fonts/Fira/woff2/FiraSans-Regular.woff2 new file mode 100755 index 0000000000..e766e06ccb Binary files /dev/null and b/fonts/Fira/woff2/FiraSans-Regular.woff2 differ diff --git a/fonts/Fira/woff2/FiraSans-RegularItalic.woff2 b/fonts/Fira/woff2/FiraSans-RegularItalic.woff2 new file mode 100755 index 0000000000..3f63664fee Binary files /dev/null and b/fonts/Fira/woff2/FiraSans-RegularItalic.woff2 differ diff --git a/fonts/Fira/woff2/FiraSans-SemiBold.woff2 b/fonts/Fira/woff2/FiraSans-SemiBold.woff2 new file mode 100755 index 0000000000..bafabb5a18 Binary files /dev/null and b/fonts/Fira/woff2/FiraSans-SemiBold.woff2 differ diff --git a/fonts/Fira/woff2/FiraSans-SemiBoldItalic.woff2 b/fonts/Fira/woff2/FiraSans-SemiBoldItalic.woff2 new file mode 100755 index 0000000000..a256463b49 Binary files /dev/null and b/fonts/Fira/woff2/FiraSans-SemiBoldItalic.woff2 differ diff --git a/fonts/Fira/woff2/FiraSans-Thin.woff2 b/fonts/Fira/woff2/FiraSans-Thin.woff2 new file mode 100755 index 0000000000..73e2d82dda Binary files /dev/null and b/fonts/Fira/woff2/FiraSans-Thin.woff2 differ diff --git a/fonts/Fira/woff2/FiraSans-ThinItalic.woff2 b/fonts/Fira/woff2/FiraSans-ThinItalic.woff2 new file mode 100755 index 0000000000..c8d3b364b7 Binary files /dev/null and b/fonts/Fira/woff2/FiraSans-ThinItalic.woff2 differ diff --git a/fonts/Fira/woff2/FiraSans-Two.woff2 b/fonts/Fira/woff2/FiraSans-Two.woff2 new file mode 100755 index 0000000000..6b389c706a Binary files /dev/null and b/fonts/Fira/woff2/FiraSans-Two.woff2 differ diff --git a/fonts/Fira/woff2/FiraSans-TwoItalic.woff2 b/fonts/Fira/woff2/FiraSans-TwoItalic.woff2 new file mode 100755 index 0000000000..479ca9f739 Binary files /dev/null and b/fonts/Fira/woff2/FiraSans-TwoItalic.woff2 differ diff --git a/images/supported-versions.php b/images/supported-versions.php index 3c28e29a61..772a8cc091 100644 --- a/images/supported-versions.php +++ b/images/supported-versions.php @@ -67,7 +67,7 @@ function date_horiz_coord(DateTime $date) { text { fill: #333; - font-family: "Fira Sans", "Source Sans Pro", Helvetica, Arial, sans-serif; + font-family: var(--font-family-sans-serif); font-size: <?php echo (2 / 3) * $header_height; ?>px; } diff --git a/styles/theme-base.css b/styles/theme-base.css index a894d7df7b..4158e73134 100644 --- a/styles/theme-base.css +++ b/styles/theme-base.css @@ -10,6 +10,8 @@ */ :root { + --font-family-sans-serif: "Fira Sans", "Source Sans Pro", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --font-family-mono: "Fira Mono", "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --dark-grey-color: #333; --dark-blue-color: #4F5B93; --medium-blue-color: #7A86B8; @@ -295,14 +297,14 @@ textarea { } body, input, textarea { - font-family: "Fira Sans", "Source Sans Pro", Helvetica, Arial, sans-serif; + font-family: var(--font-family-sans-serif); font-weight: 400; } code, pre.info, .docs .classsynopsis, .docs .classsynopsis code { - font: normal 0.875rem/1.5rem "Fira Mono", "Source Code Pro", monospace; + font: normal 0.875rem/1.5rem var(--font-family-mono); overflow-x: auto; } p code, @@ -745,7 +747,7 @@ table.standard th.subr { #layout .cse .gsc-control-cse, #layout .gsc-control-cse, #layout .gsc-control-cse .gsc-table-result { - font-family: "Fira Sans", "Source Sans Pro", Helvetica, Arial, sans-serif; + font-family: var(--font-family-sans-serif); font-size: 1rem; margin: 0; padding: 0; @@ -1157,11 +1159,11 @@ fieldset { } .content-box .md5sum:before { content: "md5: "; - font-family: "Fira Sans", "Source Sans Pro", Helvetica, Arial, sans-serif; + font-family: var(--font-family-sans-serif); } .content-box .sha256:before { content: "sha256: "; - font-family: "Fira Sans", "Source Sans Pro", Helvetica, Arial, sans-serif; + font-family: var(--font-family-sans-serif); } .content-box .releasedate { float: right;