Browse Source

Force preload fonts

Noah 7 years ago
parent
commit
4f8199a18b
3 changed files with 30 additions and 5 deletions
  1. 6 3
      editor/index.html
  2. 22 1
      server/fonts.js
  3. 2 1
      server/index.js

+ 6 - 3
editor/index.html View File

@@ -5,8 +5,9 @@
5 5
     <meta charset="utf-8" />
6 6
     <meta name="viewport" content="width=device-width, initial-scale=1">
7 7
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
8
-    <link href="css/base.css" rel="stylesheet" type="text/css">
9
-    <link href="css/editor.css" rel="stylesheet" type="text/css">
8
+    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600" rel="stylesheet" type="text/css">
9
+    <link href="/css/base.css" rel="stylesheet" type="text/css">
10
+    <link href="/css/editor.css" rel="stylesheet" type="text/css">
10 11
     <link href="/fonts/fonts.css" rel="stylesheet" type="text/css">
11 12
   </head>
12 13
   <body class="loading">
@@ -89,6 +90,8 @@
89 90
         </div>
90 91
       </div><!-- #loaded -->
91 92
     </div><!-- .container -->
92
-    <script src="js/bundle.js"></script>
93
+    <script src="/js/bundle.js"></script>
94
+    <!-- Force load custom fonts -->
95
+    <script src="/fonts/fonts.js"></script>
93 96
   </body>
94 97
 </html>

+ 22 - 1
server/fonts.js View File

@@ -7,7 +7,7 @@ fonts.forEach(function(font, i){
7 7
   var extension = "",
8 8
       split = font.file.split(".");
9 9
 
10
-  // Use existing extension if there is one
10
+  // Use existing file extension if there is one
11 11
   if (split.length > 1){
12 12
     extension = "." + split.pop();
13 13
   }
@@ -16,11 +16,19 @@ fonts.forEach(function(font, i){
16 16
 
17 17
 });
18 18
 
19
+// Send a stylesheet with custom fonts
19 20
 function sendCSS(req, res) {
20 21
   res.set("Content-Type", "text/css")
21 22
     .send(fonts.map(declaration).join("\n\n"));
22 23
 }
23 24
 
25
+// Send JS that forces all custom fonts to download upfront
26
+function sendJS(req, res) {
27
+  res.set("Content-Type", "application/javascript")
28
+    .send("(function(){\n\n" + fonts.map(shim).join("\n\n") + "\n\n})();");
29
+}
30
+
31
+// Send custom file by its slug
24 32
 function sendFont(req, res) {
25 33
 
26 34
   var font = bySlug[req.params.font];
@@ -44,7 +52,20 @@ function declaration(font, i) {
44 52
   ].filter(function(d){ return d; }).join("\n");
45 53
 }
46 54
 
55
+function shim(font, i) {
56
+  return [
57
+    "  var font" + i + " = document.createElement(\"div\");",
58
+    "  font" + i + ".innerHTML = '.';",
59
+    "  font" + i + ".style.fontFamily = \"" + font.family + "\";",
60
+    font.weight ? "  font" + i + ".style.fontWeight = \"" + font.weight + "\";" : "",
61
+    font.style ? "  font" + i + ".style.fontStyle = \"" + font.style + "\";" : "",
62
+    "  document.body.appendChild(font" + i + ");",
63
+    "  setTimeout(function(){ font" + i + ".remove(); }, 0);"
64
+  ].filter(function(d){ return d; }).join("\n");
65
+}
66
+
47 67
 module.exports = {
48 68
   css: sendCSS,
69
+  js: sendJS,
49 70
   font: sendFont
50 71
 };

+ 2 - 1
server/index.js View File

@@ -54,9 +54,10 @@ if (!serverSettings.s3Bucket) {
54 54
 
55 55
 // Serve custom fonts
56 56
 app.get("/fonts/fonts.css", fonts.css);
57
+app.get("/fonts/fonts.js", fonts.js);
57 58
 
58 59
 if (serverSettings.fonts) {
59
-  app.use("/fonts/:font", fonts.font);
60
+  app.get("/fonts/:font", fonts.font);
60 61
 }
61 62
 
62 63
 // Check the status of a current video