Use local fonts (#573)

This updates the way fonts are handled to not have to download the font from the internet.

If you do `./public/font.ttf` in the .scss file, unfortunately the bundle packages them somewhere that's different from the public folder that is used by the index.html to preload them.

The fix I used is to use absolute path `/font.ttf` so that both work. Unfortunately, this means that the website will only work if at the root of the domain. That's the case so far so it's okay but still annoying if we want to embed it somewhere.

public/index.html

@@ -50,14 +50,14 @@
     <link rel="icon" href="%PUBLIC_URL%/logo.png" />
     <link
       rel="preload"
-      href="https://uploads.codesandbox.io/uploads/user/f7fdc300-3c43-44c1-9a59-4338a82a9954/_oPE-FG_Virgil.ttf"
+      href="/FG_Virgil.ttf"
       as="font"
       type="font/ttf"
       crossorigin="anonymous"
     />
     <link
       rel="preload"
-      href="https://uploads.codesandbox.io/uploads/user/5f5b1ecd-ac15-4c7f-803e-e11ff53ea4ce/z1tp-Cascadia.ttf"
+      href="/Cascadia.ttf"
       as="font"
       type="font/ttf"
       crossorigin="anonymous"

src/index-node.ts

@@ -57,6 +57,7 @@ const elements = [
 ];
 
 registerFont("./public/FG_Virgil.ttf", { family: "Virgil" });
+registerFont("./public/Cascadia.ttf", { family: "Cascadia" });
 const canvas = getExportCanvasPreview(
   elements as any,
   {

src/styles.scss

@@ -3,14 +3,14 @@
 /* http://www.eaglefonts.com/fg-virgil-ttf-131249.htm */
 @font-face {
   font-family: "Virgil";
-  src: url("https://uploads.codesandbox.io/uploads/user/f7fdc300-3c43-44c1-9a59-4338a82a9954/_oPE-FG_Virgil.ttf");
+  src: url("/FG_Virgil.ttf");
   font-display: swap;
 }
 
 /* https://github.com/microsoft/cascadia-code */
 @font-face {
   font-family: "Cascadia";
-  src: url("https://uploads.codesandbox.io/uploads/user/5f5b1ecd-ac15-4c7f-803e-e11ff53ea4ce/z1tp-Cascadia.ttf");
+  src: url("/Cascadia.ttf");
   font-display: swap;
 }