castad
/
o2o-infinith-demo
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Pretendard self-host + 한글 시스템 폰트 fallback 체인 강화 

데모 환경에서 CDN(jsdelivr)·Google Fonts 차단된 망에서 Pretendard 가
로드되지 않아 명조체로 렌더링되는 문제 해결.

- public/fonts/PretendardVariable.woff2 self-hosting (~2MB, weight 45-920)
- @font-face 직접 정의 + <link rel="preload"> 로 첫 페인트 가속
- fallback 체인에 Apple SD Gothic Neo / Malgun Gothic / Noto Sans KR 추가
  → 어떤 OS에서도 한글이 명조체로 떨어지지 않음
- 기존 jsdelivr CDN 은 백업 경로로 유지 (3중 안전망)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
main
Haewon Kam 2026-04-15 11:03:04 +09:00
parent 105e8288e0
commit 7dff2b7244
3 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -4,9 +4,13 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>INFINITH - Infinite Marketing</title> <title>INFINITH - Infinite Marketing</title>
<!-- Self-hosted Pretendard Variable preload (CDN 차단 망 대비) -->
<link rel="preload" href="/fonts/PretendardVariable.woff2" as="font" type="font/woff2" crossorigin />
<!-- Google Fonts: Inter + Playfair Display (영문 — fallback 안전) -->
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,900;1,400&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,900;1,400&display=swap" rel="stylesheet">
<!-- 백업 CDN (self-host 실패 대비) -->
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css" /> <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css" />
</head> </head>
<body> <body>

BIN
public/fonts/PretendardVariable.woff2 Normal file
View File

Binary file not shown.

14
src/index.css
View File

@ -1,8 +1,18 @@
@import "tailwindcss"; @import "tailwindcss";
/* Self-hosted Pretendard Variable — CDN/네트워크 차단 환경에서도 동일 렌더링 보장 */
@font-face {
font-family: 'Pretendard Variable';
font-weight: 45 920;
font-style: normal;
font-display: swap;
src: url('/fonts/PretendardVariable.woff2') format('woff2-variations');
}
@theme { @theme {
--font-sans: "Pretendard Variable", "Pretendard", "Inter", ui-sans-serif, system-ui, sans-serif; /* fallback 체인: self-host Pretendard → CDN Pretendard → Inter → 한글 시스템 폰트 (Mac/Win/Android) → sans-serif */
--font-serif: "Playfair Display", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-sans: "Pretendard Variable", "Pretendard", "Inter", "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Noto Sans KR", ui-sans-serif, system-ui, sans-serif;
--font-serif: "Playfair Display", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
--color-primary-900: #0A1128; /* Dark Navy for text and buttons */ --color-primary-900: #0A1128; /* Dark Navy for text and buttons */
--color-primary-800: #1A2B5E; --color-primary-800: #1A2B5E;