Force preload fonts

nypublicradio · Aug 26, 2016 · 4f8199a · 4f8199a
1 parent 3de1ff9
commit 4f8199a
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 5 deletions.
diff --git a/editor/index.html b/editor/index.html
@@ -5,8 +5,9 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
-    <link href="css/base.css" rel="stylesheet" type="text/css">
-    <link href="css/editor.css" rel="stylesheet" type="text/css">
+    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600" rel="stylesheet" type="text/css">
+    <link href="/css/base.css" rel="stylesheet" type="text/css">
+    <link href="/css/editor.css" rel="stylesheet" type="text/css">
     <link href="/fonts/fonts.css" rel="stylesheet" type="text/css">
   </head>
   <body class="loading">
@@ -89,6 +90,8 @@ <h1>Audiogram</h1>
         </div>
       </div><!-- #loaded -->
     </div><!-- .container -->
-    <script src="js/bundle.js"></script>
+    <script src="/js/bundle.js"></script>
+    <!-- Force load custom fonts -->
+    <script src="/fonts/fonts.js"></script>
   </body>
 </html>
diff --git a/server/fonts.js b/server/fonts.js
@@ -7,7 +7,7 @@ fonts.forEach(function(font, i){
   var extension = "",
       split = font.file.split(".");
 
-  // Use existing extension if there is one
+  // Use existing file extension if there is one
   if (split.length > 1){
     extension = "." + split.pop();
   }
@@ -16,11 +16,19 @@ fonts.forEach(function(font, i){
 
 });
 
+// Send a stylesheet with custom fonts
 function sendCSS(req, res) {
   res.set("Content-Type", "text/css")
     .send(fonts.map(declaration).join("\n\n"));
 }
 
+// Send JS that forces all custom fonts to download upfront
+function sendJS(req, res) {
+  res.set("Content-Type", "application/javascript")
+    .send("(function(){\n\n" + fonts.map(shim).join("\n\n") + "\n\n})();");
+}
+
+// Send custom file by its slug
 function sendFont(req, res) {
 
   var font = bySlug[req.params.font];
@@ -44,7 +52,20 @@ function declaration(font, i) {
   ].filter(function(d){ return d; }).join("\n");
 }
 
+function shim(font, i) {
+  return [
+    "  var font" + i + " = document.createElement(\"div\");",
+    "  font" + i + ".innerHTML = '.';",
+    "  font" + i + ".style.fontFamily = \"" + font.family + "\";",
+    font.weight ? "  font" + i + ".style.fontWeight = \"" + font.weight + "\";" : "",
+    font.style ? "  font" + i + ".style.fontStyle = \"" + font.style + "\";" : "",
+    "  document.body.appendChild(font" + i + ");",
+    "  setTimeout(function(){ font" + i + ".remove(); }, 0);"
+  ].filter(function(d){ return d; }).join("\n");
+}
+
 module.exports = {
   css: sendCSS,
+  js: sendJS,
   font: sendFont
 };
diff --git a/server/index.js b/server/index.js
@@ -54,9 +54,10 @@ if (!serverSettings.s3Bucket) {
 
 // Serve custom fonts
 app.get("/fonts/fonts.css", fonts.css);
+app.get("/fonts/fonts.js", fonts.js);
 
 if (serverSettings.fonts) {
-  app.use("/fonts/:font", fonts.font);
+  app.get("/fonts/:font", fonts.font);
 }
 
 // Check the status of a current video