Home Explore Help
Sign In
riff
/
audiogram
Watch 2
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Commits 108 Releases 1 Wiki
Browse Source

Force preload fonts

Noah 7 years ago
parent
3de1ff9bbd
commit
4f8199a18b
3 changed files with 30 additions and 5 deletions
Unified View Show Diff Stats
  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 
     <meta charset="utf-8" />
 5 
     <meta charset="utf-8" />
6 
     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 
     <meta name="viewport" content="width=device-width, initial-scale=1">
7 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
 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 
     <link href="/fonts/fonts.css" rel="stylesheet" type="text/css">
 11 
     <link href="/fonts/fonts.css" rel="stylesheet" type="text/css">
11 
   </head>
 12 
   </head>
12 
   <body class="loading">
 13 
   <body class="loading">
89 
         </div>
 90 
         </div>
90 
       </div><!-- #loaded -->
 91 
       </div><!-- #loaded -->
91 
     </div><!-- .container -->
 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 
   </body>
 96 
   </body>
94 
 </html>
 97 
 </html>

+ 22 - 1
server/fonts.js View File

7 
   var extension = "",
 7 
   var extension = "",
8 
       split = font.file.split(".");
 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 
   if (split.length > 1){
 11 
   if (split.length > 1){
12 
     extension = "." + split.pop();
 12 
     extension = "." + split.pop();
13 
   }
 13 
   }
16
16
17 
 });
 17 
 });
18
18
19 
+// Send a stylesheet with custom fonts
19 
 function sendCSS(req, res) {
 20 
 function sendCSS(req, res) {
20 
   res.set("Content-Type", "text/css")
 21 
   res.set("Content-Type", "text/css")
21 
     .send(fonts.map(declaration).join("\n\n"));
 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 
 function sendFont(req, res) {
 32 
 function sendFont(req, res) {
25
33
26 
   var font = bySlug[req.params.font];
 34 
   var font = bySlug[req.params.font];
44 
   ].filter(function(d){ return d; }).join("\n");
 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 
 module.exports = {
 67 
 module.exports = {
48 
   css: sendCSS,
 68 
   css: sendCSS,
69 
+  js: sendJS,
49 
   font: sendFont
 70 
   font: sendFont
50 
 };
 71 
 };

+ 2 - 1
server/index.js View File

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