Embed ArchivoNarrow font into the repo/image/app

Is this enough to get the mythical 100 PageSpeed Insights score?

Author: danopia

fonts/ArchivoNarrow-400_latin-ext.woff2

@@ -2,12 +2,17 @@
 
 I use Archivo for the website, and Arial for exported SVGs.
 
-These files aren't actually served or rendered.
+These TTFs aren't actually served or rendered.
 graphviz uses them to measure text, for box sizing purposes.
 
+The WOFF2 files **are** served, to optimize pageload times.
+
 ## Sources
 
-I'm sure there's more legit sources for these fonts...
+The WOFF2 files are from Google Fonts. They were grabbed from
+[this reference CSS file](https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@400;700&display=swap).
+
+I'm sure there's more legit sources for these TTFs...
 I got these files from these URLs:
 
 * https://github.com/Omnibus-Type/ArchivoNarrow/raw/master/fonts/ttf/ArchivoNarrow-Regular.ttf

fonts/ArchivoNarrow-400_latin.woff2

@@ -45,6 +45,12 @@ export async function servePublic(req: http.ServerRequest, path: string) {
     .catch(makeErrorResponse)
     .then(resp => req.respond(resp));
 }
+export async function serveFont(req: http.ServerRequest, path: string) {
+  await file_server
+    .serveFile(req, 'fonts/'+path)
+    .catch(makeErrorResponse)
+    .then(resp => req.respond(resp));
+}
 
 export function makeErrorResponse(err: Error): http.Response {
   if (err.name === 'NotFound') {

fonts/ArchivoNarrow-700_latin-ext.woff2

@@ -1,6 +1,4 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<link rel="preconnect" href="https://fonts.gstatic.com">
-<link href="https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@400;700&display=swap" rel="stylesheet">
 
 <link rel="stylesheet" href="/global.css">
 <link rel="icon" href="/icon-deps.png">

fonts/ArchivoNarrow-700_latin.woff2

@@ -108,3 +108,41 @@ section h2 img {
     font-size: 1em;
   }
 }
+
+/* original URL: https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@400;700&display=swap */
+@font-face {
+  font-family: 'Archivo Narrow';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  /* latin-ext */
+  src: url(/fonts/ArchivoNarrow-400_latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: 'Archivo Narrow';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  /* latin */
+  src: url(/fonts/ArchivoNarrow-400_latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'Archivo Narrow';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  /* latin-ext */
+  src: url(/fonts/ArchivoNarrow-700_latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: 'Archivo Narrow';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  /* latin */
+  src: url(/fonts/ArchivoNarrow-700_latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

fonts/README.md

@@ -1,7 +1,7 @@
 #!/usr/bin/env -S deno run --allow-read=. --allow-net=0.0.0.0 --allow-run=deno,dot --allow-env=PORT
 
 import { http } from "./deps.ts";
-import { servePublic, serveTemplatedHtml } from './lib/request-handling.ts';
+import { serveFont, servePublic, serveTemplatedHtml } from './lib/request-handling.ts';
 
 // The different HTTP surfaces we expose
 import * as DependenciesOf from './feat/dependencies-of/api.ts';
@@ -59,6 +59,12 @@ async function handleReq(req: http.ServerRequest) {
     return;
   }
 
+  if (url.pathname.startsWith('/fonts/') &&
+      url.pathname.endsWith('.woff2')) {
+    await serveFont(req, url.pathname.slice(6));
+    return;
+  }
+
   await req.respond({
     status: 404,
     body: '404 Not Found',