diff --git a/index.js b/index.js
index 9aaa93f..8be6570 100644
--- a/index.js
+++ b/index.js
@@ -64,33 +64,10 @@ JSONToSketchData(JSON.parse(modelData)).then(data => {
 import jss from 'jss';
 import preset from 'jss-preset-default';
 import normalize from 'normalize-jss';
-import abril from './fonts/abril-fatface-v12-latin-regular.woff';
-import bellefair from './fonts/bellefair-v6-latin-regular.woff';
-import fascinate from './fonts/fascinate-v11-latin-regular.woff';
-import joti from './fonts/joti-one-v11-latin-regular.woff';
-import lobster from './fonts/lobster-v23-latin-regular.woff';
-import oswald from './fonts/oswald-v36-latin-regular.woff';
-import play from './fonts/play-v12-latin-regular.woff';
-import ranga from './fonts/ranga-v8-latin-regular.woff';
-
-const fontFaces = [
-  { url: abril, family: 'Abril Fatface' }, 
-  { url: bellefair, family: 'Bellefair' },
-  { url: fascinate, family: 'Fascinate' },
-  { url: joti, family: 'Joti One' },
-  { url: lobster, family: 'Lobster' },
-  { url: oswald, family: 'Oswald' },
-  { url: play, family: 'Play' },
-  { url: ranga, family: 'Ranga' },
-];
 
 jss.setup(preset());
 jss.createStyleSheet(normalize).attach();
 jss.createStyleSheet({
-    '@font-face': fontFaces.map(({ url, family }) => ({
-        'font-family': family, 
-        'src': `url("${url}") format("woff")`
-    })),
     '@global': {
     '*': { margin: 0, padding: 0 },
     '#app, body, html': { height: '100%', fontFamily: 'sans-serif' },
diff --git a/src/utils/loaded.js b/src/utils/loaded.js
index 59e04de..79c86a7 100644
--- a/src/utils/loaded.js
+++ b/src/utils/loaded.js
@@ -1,7 +1,35 @@
 import { FONT_FACE } from '../constants/general.js';
+import * as contextTools from '../constants/contextTools.js';
 import FontLoaded from 'font-loaded';
 import { load as loadPattern } from '../d2/Shape.js';
 import { load as loadMatcapMaterial } from '../d3/MatcapMaterial.js';
+import jss from 'jss';
+import abril_url from '../../fonts/abril-fatface-v12-latin-regular.woff';
+import bellefair_url from '../../fonts/bellefair-v6-latin-regular.woff';
+import fascinate_url from '../../fonts/fascinate-v11-latin-regular.woff';
+import joti_url from '../../fonts/joti-one-v11-latin-regular.woff';
+import lobster_url from '../../fonts/lobster-v23-latin-regular.woff';
+import oswald_url from '../../fonts/oswald-v36-latin-regular.woff';
+import play_url from '../../fonts/play-v12-latin-regular.woff';
+import ranga_url from '../../fonts/ranga-v8-latin-regular.woff';
+
+const fontFaces = [
+  { url: abril_url,     family: FONT_FACE[contextTools.ABRIL_FATFACE], },
+  { url: bellefair_url, family: FONT_FACE[contextTools.BELLEFAIR], },
+  { url: fascinate_url, family: FONT_FACE[contextTools.FASCINATE], },
+  { url: joti_url,      family: FONT_FACE[contextTools.JOTI_ONE], },
+  { url: lobster_url,   family: FONT_FACE[contextTools.LOBSTER], },
+  { url: oswald_url,    family: FONT_FACE[contextTools.OSWALD], },
+  { url: play_url,      family: FONT_FACE[contextTools.PLAY], },
+  { url: ranga_url,     family: FONT_FACE[contextTools.RANGA], },
+];
+
+jss.createStyleSheet({
+    '@font-face': fontFaces.map(({ url, family }) => ({
+        'font-family': family,
+        'src': `url("${url}") format("woff")`
+    })),
+}).attach();
 
 const loadFont = font => {
   const fontLoaded = new FontLoaded(font);