diff --git a/fonts/Fira/fira.css b/fonts/Fira/fira.css
index 6ef47b512..ec1774983 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 000000000..832aaabbb
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 000000000..9fa44b7cc
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 000000000..4c550c7d4
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 000000000..9e6690146
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 000000000..9d5db6582
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 000000000..84f272c44
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 000000000..b5b1dfebc
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 000000000..48dc9f935
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 000000000..95ebb7e6d
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 000000000..cf408094d
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 000000000..10e728784
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 000000000..6027bad83
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 000000000..b61bf0d81
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 000000000..f12daf300
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 000000000..5c0e34d6b
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 000000000..0e9b453ee
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 000000000..7a1e5fc54
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 000000000..2d08f9f7d
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 000000000..e766e06cc
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 000000000..3f63664fe
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 000000000..bafabb5a1
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 000000000..a256463b4
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 000000000..73e2d82dd
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 000000000..c8d3b364b
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 000000000..6b389c706
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 000000000..479ca9f73
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 3c28e29a6..772a8cc09 100644
--- a/images/supported-versions.php
+++ b/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;
 			}
 
diff --git a/styles/theme-base.css b/styles/theme-base.css
index a894d7df7..4158e7313 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;