Browse Source

Serving custom fonts directly

Noah 7 years ago
parent
commit
f5a50e4a86
3 changed files with 59 additions and 1 deletions
  1. 1 1
      editor/index.html
  2. 50 0
      server/fonts.js
  3. 8 0
      server/index.js

+ 1 - 1
editor/index.html View File

@@ -4,10 +4,10 @@
4 4
     <title>Audiogram</title>
5 5
     <meta charset="utf-8" />
6 6
     <meta name="viewport" content="width=device-width, initial-scale=1">
7
-    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600" rel="stylesheet" type="text/css">
8 7
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
9 8
     <link href="css/base.css" rel="stylesheet" type="text/css">
10 9
     <link href="css/editor.css" rel="stylesheet" type="text/css">
10
+    <link href="/fonts/fonts.css" rel="stylesheet" type="text/css">
11 11
   </head>
12 12
   <body class="loading">
13 13
     <div class="container">

+ 50 - 0
server/fonts.js View File

@@ -0,0 +1,50 @@
1
+var fonts = require("../lib/settings/").fonts;
2
+
3
+var bySlug = {};
4
+
5
+fonts.forEach(function(font, i){
6
+
7
+  var extension = "",
8
+      split = font.file.split(".");
9
+
10
+  // Use existing extension if there is one
11
+  if (split.length > 1){
12
+    extension = "." + split.pop();
13
+  }
14
+
15
+  bySlug[font.slug = "custom-" + i + extension] = font;
16
+
17
+});
18
+
19
+function sendCSS(req, res) {
20
+  res.set("Content-Type", "text/css")
21
+    .send(fonts.map(declaration).join("\n\n"));
22
+}
23
+
24
+function sendFont(req, res) {
25
+
26
+  var font = bySlug[req.params.font];
27
+
28
+  if (font && font.file) {
29
+    return res.sendFile(font.file);
30
+  }
31
+
32
+  res.status(500).send("Cannot GET " + req.baseUrl);
33
+
34
+}
35
+
36
+function declaration(font, i) {
37
+  return [
38
+    "@font-face {",
39
+    "  font-family: '" + font.family + "';",
40
+    "  src: url('/fonts/" + font.slug + "');",
41
+    font.weight ? "  font-weight: " + font.weight + ";" : "",
42
+    font.style ? "  font-style: " + font.style + ";" : "",
43
+    "}"
44
+  ].filter(function(d){ return d; }).join("\n");
45
+}
46
+
47
+module.exports = {
48
+  css: sendCSS,
49
+  font: sendFont
50
+};

+ 8 - 0
server/index.js View File

@@ -10,6 +10,7 @@ var express = require("express"),
10 10
 var logger = require("../lib/logger/"),
11 11
     render = require("./render.js"),
12 12
     status = require("./status.js"),
13
+    fonts = require("./fonts.js"),
13 14
     errorHandlers = require("./error.js");
14 15
 
15 16
 // Settings
@@ -51,6 +52,13 @@ if (!serverSettings.s3Bucket) {
51 52
   app.use("/video/", express.static(path.join(serverSettings.storagePath, "video")));
52 53
 }
53 54
 
55
+// Serve custom fonts
56
+app.get("/fonts/fonts.css", fonts.css);
57
+
58
+if (serverSettings.fonts) {
59
+  app.use("/fonts/:font", fonts.font);
60
+}
61
+
54 62
 // Check the status of a current video
55 63
 app.get("/status/:id/", status);
56 64