fix: load font files using "font-display: swap" (resolves #283) (#287)

* fix: use "font-display: swap" * fix: remove quotes of non-existent font files * fix: fix a typo
inclusive-design · Jun 15, 2020 · 4a431a2 · 4a431a2
1 parent b2977c3
commit 4a431a2
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 26 deletions.
diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk
@@ -12,21 +12,6 @@
 		<link rel="preload" href="/lib/infusion/dist/infusion-uio.min.js" as="script">
 		{% block headerScripts %}{% endblock %}
 
-		<!-- Fonts -->
-		<link rel="preload" href="/fonts/fira-sans-v10-latin-regular.woff2" as="font" type="font/woff2" crossorigin />
-		<link rel="preload" href="/fonts/fira-sans-v10-latin-italic.woff2" as="font" type="font/woff2" crossorigin />
-		<link rel="preload" href="/fonts/fira-sans-v10-latin-500.woff2" as="font" type="font/woff2" crossorigin />
-		<link rel="preload" href="/fonts/fira-sans-v10-latin-600.woff2" as="font" type="font/woff2" crossorigin />
-		<link rel="preload" href="/fonts/fira-sans-v10-latin-700.woff2" as="font" type="font/woff2" crossorigin />
-		<link rel="preload" href="/fonts/roboto-v20-latin-regular.woff2" as="font" type="font/woff2" crossorigin />
-
-		<link rel="preload" href="/fonts/fira-sans-v10-latin-regular.woff" as="font" type="font/woff" crossorigin />
-		<link rel="preload" href="/fonts/fira-sans-v10-latin-italic.woff" as="font" type="font/woff" crossorigin />
-		<link rel="preload" href="/fonts/fira-sans-v10-latin-500.woff" as="font" type="font/woff" crossorigin />
-		<link rel="preload" href="/fonts/fira-sans-v10-latin-600.woff" as="font" type="font/woff" crossorigin />
-		<link rel="preload" href="/fonts/fira-sans-v10-latin-700.woff" as="font" type="font/woff" crossorigin />
-		<link rel="preload" href="/fonts/roboto-v20-latin-regular.woff" as="font" type="font/woff" crossorigin />
-
 		<!-- CSS files for UI Options-->
 		<link rel="stylesheet" type="text/css" href="/lib/infusion/dist/assets/src/framework/preferences/css/Enactors.css"/>
 		<link rel="stylesheet" type="text/css" href="/lib/infusion/dist/assets/src/framework/preferences/css/PrefsEditor.css"/>

diff --git a/src/scss/base/_fonts.scss b/src/scss/base/_fonts.scss
@@ -1,5 +1,5 @@
 @font-face {
-	font-display: optional;
+	font-display: swap;
 	font-family: 'Fira Sans';
 	font-style: normal;
 	font-weight: 400;
@@ -11,7 +11,7 @@
 }
 
 @font-face {
-	font-display: optional;
+	font-display: swap;
 	font-family: 'Fira Sans';
 	font-style: italic;
 	font-weight: 400;
@@ -23,7 +23,7 @@
 }
 
 @font-face {
-	font-display: optional;
+	font-display: swap;
 	font-family: 'Fira Sans';
 	font-style: normal;
 	font-weight: 500;
@@ -35,7 +35,7 @@
 }
 
 @font-face {
-	font-display: optional;
+	font-display: swap;
 	font-family: 'Fira Sans';
 	font-style: normal;
 	font-weight: 600;
@@ -47,7 +47,7 @@
 }
 
 @font-face {
-	font-display: optional;
+	font-display: swap;
 	font-family: 'Fira Sans';
 	font-style: normal;
 	font-weight: 700;
@@ -59,17 +59,13 @@
 }
 
 @font-face {
-	font-display: optional;
+	font-display: swap;
 	font-family: 'Roboto';
 	font-style: normal;
 	font-weight: 400;
-	src: url('../fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
 	src:
 		local('Roboto'),
 		local('Roboto-Regular'),
-		url('../fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
 		url('../fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
-		url('../fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
-		url('../fonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-		url('../fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
+		url('../fonts/roboto-v20-latin-regular.woff') format('woff'); /* Modern Browsers */
 }