diff --git a/assets/template.html b/assets/template.html
index 0869efc..1f6a2bc 100644
--- a/assets/template.html
+++ b/assets/template.html
@@ -296,6 +296,7 @@
         <button id="save_project" onclick="window.tp.downloadProject()">save project</button>
         <button id="open_project" onclick="window.tp.uploadProject(true)">open project</button>
         <button id="start_new_project" onclick="window.tp.startNewProject()">start new project</button>
+        <button id="add_font">add font</button>
         <!--<button id="debug_profiling" onclick="window.toggleProfiling()">debug start profiling</button>-->
     </div>
 
diff --git a/bin/em/variabletime/web/js/layer.js b/bin/em/variabletime/web/js/layer.js
index 47de0e3..0825822 100644
--- a/bin/em/variabletime/web/js/layer.js
+++ b/bin/em/variabletime/web/js/layer.js
@@ -735,23 +735,6 @@ const Layer = function(tp, layerID, fontsAndAxes, autoInit = true) {
                         }
                         togglePanelProp('width', this.theatreObject.value.width > 0, false);
 
-                        let bottomButtonsContainer = panel.querySelector('.bottomButtonsContainer');
-                        if (bottomButtonsContainer === null) {
-                            bottomButtonsContainer = document.createElement('div');
-                            bottomButtonsContainer.classList.add("bottomButtonsContainer");
-                            panel.append(bottomButtonsContainer);
-                        }
-                        if (bottomButtonsContainer.querySelector('.vte_button') === null) {
-                            const addFontButton = document.createElement('div');
-                            addFontButton.classList.add('vte_button');
-                            addFontButton.style.cursor = 'pointer';
-                            addFontButton.innerHTML = "add Font";
-                            addFontButton.addEventListener('click', (clickEvent) => {
-                                addUserFont();
-                            });
-                            bottomButtonsContainer.append(addFontButton);
-                        }
-
                         doItAgain = false;
                         clearTimeout(panelFinderTimeout);
                         panelFinderTimeout = false;
@@ -826,43 +809,6 @@ const Layer = function(tp, layerID, fontsAndAxes, autoInit = true) {
         }
         return letterDelays.hasOwnProperty(prop[0]);
     };
-    const addUserFont = () => {
-        return new Promise((resolve, reject) => {
-        uploadFile('font')
-            .then((fontFile) => {
-                moduleFS
-                    .save(fontFile)
-                    .then(() => {
-                        getFontsAndAxes()
-                            .then((newFontsAndAxes) => {
-                                // let's select the new uploaded font
-                                if (newFontsAndAxes.length > 0) {
-                                    const path = newFontsAndAxes[0].fontPath;
-                                    this.selectFont(path);
-                                    // we need to update theatreprops
-                                    // a bit awkwardly twice
-                                    // 
-                                    // first like this
-                                    this.updateTheatreProps()
-                                        .then(() => {
-                                            // and again with a transaction
-                                            const hash = props.fontFamily.default;
-                                            tp.studio.transaction(({
-                                                set
-                                            }) => {
-                                                set(this.theatreObject.props.fontFamily, hash);
-                                            });
-                                            this.findInjectPanel();
-                                            resolve();
-                                        });
-                                } else {
-                                    reject();
-                                }
-                            });
-                    });
-            });
-        });
-    };
     this.handleSequenceEvent = (detail, updateTheatre = true) => {
         return new Promise((resolve) => {
             tp.friendlySequenceNames();
diff --git a/bin/em/variabletime/web/js/main.js b/bin/em/variabletime/web/js/main.js
index 3f519a0..95d8617 100644
--- a/bin/em/variabletime/web/js/main.js
+++ b/bin/em/variabletime/web/js/main.js
@@ -186,6 +186,11 @@ const findInjectPanel = () => {
             bottomButtonsContainer.append(startNewButton);
             startNewButton.classList.add("main_panel_button");
         }
+        const addFontButton = document.querySelector('#add_font');
+        if (addFontButton !== null) {
+            bottomButtonsContainer.append(addFontButton);
+            addFontButton.classList.add("main_panel_button");
+        }
     } else {
         setTimeout(() => {
             findInjectPanel();
@@ -600,4 +605,52 @@ const initPanels = () => {
             });
         });
     }
+    let addFontButton = document.querySelector('#add_font');
+    if (addFontButton === null) {
+        addFontButton = tp.getPanel().querySelector('#add_font');
+    }
+    if (addFontButton !== null) {
+        addFontButton.addEventListener('click', () => {
+            addUserFont();
+        });
+    }
 };
+
+const addUserFont = () => {
+    uploadFile('font')
+        .then((fontFile) => {
+            moduleFS
+                .save(fontFile)
+                .then(() => {
+                    getFontsAndAxes()
+                        .then((newFontsAndAxes) => {
+                            // let's select the new uploaded font
+                            // if we have a layer selected
+                            const layer = getLayer();
+                            if (layer.id().indexOf('layer-') === 0 && newFontsAndAxes.length > 0) {
+                                const path = newFontsAndAxes[0].fontPath;
+                                layer.selectFont(path);
+                                // we need to update theatreprops
+                                // a bit awkwardly twice
+                                // 
+                                // first like this
+                                layer.updateTheatreProps()
+                                    .then(() => {
+                                        // and again with a transaction
+                                        const hash = layer.props.fontFamily.default;
+                                        tp.studio.transaction(({
+                                            set
+                                        }) => {
+                                            set(layer.theatreObject.props.fontFamily, hash);
+                                        });
+                                        layer.findInjectPanel();
+                                        resolve();
+                                    });
+                            } else {
+                                reject();
+                            }
+                        });
+                });
+        });
+};
+window.addUserFont = addUserFont;