[fix] Load InterDisplay on production (headings were silently falling back to Inter)

apps/website/README.md

@@ -216,11 +216,28 @@ These are loaded by the shared UI library (`libraries/ui/src/default-config/tail
 - `frontend-example` — example app
 - `app-template` — template for new apps
 
-**Website-specific fonts (loaded via next/font):**
+**Inter fonts (next/font here, HTTPS for every other app):**
 - `Inter-*.woff2` - Body text (weights: 400, 500, 600, 700)
-- `InterDisplay-*.woff2` - Headlines (weights: 400, 500, 600, 700)
+- `InterDisplay-*.woff2` - Headlines (weights: 400, 500, 600, 700), subsetted
 - `Inter-OFL.txt` - SIL Open Font License for Inter fonts
 
+The shared UI library's `@font-face` rules point every other app at these same files, so replacing them changes typography monorepo-wide, not just on the website.
+
+`InterDisplay-*.woff2` is subsetted to latin + latin-ext (~106kB → ~42kB per weight). Glyphs outside that range fall back to Inter, which is full-coverage and sits next in the stack. If you upgrade the font, re-subset the new full-coverage originals:
+
+```bash
+python3 -m fontTools.subset InterDisplay-Regular.woff2 \
+  --output-file=InterDisplay-Regular.woff2 --flavor=woff2 \
+  --unicodes='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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD,U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF' \
+  --layout-features+=ss01,ss02,ss03,ss04,cv01,cv02,tnum,case,zero
+```
+
+`--layout-features+=` is load-bearing — `--layout-features='+ss04'` silently empties GSUB with no error, and the homepage/lander section headings set `fontFeatureSettings: "'ss04' on"`. Verify it survived:
+
+```bash
+python3 -c "from fontTools.ttLib import TTFont; f=TTFont('InterDisplay-Regular.woff2'); print('ss04' in {r.FeatureTag for r in f['GSUB'].table.FeatureList.FeatureRecord})"
+```
+
 For complete font licensing information, see `/public/fonts/README.md`
 
 ## Need Help?

apps/website/src/components/homepage/CourseValueProps.tsx

@@ -5,7 +5,7 @@ const Header = () => (
   <div className="flex flex-col items-center gap-8 max-w-4xl mx-auto text-center">
     <div className="flex flex-col gap-5">
       <h2
-        className="text-size-xl font-medium leading-snug text-bluedot-navy tracking-tighter"
+        className="bluedot-h2 font-medium tracking-tighter"
         style={{ fontFeatureSettings: '\'ss04\' on' }}
       >
         Start making an impact today

apps/website/src/components/homepage/EventsSection.tsx

@@ -315,7 +315,7 @@ const EventsSection = () => {
         <div className="flex flex-col items-center text-center gap-8 bd-md:gap-12 mb-12 xl:mb-16">
           <h2
             id="events-section-heading"
-            className="text-size-xl font-medium leading-snug text-bluedot-navy tracking-tighter max-w-[666px]"
+            className="bluedot-h2 font-medium tracking-tighter max-w-[666px]"
             style={{ fontFeatureSettings: '\'ss04\' on' }}
           >
             Join an event near you

apps/website/src/components/homepage/MergedLadder.tsx

@@ -40,7 +40,7 @@ const RungHeader = ({ rung }: { rung: Rung }) => (
       {rung.step}
     </Eyebrow>
     <h2
-      className="text-size-xl font-medium leading-snug text-bluedot-navy tracking-tighter"
+      className="bluedot-h2 font-medium tracking-tighter"
       style={{ fontFeatureSettings: '\'ss04\' on' }}
     >
       {rung.title}

apps/website/src/components/lander/TestimonialCarousel.tsx

@@ -173,10 +173,6 @@ const TestimonialCarousel = ({
     ? 'Our community'
     : 'Meet our alumni shaping AI\'s future';
 
-  const headerSizeClasses = variant === 'homepage'
-    ? 'text-size-xl bd-md:text-size-2xl'
-    : 'text-size-xl';
-
   return (
     <section className="w-full bg-white py-12 md:py-16 lg:py-20 xl:py-24 px-5 bd-md:px-8 lg:px-12 xl:px-16 2xl:px-20">
       {/* Header Container */}
@@ -187,10 +183,7 @@ const TestimonialCarousel = ({
           <div className="flex flex-col gap-8">
             {variant === 'homepage' ? (
               <h2
-                className={clsx(
-                  headerSizeClasses,
-                  'font-medium leading-snug text-bluedot-navy tracking-tighter',
-                )}
+                className="bluedot-h2 font-medium tracking-tighter"
                 style={{ fontFeatureSettings: '\'ss04\' on' }}
               >
                 {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */}

apps/website/src/lib/fonts.ts

@@ -46,12 +46,10 @@ export const interDisplay = localFont({
       weight: '600',
       style: 'normal',
     },
-    {
-      path: '../../public/fonts/InterDisplay-Bold.woff2',
-      weight: '700',
-      style: 'normal',
-    },
   ],
   variable: '--font-inter-display',
   display: 'swap',
+  // Skip the generated Arial-based fallback so the swap falls through to preloaded
+  // Inter instead: same typeface, different optical size.
+  adjustFontFallback: false,
 });

apps/website/src/pages/_app.tsx

@@ -15,7 +15,7 @@ import '../globals.css';
 import BugReportProvider, { useBugReport } from '../hooks/useBugReport';
 import '../lib/axios'; // Configure axios-hooks
 import { FOAI_COURSE_SLUG } from '../lib/constants';
-import { inter } from '../lib/fonts';
+import { inter, interDisplay } from '../lib/fonts';
 import { useCourses } from '../lib/hooks/useCourses';
 import { reportClientError } from '../lib/reportClientError';
 import { trpc } from '../utils/trpc';
@@ -81,7 +81,7 @@ const AppContent: React.FC<AppProps> = ({ Component, pageProps }) => {
   };
 
   return (
-    <div className={inter.className}>
+    <div className={`${inter.className} ${interDisplay.variable}`}>
       <Head>
         <title>BlueDot Impact</title>
         <link rel="icon" href="/favicon.ico" />