diff --git a/developer/server/src/data.ts b/developer/server/src/data.ts
index 4457c91d7f..fcc750495d 100644
--- a/developer/server/src/data.ts
+++ b/developer/server/src/data.ts
@@ -75,7 +75,7 @@ export class DebugFont implements DebugObject {
   facename: string;
 
   filenameFromId(id: string): string {
-    return id.replace(/[^a-z0-9A-Z-]/g, '_') + '.ttf';
+    return simplifyId(id) + '.ttf';
   }
 };
 
@@ -114,3 +114,8 @@ export let data: SiteData = new SiteData();
 export function isValidId(id: string) {
   return !id.match(/\.\.|\/|\\/);
 }
+
+export function simplifyId(id: string) {
+  return id.replace(/[^_a-zA-Z0-9-]/g, '_');
+}
+
diff --git a/developer/server/src/handlers/api/debugobject/register.ts b/developer/server/src/handlers/api/debugobject/register.ts
index bc27847048..9b52b577d8 100644
--- a/developer/server/src/handlers/api/debugobject/register.ts
+++ b/developer/server/src/handlers/api/debugobject/register.ts
@@ -1,5 +1,5 @@
 import express = require('express');
-import { DebugObject, isValidId } from "../../../data";
+import { DebugObject, isValidId, simplifyId } from "../../../data";
 import fs = require('fs');
 import crypto = require('crypto');
 import { configuration } from '../../../config';
@@ -21,6 +21,8 @@ export function apiRegisterFile<O extends DebugObject> (intf: new () => O, root:
     return false;
   }
 
+  id = simplifyId(id);
+
   let keys = Object.keys(root);
   if(keys.length > MAX_OBJECTS) {
     // remove least recently used objects
diff --git a/developer/server/src/handlers/api/font/register.ts b/developer/server/src/handlers/api/font/register.ts
new file mode 100644
index 0000000000..14d60e8e12
--- /dev/null
+++ b/developer/server/src/handlers/api/font/register.ts
@@ -0,0 +1,15 @@
+import chalk = require('chalk');
+import express = require('express');
+import { data, DebugFont, simplifyId } from "../../../data";
+
+export default function apiKeyboardRegister (req: express.Request, res: express.Response, next: express.NextFunction) {
+  const id = simplifyId(req.body['id']);
+  const font: DebugFont = data.fonts[id];
+  if(!font) {
+    console.error(chalk.red('unexpected missing font'));
+    return;
+  }
+  // The registered 'id' will be a font face name, but the id is simplified
+  font.facename = req.body['id'];
+  next();
+}
diff --git a/developer/server/src/handlers/inc/keyboards-css.ts b/developer/server/src/handlers/inc/keyboards-css.ts
index 129503c9c3..9302fd1164 100644
--- a/developer/server/src/handlers/inc/keyboards-css.ts
+++ b/developer/server/src/handlers/inc/keyboards-css.ts
@@ -1,4 +1,5 @@
 import express = require('express');
+import path = require('path');
 import { data, SiteData } from "../../data";
 
 export default function handleIncKeyboardsCss (req: express.Request, res: express.Response) {
@@ -14,11 +15,12 @@ function emitCSS(data: SiteData) {
 
   for(let id in data.fonts) {
     const font = data.fonts[id];
+    const filename = path.basename(font.filename.replace(path.sep=='/'?'\\':'/',path.sep));
     response += `
     @font-face {
-      font-family: ${JSON.stringify(font.facename)}
+      font-family: ${JSON.stringify(font.facename)};
       src:         local(${JSON.stringify(font.facename)}),
-                   url(${JSON.stringify('/data/font/'+font.filename)}) format("truetype");
+                   url(${JSON.stringify('/data/font/'+filename)}) format("truetype");
       font-weight: normal;
       font-style:  normal;
     }
diff --git a/developer/server/src/routes.ts b/developer/server/src/routes.ts
index c48b7537be..2a557a70e6 100644
--- a/developer/server/src/routes.ts
+++ b/developer/server/src/routes.ts
@@ -6,6 +6,7 @@ import { data, DebugFont, DebugKeyboard, DebugModel, DebugObject, DebugPackage,
 import apiGet from './handlers/api/debugobject/get';
 import apiRegister, { apiRegisterFile } from './handlers/api/debugobject/register';
 import apiKeyboardRegister from './handlers/api/keyboard/register';
+import apiFontRegister from './handlers/api/font/register';
 import apiUnregister from './handlers/api/debugobject/unregister';
 import handleIncPackagesJson from './handlers/inc/packages-json';
 import apiPackageRegister from './handlers/api/package/register';
@@ -96,12 +97,13 @@ export default function setupRoutes(app: express.Express, upload: multer.Multer,
   appGetData(app, /\/data\/keyboard\/(.+)\.js$/, data.keyboards);
   appGetData(app, /\/data\/model\/(.+)\.model\.js$/, data.models);
   appGetData(app, /\/data\/package\/(.+)\.kmp$/, data.packages);
-  appGetData(app, /\/data\/font\/(.+)/, data.fonts);
+  appGetData(app, /\/data\/font\/(.+)\.ttf$/, data.fonts);
 
   app.get('/api/font', (req,res,next)=>apiGet(data.fonts,req,res,next));
   app.post('/api/font/register',
     upload.single('file'),
     (req,res,next)=>apiRegister(DebugFont, data.fonts, req, res, next),
+    apiFontRegister,
     saveState,
     (req,res,next)=>notifyClients(wsServer,req,res,next)
   );