From 50d28487a8fe812b92c57f000c0d83b38a89989f Mon Sep 17 00:00:00 2001
From: Nicholas Nadeau <nicholas.nadeau@gmail.com>
Date: Fri, 25 Sep 2020 08:40:08 -0400
Subject: [PATCH] fix(fonts): added "font-display: swap;" to avoid showing
 invisible text

The easiest way to avoid showing invisible text while custom fonts load is to temporarily show a
system font. See https://web.dev/font-display/#how-to-avoid-showing-invisible-text
---
 wowchemy/assets/scss/academic/_card.scss   | 1 +
 wowchemy/assets/scss/academic/_root.scss   | 2 ++
 wowchemy/assets/scss/academic/_search.scss | 1 +
 3 files changed, 4 insertions(+)

diff --git a/wowchemy/assets/scss/academic/_card.scss b/wowchemy/assets/scss/academic/_card.scss
index 99125397c..9255ad49f 100644
--- a/wowchemy/assets/scss/academic/_card.scss
+++ b/wowchemy/assets/scss/academic/_card.scss
@@ -104,6 +104,7 @@ a.summary-link {
   opacity: 0;
   transition: all 0.2s ease-out;
   font-family: 'Font Awesome 5 Free';
+  font-display: swap;
   font-weight: 900;
   content: '\f0c1';
   text-align: center;
diff --git a/wowchemy/assets/scss/academic/_root.scss b/wowchemy/assets/scss/academic/_root.scss
index 94dfb1a2e..6c68e137f 100644
--- a/wowchemy/assets/scss/academic/_root.scss
+++ b/wowchemy/assets/scss/academic/_root.scss
@@ -566,6 +566,7 @@ div.alert > div:first-child::before {
   font-size: 1.5rem;
   color: #209cee;
   font-family: 'Font Awesome 5 Free';
+  font-display: swap;
   font-weight: 900;
   content: '\f05a';
   width: 1.5rem;
@@ -574,6 +575,7 @@ div.alert > div:first-child::before {
 
 div.alert-warning > div:first-child::before {
   font-family: 'Font Awesome 5 Free';
+  font-display: swap;
   font-weight: 900;
   color: #ff3860;
   content: '\f071';
diff --git a/wowchemy/assets/scss/academic/_search.scss b/wowchemy/assets/scss/academic/_search.scss
index 92e7074f5..b232c636f 100644
--- a/wowchemy/assets/scss/academic/_search.scss
+++ b/wowchemy/assets/scss/academic/_search.scss
@@ -78,6 +78,7 @@
 
 #search-box::before {
   font-family: 'Font Awesome 5 Free';
+  font-display: swap;
   font-weight: 900;
   content: "\f002";
   font-size: 1rem;