diff --git a/components/Editor.js b/components/Editor.js
index f150c30..74999ce 100644
--- a/components/Editor.js
+++ b/components/Editor.js
@@ -378,6 +378,15 @@ class Editor extends React.Component {
             </Overlay>
           )}
         </Dropzone>
+        <style jsx global>
+          {`
+            @font-face {
+              font-family: ${config.fontUrl ? config.fontFamily : ''};
+              src: url(${config.fontUrl || ''}) format('woff');
+              font-display: swap;
+            }
+          `}
+        </style>
         <style jsx>
           {`
             .editor {
diff --git a/components/FontSelect.js b/components/FontSelect.js
index 87605d9..c2a4fb6 100644
--- a/components/FontSelect.js
+++ b/components/FontSelect.js
@@ -33,6 +33,7 @@ function FontSelect(props) {
 
     updateFonts(fonts => [{ id: name, name, url }, ...fonts])
     props.onChange('fontFamily', name)
+    props.onChange('fontUrl', url)
   }
 
   return (
@@ -53,21 +54,6 @@ function FontSelect(props) {
         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>
   )
 }