custom fonts

components/Carbon.js

@@ -117,6 +117,14 @@ 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

@@ -2,13 +2,73 @@ import React from 'react'
 import ListSetting from './ListSetting'
 import { FONTS } from '../lib/constants'
 
-const Font = font => <span style={{ fontFamily: font.id }}>{font.name}</span>
+const EXTENSIONS = ['.otf', '.ttf', '.woff']
+
+const blobToUrl = blob =>
+  new Promise(resolve => {
+    const reader = new FileReader()
+
+    reader.onload = event => resolve(event.target.result)
+    reader.readAsDataURL(blob)
+  })
+
+const Font = ({ id, name }) => (
+  <span style={id === 'upload' ? { textAlign: 'center', width: '100%' } : { fontFamily: id }}>
+    {name}
+  </span>
+)
 
 function FontSelect(props) {
+  const inputEl = React.useRef(null)
+  const [fonts, updateFonts] = React.useState(FONTS)
+
+  function onChange(id) {
+    if (id === 'upload') {
+      inputEl.current.click()
+    } else {
+      props.onChange('fontFamily', id)
+      const font = fonts.find(f => f.id === id)
+      props.onChange('fontUrl', font.url || null)
+    }
+  }
+
+  async function onFiles() {
+    const { files } = inputEl.current
+
+    const name = files[0].name.split('.')[0]
+    const url = await blobToUrl(files[0])
+
+    updateFonts(fonts => [{ id: name, name, url }, ...fonts])
+    props.onChange('fontFamily', name)
+    props.onChange('fontUrl', url)
+  }
+
   return (
-    <ListSetting title="Font" items={FONTS} {...props}>
+    <>
+      <ListSetting
+        title="Font"
+        items={[{ id: 'upload', name: 'Upload +' }, ...fonts]}
+        {...props}
+        onChange={onChange}
+      >
         {Font}
       </ListSetting>
+      <input
+        ref={inputEl}
+        type="file"
+        id="fileElem"
+        multiple
+        accept={EXTENSIONS.join(',')}
+        onChange={onFiles}
+      />
+      <style jsx>
+        {`
+          input {
+            display: none;
+          }
+        `}
+      </style>
+    </>
   )
 }
 

components/Settings.js

@@ -109,7 +109,7 @@ const TypeSettings = React.memo(
   ({ onChange, font, size, lineHeight, onWidthChanging, onWidthChanged }) => {
     return (
       <div className="settings-content">
-        <FontSelect selected={font} onChange={onChange.bind(null, 'fontFamily')} />
+        <FontSelect selected={font} onChange={onChange} />
         <Slider
           label="Size"
           value={size}