Include @font-face declaration in main CSS file

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

@@ -0,0 +1,6 @@
+@font-face {
+    font-family: Museo500;
+    src:
+        url('/fonts/Museo500.woff2') format(woff2),
+        url('/fonts/Museo500.woff') format(woff);
+}

assets/scss/site.scss

@@ -1,3 +1,4 @@
+@import 'fonts/museo500';
 @import 'theme';
 @import 'reset';
 @import 'components/date-picker';

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));
 };

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 {

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'),
         ]
     ]
 

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')}" />