From e08ed1ef809caa3a6c27cdaeb7d715776fadc1da Mon Sep 17 00:00:00 2001
From: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Date: Thu, 17 Oct 2019 12:18:54 +0200
Subject: [PATCH] feat: preload common fonts (#37349)

Without this, fonts either do not render initially or a fallback is
rendered briefly.
---
 client/src/components/layouts/Default.js | 52 ++++++++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/client/src/components/layouts/Default.js b/client/src/components/layouts/Default.js
index dec5db3a52a..472acefa607 100644
--- a/client/src/components/layouts/Default.js
+++ b/client/src/components/layouts/Default.js
@@ -23,6 +23,16 @@ import OfflineWarning from '../OfflineWarning';
 import Flash from '../Flash';
 import Header from '../Header';
 import Footer from '../Footer';
+// preload common fonts
+import latoLightURL from '../../../static/fonts/lato/Lato-Light.woff';
+import latoRegularURL from '../../../static/fonts/lato/Lato-Regular.woff';
+import latoBoldURL from '../../../static/fonts/lato/Lato-Bold.woff';
+// eslint-disable-next-line max-len
+import robotoRegularURL from '../../../static/fonts/roboto-mono/RobotoMono-Regular.woff';
+// eslint-disable-next-line max-len
+import robotoBoldURL from '../../../static/fonts/roboto-mono/RobotoMono-Bold.woff';
+// eslint-disable-next-line max-len
+import robotoItalicURL from '../../../static/fonts/roboto-mono/RobotoMono-Italic.woff';
 
 import './fonts.css';
 import './global.css';
@@ -152,6 +162,48 @@ class DefaultLayout extends Component {
             { name: 'keywords', content: metaKeywords.join(', ') }
           ]}
         >
+          <link
+            as='font'
+            crossOrigin='anonymous'
+            href={latoRegularURL}
+            rel='preload'
+            type='font/woff'
+          />
+          <link
+            as='font'
+            crossOrigin='anonymous'
+            href={latoLightURL}
+            rel='preload'
+            type='font/woff'
+          />
+          <link
+            as='font'
+            crossOrigin='anonymous'
+            href={latoBoldURL}
+            rel='preload'
+            type='font/woff'
+          />
+          <link
+            as='font'
+            crossOrigin='anonymous'
+            href={robotoRegularURL}
+            rel='preload'
+            type='font/woff'
+          />
+          <link
+            as='font'
+            crossOrigin='anonymous'
+            href={robotoBoldURL}
+            rel='preload'
+            type='font/woff'
+          />
+          <link
+            as='font'
+            crossOrigin='anonymous'
+            href={robotoItalicURL}
+            rel='preload'
+            type='font/woff'
+          />
           <style>{fontawesome.dom.css()}</style>
         </Helmet>
         <WithInstantSearch>