Skip to content

ops(frontend): self-host fonts via @fontsource — eliminates build-time Google Fonts dependency #98

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dackclup merged 1 commit into from
May 17, 2026
+72 −25
Merged

ops(frontend): self-host fonts via @fontsource — eliminates build-time Google Fonts dependency #98

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 30 additions & 2 deletions frontend/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,38 @@
@tailwind components;
@tailwind utilities;

/* Fonts wired via next/font in app/layout.tsx; CSS variables exposed
* here so any utility class or inline style can reference them. */
/* PR 4.5d follow-up — self-hosted fonts via @fontsource packages.
* Replaces the previous `next/font/google` path that broke on a
* transient Google Fonts fetch failure during CI build (PR #96
* CI run #249, 2026-05-17). @fontsource ships woff2 files bundled
* in node_modules; no build-time external fetch.
*
* IBM Plex Sans, JetBrains Mono — weights 400 / 500 / 600 / 700
* (Plex) and 400 / 500 / 600 (JetBrains). Instrument Serif —
* weight 400 normal + italic. Matches the prior `next/font/google`
* config exactly. Each `@import` pulls one woff2 + its @font-face
* declaration.
*
* Font family CSS variables sit alongside the legacy
* `--font-{ibm-plex-sans, jetbrains-mono, instrument-serif}`
* names so existing utility classes + inline-style consumers
* (StockLogo.tsx: `fontFamily: 'var(--font-mono)'`) keep working
* without rename. */
@import '@fontsource/ibm-plex-sans/400.css';
@import '@fontsource/ibm-plex-sans/500.css';
@import '@fontsource/ibm-plex-sans/600.css';
@import '@fontsource/ibm-plex-sans/700.css';
@import '@fontsource/jetbrains-mono/400.css';
@import '@fontsource/jetbrains-mono/500.css';
@import '@fontsource/jetbrains-mono/600.css';
@import '@fontsource/instrument-serif/400.css';
@import '@fontsource/instrument-serif/400-italic.css';

:root {
color-scheme: light;
--font-ibm-plex-sans: 'IBM Plex Sans';
--font-jetbrains-mono: 'JetBrains Mono';
--font-instrument-serif: 'Instrument Serif';
--font-sans: var(--font-ibm-plex-sans), ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-mono: var(--font-jetbrains-mono), ui-monospace, SFMono-Regular, Menlo, monospace;
--font-serif: var(--font-instrument-serif), ui-serif, Georgia, serif;
Expand Down
32 changes: 9 additions & 23 deletions frontend/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,15 @@
import type { Metadata } from 'next';
import { IBM_Plex_Sans, Instrument_Serif, JetBrains_Mono } from 'next/font/google';
import './globals.css';
import { Disclaimer } from '@/components/Disclaimer';

const ibmPlexSans = IBM_Plex_Sans({
subsets: ['latin'],
weight: ['400', '500', '600', '700'],
display: 'swap',
variable: '--font-ibm-plex-sans',
});

const jetbrainsMono = JetBrains_Mono({
subsets: ['latin'],
weight: ['400', '500', '600'],
display: 'swap',
variable: '--font-jetbrains-mono',
});

const instrumentSerif = Instrument_Serif({
subsets: ['latin'],
weight: ['400'],
style: ['normal', 'italic'],
display: 'swap',
variable: '--font-instrument-serif',
});
// PR 4.5d follow-up — self-host all 3 fonts via @fontsource packages
// (SIL Open Font License). Previous `next/font/google` path failed
// CI on 2026-05-17 (PR #96 CI run #249, NextFontError: Failed to
// fetch IBM Plex Sans from Google Fonts) on a transient Google
// Fonts network blip. @fontsource bundles the woff2 files into
// node_modules so the build never touches an external host. CSS
// variables `--font-{ibm-plex-sans, jetbrains-mono, instrument-serif}`
// are now declared in globals.css instead of injected by `next/font`.

export const metadata: Metadata = {
title: 'QuantRank',
Expand All @@ -33,7 +19,7 @@ export const metadata: Metadata = {

export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" className={`${ibmPlexSans.variable} ${jetbrainsMono.variable} ${instrumentSerif.variable}`}>
<html lang="en">
<body>
<header className="border-b border-slate-200 bg-white">
<div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-4">
Expand Down
30 changes: 30 additions & 0 deletions frontend/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@
"lint": "next lint"
},
"dependencies": {
"@fontsource/ibm-plex-sans": "^5.2.8",
"@fontsource/instrument-serif": "^5.2.8",
"@fontsource/jetbrains-mono": "^5.2.8",
"next": "14.2.15",
"react": "18.3.1",
"react-dom": "18.3.1",
Expand Down