Repository navigation
[global] next/font/google을 로컬 폰트로 바꿔 빌드 실패 차단 - #281
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![pr-agent-demo[bot]](https://avatars.githubusercontent.com/in/3949189?s=60&v=4){kind=small}
There was a problem hiding this comment.
Pull Request Summary
This PR replaces next/font/google across all apps with locally bundled fonts loaded through next/font/local and @fontsource, to prevent CI build failures caused by intermittent Google Fonts responses.
It introduces a shared font configuration module at packages/shared/src/fonts, exports a common fontVariables string, and updates six app layouts to stop importing fonts directly from next/font/google.
The change also preserves the existing CSS font variables (--font-sans, --font-mono, --font-pixel), font-family names, display strategy, and preload behavior as closely as possible, while moving DM Sans and JetBrains Mono to variable fonts from @fontsource-variable.
What Changed
-
Removed
next/font/googlefont setup from all app layouts- Affected apps:
adminclientdocsoauthprojectsstatus
- Previously, each app independently configured:
DM_SansJetBrains_MonoPress_Start_2P
- These repeated definitions were removed.
- Affected apps:
-
Introduced a shared font module
- New file:
packages/shared/src/fonts/index.ts - Exported via
@repo/shared/fonts - Provides a single
fontVariablesvalue used by all apps.
- New file:
-
Fonts are now loaded locally
- Uses:
@fontsource-variable/dm-sans@fontsource-variable/jetbrains-mono@fontsource/press-start-2p
- These are loaded through
next/font/localinstead of fetching Google Fonts at build time.
- Uses:
-
Added package dependencies
- Updated
packages/shared/package.json - Updated
pnpm-lock.yaml
- Updated
-
Kept
Galmuriapp-localGalmuri11remains defined directly in app layouts where used, because it was already local.
Main Motivation
The PR fixes a CI instability issue: next/font/google depended on Google Fonts during build, and intermittent malformed or failing font URLs caused builds to fail even when the application code itself was unchanged.
By switching to local @fontsource assets, the build no longer depends on Google Fonts availability.
This closes issue #277.
Notable Implementation Details
-
Latin and latin-ext subsets are separated
- Each font is split into:
latinlatin-ext
- This mimics the previous Google Fonts behavior more closely.
- Each font is split into:
-
unicode-rangeis declared manually- Because
next/font/localdoes not support per-srcunicode-rangedirectly, each subset is registered as a separate font entry with matchingfont-familyand explicitunicode-range.
- Because
-
Preload behavior is preserved
latinfonts are preloaded.latin-extfonts are registered but not preloaded.
-
Variable fonts are used for DM Sans and JetBrains Mono
- This avoids increasing preload file count.
- Weight ranges are constrained to match previous usage:
DM Sans:400 700JetBrains Mono:400 600
-
CSS variable names remain unchanged
--font-sans--font-mono--font-pixel- This keeps existing Tailwind/global CSS references working.
Verification Mentioned in the PR
The author states that:
- Builds for all 6 apps pass
- Type checks pass
- Tests pass
- Lint passes
- Before/after generated CSS was compared for:
- font-family names
- CSS variables
- latin / latin-ext unicode ranges
- preload file count
Potential Review Areas
This is a global styling / build-infrastructure change, so the main review risks are around visual consistency and font loading behavior:
-
Font fallback metrics may differ slightly
- The PR notes that
adjustFontFallbackvalues changed by about 1–2%, which could affect layout during font loading.
- The PR notes that
-
Subset coverage is narrower than before
- Cyrillic, Greek, and Vietnamese subsets were intentionally not included.
- Those characters would now fall back to system fonts.
-
Unused variables with lint disables
- Some
latin-extfont constants exist only to generate@font-facedeclarations, requiringeslint-disable-next-line @typescript-eslint/no-unused-vars.
- Some
-
Dependency footprint increases
- Three new font packages are added to the shared package.
Overall
This PR is a reliability-focused refactor that removes a flaky external build dependency, centralizes font configuration, and preserves the existing font architecture as closely as possible. The primary risk is not functional behavior, but subtle rendering differences during font loading or for characters outside the retained latin/latin-ext subsets.
3 inline comment(s)
개요 💡
모든 앱이
next/font/google로 빌드 시점에 Google Fonts에서 폰트를 받는데, Google이 간헐적으로 확장자 없는 폰트 URL을 돌려주면 Next 로더가null[1]에서 터져 CI 빌드가 코드와 관계없이 실패하였습니다. 업스트림 수정이 아직 릴리스되지 않아, 폰트를@fontsource패키지에서next/font/local로 불러오도록 전환하였습니다. 빌드가 더 이상 Google Fonts에 요청하지 않습니다.작업내용 ⌨️
packages/shared/src/fonts: 6개 앱에 복제되어 있던DM_Sans,JetBrains_Mono,Press_Start_2P설정을 공통 모듈로 모으고,<html>className에 넣을fontVariables를 내보내도록 하였습니다.@repo/shared/fonts로 가져옵니다.layout.tsx에서next/font/google을 제거하고fontVariables를 사용하도록 변경하였습니다. Galmuri는 기존처럼 각 앱에 두었습니다.--font-sans,--font-mono,--font-pixel변수, 굵기,display: 'swap', font-family 이름('DM Sans'등)은 그대로 유지하였습니다.globals.css의.font-pixel,.font-code가 이 이름을 직접 참조합니다.next/font/local은 src 항목마다unicode-range를 줄 수 없어 subset마다 따로 호출하고 같은 font-family를 지정하였습니다. Google Fonts처럼 latin만 preload하고, latin-ext는 해당 문자가 쓰일 때만 받습니다.DM Sans,JetBrains Mono는 이슈에서 제안한 정적 굵기 파일 대신@fontsource-variable/*의 가변 폰트를 사용하였습니다. 기존 빌드에서도 Google이 가변 폰트 한 파일을 주고 있었고, 정적 파일을 쓰면 preload가 3개(약 90KB)에서 8개(약 134KB)로 늘어나기 때문입니다. 굵기는 기존 범위(400 700,400 600)로 제한하였습니다. 패키지는 모두 OFL-1.1입니다.검증
client빌드 CSS를 비교하여 font-family 이름, CSS 변수, latin/latin-extunicode-range, preload 파일 수(Galmuri 포함 4개)가 같은 것을 확인하였습니다.관련 이슈 🚨
리뷰 요청사항 👀
DM Sanssize-adjust 104.53% → 105.13%). 폰트를 받은 뒤의 화면은 같지만, 로딩 중 레이아웃 흔들림이 없는지 확인 부탁드립니다.JetBrains Mono,Press Start 2P의 cyrillic, greek, vietnamese 파일도 포함되어 있었으나, 이슈 범위에 맞춰 latin, latin-ext만 넣었습니다. 해당 문자는 대체 폰트로 보입니다.@font-face만 만들면 되지만next/font가 const 할당을 요구하여, 쓰지 않는 변수에eslint-disable-next-line을 달았습니다.