From 9b0e58bd0d7911682da05c6135b6b4ca073a1dac Mon Sep 17 00:00:00 2001
From: Charmander <~@charmander.me>
Date: Fri, 6 Dec 2024 17:21:50 -0800
Subject: [PATCH] Include `@font-face` declaration in main CSS file
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

It’s very small, so the extra preload entry and request are a lot of overhead. This also allows it to be minified, compressed, and versioned together with the rest of the CSS.

I’ve also removed the TTF `src` entry, since our entire browser support range now supports WOFF, and unquoted the `format` keywords (since the spec says that’s preferred, [Firefox should support it as of version 105][1], and it’s a little bit cleaner and shorter).

[1]: https://bugzilla.mozilla.org/show_bug.cgi?id=650372
---
 assets/scss/fonts/_museo500.scss        |  6 ++++++
 assets/scss/site.scss                   |  1 +
 build.js                                | 20 ++++++++++++--------
 containers/nginx/nginx.conf             |  4 ++--
 weasyl/middleware.py                    |  1 -
 weasyl/templates/common/page_start.html |  1 -
 6 files changed, 21 insertions(+), 12 deletions(-)
 create mode 100644 assets/scss/fonts/_museo500.scss

diff --git a/assets/scss/fonts/_museo500.scss b/assets/scss/fonts/_museo500.scss
new file mode 100644
index 000000000..476ab3125
--- /dev/null
+++ b/assets/scss/fonts/_museo500.scss
@@ -0,0 +1,6 @@
+@font-face {
+    font-family: Museo500;
+    src:
+        url('/fonts/Museo500.woff2') format(woff2),
+        url('/fonts/Museo500.woff') format(woff);
+}
diff --git a/assets/scss/site.scss b/assets/scss/site.scss
index 998682d17..15bd6f7fd 100644
--- a/assets/scss/site.scss
+++ b/assets/scss/site.scss
@@ -1,3 +1,4 @@
+@import 'fonts/museo500';
 @import 'theme';
 @import 'reset';
 @import 'components/date-picker';
diff --git a/build.js b/build.js
index 84d6151bc..3a6bb71a7 100644
--- a/build.js
+++ b/build.js
@@ -180,8 +180,15 @@ const sasscFile = async (relativeInputPath, relativeOutputPath, touch, copyImage
     });
 
     // ew
-    const images = new Map(
-        (await copyImages).entries
+    const subresources = new Map(
+        [
+            ...(await copyImages).entries,
+            // font license does not allow distribution with source code
+            ...[
+                'fonts/Museo500.woff2',
+                'fonts/Museo500.woff',
+            ].map(p => [p, p]),
+        ]
             .map(([k, v]) => [new URL('http://localhost/' + k).href, v])
     );
 
@@ -192,11 +199,11 @@ const sasscFile = async (relativeInputPath, relativeOutputPath, touch, copyImage
 
         const expandedLink = new URL(link, 'http://localhost/' + relativeInputPath).href;
 
-        if (!images.has(expandedLink)) {
+        if (!subresources.has(expandedLink)) {
             throw new Error(`Unresolvable url() in ${relativeInputPath}: ${link}`);
         }
 
-        return left + '/' + images.get(expandedLink) + ')';
+        return left + '/' + subresources.get(expandedLink) + ')';
     });
 
     const shortDigest = getShortDigest(
@@ -320,10 +327,7 @@ const main = async () => {
         manifestPath,
         JSON.stringify(
             Object.fromEntries(
-                [
-                    ...tasks.flatMap(task => task.entries),
-                    ['fonts/museo500.css', 'fonts/museo500.css'],
-                ])),
+                tasks.flatMap(task => task.entries))),
     );
     await Promise.all(tasks.map(task => task.work));
 };
diff --git a/containers/nginx/nginx.conf b/containers/nginx/nginx.conf
index 8de56f283..010e155e5 100644
--- a/containers/nginx/nginx.conf
+++ b/containers/nginx/nginx.conf
@@ -66,8 +66,8 @@ http {
             add_header Cache-Control "public, max-age=31536000, immutable";
         }
 
-        location = /fonts/museo500.css {
-            return 307 https://cdn.weasyl.com/static/fonts/museo500.css;
+        location /fonts/ {
+            return 307 https://cdn.weasyl.com$uri;
         }
 
         location = /opensearch.xml {
diff --git a/weasyl/middleware.py b/weasyl/middleware.py
index 2bec5f52b..f8f05dc9d 100644
--- a/weasyl/middleware.py
+++ b/weasyl/middleware.py
@@ -309,7 +309,6 @@ def _generate_http2_server_push_headers():
     css_preload = [
         '<' + item + '>; rel=preload; as=style' for item in [
             d.get_resource_path('css/site.css'),
-            d.get_resource_path('fonts/museo500.css'),
         ]
     ]
 
diff --git a/weasyl/templates/common/page_start.html b/weasyl/templates/common/page_start.html
index e1234c263..596806d55 100644
--- a/weasyl/templates/common/page_start.html
+++ b/weasyl/templates/common/page_start.html
@@ -17,7 +17,6 @@
     document.documentElement.classList.add("js");
   </script>
 
-  <link rel="stylesheet" href="${resource_path('fonts/museo500.css')}" />
   <link rel="stylesheet" href="${resource_path('css/site.css')}" />
 
   <link rel="icon" type="image/png" sizes="16x16" href="${resource_path('img/favicon.png')}" />