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.

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;
 }

images/supported-versions.php

@@ -67,7 +67,7 @@ $height = $header_height + $footer_height + (count($branches) * $branch_height);
 
 			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;
 			}
 

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;