From f261d6f2fc4db158aa2bcaa01041d2f70c286aca Mon Sep 17 00:00:00 2001
From: Christopher Chedeau <vjeuxx@gmail.com>
Date: Sat, 1 Feb 2020 04:06:03 +0000
Subject: [PATCH] Fix font preloading (#649)

Thanks to this stack overflow answer ( https://stackoverflow.com/a/41678350/232122 ) I was able to fix the font preloading!

If we put fonts.css in the public/folder and include it with normal html, we can avoid going through the build pipeline!
---
 public/fonts.css  | 13 +++++++++++++
 public/index.html |  5 +++--
 src/styles.scss   | 14 --------------
 3 files changed, 16 insertions(+), 16 deletions(-)
 create mode 100644 public/fonts.css

diff --git a/public/fonts.css b/public/fonts.css
new file mode 100644
index 000000000..e8722a795
--- /dev/null
+++ b/public/fonts.css
@@ -0,0 +1,13 @@
+/* http://www.eaglefonts.com/fg-virgil-ttf-131249.htm */
+@font-face {
+  font-family: "Virgil";
+  src: url("FG_Virgil.ttf");
+  font-display: swap;
+}
+
+/* https://github.com/microsoft/cascadia-code */
+@font-face {
+  font-family: "Cascadia";
+  src: url("Cascadia.ttf");
+  font-display: swap;
+}
diff --git a/public/index.html b/public/index.html
index ab820bfa5..438f754ad 100644
--- a/public/index.html
+++ b/public/index.html
@@ -48,16 +48,17 @@
     <meta name="twitter:image" content="https://excalidraw.com/og-image.png" />
 
     <link rel="icon" href="%PUBLIC_URL%/logo.png" />
+    <link rel="stylesheet" href="%PUBLIC_URL%/fonts.css" />
     <link
       rel="preload"
-      href="/FG_Virgil.ttf"
+      href="%PUBLIC_URL%/FG_Virgil.ttf"
       as="font"
       type="font/ttf"
       crossorigin="anonymous"
     />
     <link
       rel="preload"
-      href="/Cascadia.ttf"
+      href="%PUBLIC_URL%/Cascadia.ttf"
       as="font"
       type="font/ttf"
       crossorigin="anonymous"
diff --git a/src/styles.scss b/src/styles.scss
index 2c37501b1..c7f57ecce 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,19 +1,5 @@
 @import "./theme.css";
 
-/* http://www.eaglefonts.com/fg-virgil-ttf-131249.htm */
-@font-face {
-  font-family: "Virgil";
-  src: url("/FG_Virgil.ttf");
-  font-display: swap;
-}
-
-/* https://github.com/microsoft/cascadia-code */
-@font-face {
-  font-family: "Cascadia";
-  src: url("/Cascadia.ttf");
-  font-display: swap;
-}
-
 body {
   margin: 0;
   font-family: Arial, Helvetica, sans-serif;