From a4cfb43127a9e8d0efbcd1c3dfbf2785221274a1 Mon Sep 17 00:00:00 2001
From: Ben Dichter <ben.dichter@gmail.com>
Date: Fri, 9 Oct 2026 15:11:45 -0400
Subject: [PATCH] Load the Inter font and use it for body text

Every font-family rule in style.css names Inter, but the font never
loaded. Its `@import` sat in the middle of the stylesheet, and browsers
ignore an `@import` that comes after other rules, so headings, lists and
navigation fell back to Helvetica or Arial. Paragraphs written in
Markdown have no inter-* class and used Bootstrap's system font stack,
so a page could show two typefaces.

The font is now requested from the page head, with a preconnect, and
`body` is set to Inter so that all text uses it.

Inter is slightly wider than the fallback fonts. The header button would
wrap to two lines between 1200 and 1400 px, so it is marked nowrap.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 assets/css/style.css                  | 8 ++++++--
 layouts/partials/essentials/head.html | 5 +++++
 layouts/partials/shared/header.html   | 2 +-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 9708038..87cf74b 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -242,8 +242,12 @@
   }
 }
 
-/* Fonts */
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
+/* Fonts. Inter is loaded in head.html. Without this rule, text that has no
+   inter-* class, such as paragraphs written in Markdown, uses Bootstrap's
+   system font stack. */
+body {
+  font-family: "Inter", sans-serif !important;
+}
 
 /* Variables */
 :root {
diff --git a/layouts/partials/essentials/head.html b/layouts/partials/essentials/head.html
index a2fcfcc..d004fe7 100644
--- a/layouts/partials/essentials/head.html
+++ b/layouts/partials/essentials/head.html
@@ -45,3 +45,8 @@
 
 <!-- Custom CSS fixes -->
 <link rel="stylesheet" href="/css/list-alignment-fix.css">
+
+{{/*  Inter, the typeface that the font-family rules in style.css name  */}}
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap">
diff --git a/layouts/partials/shared/header.html b/layouts/partials/shared/header.html
index 32469f8..784e6b0 100644
--- a/layouts/partials/shared/header.html
+++ b/layouts/partials/shared/header.html
@@ -151,7 +151,7 @@
               <div class="navbar-right ms-lg-3">
                 <a
                   href="{{ site.Params.cta.link | relURL }}"
-                  class="btn btn-primary bg-second scale border-second animate">
+                  class="btn btn-primary bg-second scale border-second animate text-nowrap">
                   {{ site.Params.cta.text }}
                 </a>
               </div>