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; -- PHP Webmaster List Mailing List (http://www.php.net/) To unsubscribe, visit: http://www.php.net/unsub.php
