move @font-face into function component

components/Editor.js

@@ -400,15 +400,7 @@ class Editor extends React.Component {
             </Overlay>
           )}
         </Dropzone>
-        <style jsx global>
+        <FontFace {...config} />
-          {`
-            @font-face {
-              font-family: ${config.fontUrl ? config.fontFamily : ''};
-              src: url(${config.fontUrl || ''}) format('woff');
-              font-display: swap;
-            }
-          `}
-        </style>
         <style jsx>
           {`
             .editor {
@@ -429,6 +421,20 @@ class Editor extends React.Component {
   }
 }
 
+function FontFace(config) {
+  return (
+    <style jsx global>
+      {`
+        @font-face {
+          font-family: ${config.fontUrl ? config.fontFamily : ''};
+          src: url(${config.fontUrl || ''}) format('woff');
+          font-display: swap;
+        }
+      `}
+    </style>
+  )
+}
+
 function isImage(file) {
   return file.type.split('/')[0] === 'image'
 }