perf(homepage): stabilize font loading [Codex]

apps/docs/app/routes/LandingPageIntro.res

@@ -1,11 +1,6 @@
 @react.component
 let make = () => {
   <section dataTestId="landing-intro" className="flex justify-center">
-    // This font is only needed on the homepage.
-    <link
-      href="https://fonts.googleapis.com/css2?family=Red+Hat+Mono:wght@700&display=swap"
-      rel="stylesheet"
-    />
     <div className="max-w-1060 flex flex-col items-center px-5 sm:px-8 lg:box-content">
       <h1 className="hl-title text-center max-w-212">
         {React.string("JavaScript Made Simple for Humans and AI")}

apps/docs/app/routes/LandingPageRoute.res

@@ -1,3 +1,25 @@
+type fontPreload = {
+  rel: string,
+  href: string,
+  @as("as") as_: string,
+  @as("type") type_: string,
+  crossOrigin: string,
+}
+
+let fontPreload = href => {
+  rel: "preload",
+  href,
+  as_: "font",
+  type_: "font/woff2",
+  crossOrigin: "anonymous",
+}
+
+let links = () => [
+  fontPreload("/fonts/subset-Inter-Regular.woff2"),
+  fontPreload("/fonts/subset-Inter-SemiBold.woff2"),
+  fontPreload("/fonts/red-hat-mono-700.woff2"),
+]
+
 let default = () => {
   <>
     <LandingPage />

apps/docs/app/routes/LandingPageRoute.resi

@@ -1 +1,11 @@
+type fontPreload = {
+  rel: string,
+  href: string,
+  @as("as") as_: string,
+  @as("type") type_: string,
+  crossOrigin: string,
+}
+
+let links: unit => array<fontPreload>
+
 let default: unit => React.element

apps/docs/e2e-playwright/homepage-prerender.spec.mjs

@@ -15,4 +15,33 @@ test("homepage response contains prerendered content and highlighted examples",
   expect(document.querySelector("code.lang-js span")).not.toBeNull();
   expect(html).toContain('href="/docs/manual/installation"');
   expect(html).toMatch(/href="\/try\?code=[^"]+"/);
+
+  const fontPreloads = Array.from(
+    document.querySelectorAll('head link[rel="preload"][as="font"]'),
+    (link) => ({
+      href: link.getAttribute("href"),
+      type: link.getAttribute("type"),
+      crossOrigin: link.getAttribute("crossorigin"),
+    }),
+  );
+
+  expect(fontPreloads).toEqual([
+    {
+      href: "/fonts/subset-Inter-Regular.woff2",
+      type: "font/woff2",
+      crossOrigin: "anonymous",
+    },
+    {
+      href: "/fonts/subset-Inter-SemiBold.woff2",
+      type: "font/woff2",
+      crossOrigin: "anonymous",
+    },
+    {
+      href: "/fonts/red-hat-mono-700.woff2",
+      type: "font/woff2",
+      crossOrigin: "anonymous",
+    },
+  ]);
+  expect(html).not.toContain("fonts.googleapis.com");
+  expect(html).not.toContain("fonts.gstatic.com");
 });

apps/docs/e2e-playwright/homepage.spec.mjs

@@ -30,6 +30,23 @@ function observeFailedLocalImages(page) {
   return failures;
 }
 
+function observeFontRequests(page) {
+  const requests = [];
+
+  page.on("request", (request) => {
+    const url = new URL(request.url());
+    if (
+      request.resourceType() === "font" ||
+      url.hostname === "fonts.googleapis.com" ||
+      url.hostname === "fonts.gstatic.com"
+    ) {
+      requests.push(url);
+    }
+  });
+
+  return requests;
+}
+
 async function expectPageStyles(page) {
   await expect
     .poll(() =>
@@ -62,6 +79,7 @@ test("homepage hydrates with working links and copy feedback", async ({
 }) => {
   const runtimeErrors = observeRuntimeErrors(page);
   const failedImages = observeFailedLocalImages(page);
+  const fontRequests = observeFontRequests(page);
 
   await context.grantPermissions(["clipboard-read", "clipboard-write"], {
     origin: "http://127.0.0.1:4173",
@@ -75,6 +93,22 @@ test("homepage hydrates with working links and copy feedback", async ({
       name: "JavaScript Made Simple for Humans and AI",
     }),
   ).toBeVisible();
+  await expect
+    .poll(() =>
+      page.evaluate(async () => {
+        await Promise.all([
+          document.fonts.load('400 1rem "Inter"'),
+          document.fonts.load('600 1rem "Inter"'),
+          document.fonts.load('700 1rem "Red Hat Mono"'),
+        ]);
+        return [
+          document.fonts.check('400 1rem "Inter"'),
+          document.fonts.check('600 1rem "Inter"'),
+          document.fonts.check('700 1rem "Red Hat Mono"'),
+        ];
+      }),
+    )
+    .toEqual([true, true, true]);
   await expect(
     page.getByRole("link", { name: "Get started", exact: true }),
   ).toHaveAttribute("href", "/docs/manual/installation");
@@ -94,6 +128,16 @@ test("homepage hydrates with working links and copy feedback", async ({
 
   expect(brokenLoadedImages).toEqual([]);
   expect(failedImages).toEqual([]);
+  expect(fontRequests.map((url) => url.pathname)).toEqual(
+    expect.arrayContaining([
+      "/fonts/red-hat-mono-700.woff2",
+      "/fonts/subset-Inter-Regular.woff2",
+      "/fonts/subset-Inter-SemiBold.woff2",
+    ]),
+  );
+  expect(
+    fontRequests.every((url) => url.origin === "http://127.0.0.1:4173"),
+  ).toBe(true);
   expect(runtimeErrors).toEqual([]);
 });
 

apps/docs/public/fonts/LICENSE-Red-Hat-Mono.txt

@@ -0,0 +1,93 @@
+Copyright 2024 The Red Hat Project Authors (https://github.com/RedHatOfficial/RedHatFont)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

apps/docs/scripts/homepage-performance-budget.json

@@ -1,13 +1,13 @@
 {
   "javascript": {
     "requests": 20,
-    "rawBytes": 1422351,
-    "gzipBytes": 279510
+    "rawBytes": 1422586,
+    "gzipBytes": 279540
   },
   "css": {
     "requests": 3,
-    "rawBytes": 80205,
-    "gzipBytes": 14721
+    "rawBytes": 80496,
+    "gzipBytes": 14741
   },
   "bodyElements": 418,
   "media": {

apps/docs/styles/_fonts.css

@@ -138,6 +138,21 @@ $ pyftsubset <path_to_font> --unicodes="U+0000-00FF, U+0131, U+0152-0153, U+02BB
     U+FFFD;
 }
 
+/* RED HAT MONO - https://github.com/redhat/RedHatFont */
+
+/* latin */
+@font-face {
+  font-family: "Red Hat Mono";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("/fonts/red-hat-mono-700.woff2") format("woff2");
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
+    U+2215, U+FEFF, U+FFFD;
+}
+
 .red-hat-mono-bold {
   font-family: "Red Hat Mono", monospace;
   font-optical-sizing: auto;