From f5fe38ea88e7dd4765fc62824898125f6d9ace25 Mon Sep 17 00:00:00 2001
From: Mike Fix <mrfix84@gmail.com>
Date: Mon, 15 Apr 2019 16:17:54 -0700
Subject: [PATCH] make font styling work

---
 components/Carbon.js     |  8 --------
 components/FontSelect.js | 36 +++++++++++++++++++++++++-----------
 2 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/components/Carbon.js b/components/Carbon.js
index 6eb333a..1b37df9 100644
--- a/components/Carbon.js
+++ b/components/Carbon.js
@@ -117,14 +117,6 @@ class Carbon extends React.PureComponent {
           <div className="alpha eliminateOnRender" />
           <div className="bg" />
         </div>
-        <style jsx global>
-          {`
-            @font-face {
-              font-family: ${config.fontUrl ? config.fontFamily : ''};
-              src: url(${config.fontUrl || ''}) format('woff');
-            }
-          `}
-        </style>
         <style jsx>
           {`
             .container {
diff --git a/components/FontSelect.js b/components/FontSelect.js
index a4c1736..87605d9 100644
--- a/components/FontSelect.js
+++ b/components/FontSelect.js
@@ -33,11 +33,10 @@ function FontSelect(props) {
 
     updateFonts(fonts => [{ id: name, name, url }, ...fonts])
     props.onChange('fontFamily', name)
-    props.onChange('fontUrl', url)
   }
 
   return (
-    <>
+    <div>
       <ListSetting
         title="Font"
         items={[{ id: 'upload', name: 'Upload +' }, ...fonts]}
@@ -46,15 +45,30 @@ function FontSelect(props) {
       >
         {Font}
       </ListSetting>
-      <input ref={inputEl} type="file" multiple accept={EXTENSIONS.join(',')} onChange={onFiles} />
-      <style jsx>
-        {`
-          input {
-            display: none;
-          }
-        `}
-      </style>
-    </>
+      <input
+        hidden
+        ref={inputEl}
+        type="file"
+        multiple
+        accept={EXTENSIONS.join(',')}
+        onChange={onFiles}
+      />
+      {fonts
+        .filter(font => font.url)
+        .map(font => (
+          <style jsx global key={font.id}>
+            {`
+              @font-face {
+                font-family: '${font.name}';
+                src: url(${font.url}) format('woff');
+                font-display: swap;
+                font-style: normal;
+                font-weight: 400;
+              }
+            `}
+          </style>
+        ))}
+    </div>
   )
 }