make font styling work

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 {

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} />
+      <input
-      <style jsx>
+        hidden
+        ref={inputEl}
+        type="file"
+        multiple
+        accept={EXTENSIONS.join(',')}
+        onChange={onFiles}
+      />
+      {fonts
+        .filter(font => font.url)
+        .map(font => (
+          <style jsx global key={font.id}>
             {`
-          input {
+              @font-face {
-            display: none;
+                font-family: '${font.name}';
+                src: url(${font.url}) format('woff');
+                font-display: swap;
+                font-style: normal;
+                font-weight: 400;
               }
             `}
           </style>
-    </>
+        ))}
+    </div>
   )
 }