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!
This commit is contained in:
Christopher Chedeau 2020-02-01 04:06:03 +00:00 committed by GitHub
parent e50dc5dbed
commit f261d6f2fc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 16 deletions

13
public/fonts.css Normal file
View File

@ -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;
}

View File

@ -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"

View File

@ -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;