/* matchai 폰트 세이프 키트 — 한글이 어디서도 안 깨지게.
사용법: 각 서비스 안에 아래 한 줄만 추가하세요.
원리: 우리 도메인 Pretendard → jsdelivr → 시스템 한글 순으로 폴백하고,
한글 깨짐의 3대 원인(가짜 볼드·이탤릭 / iOS 확대 / 잘못된 줄바꿈)을 CSS로 차단합니다. */
@font-face{
font-family:'Pretendard';
font-style:normal; font-weight:45 920; font-display:swap;
src:local('Pretendard Variable'), local('Pretendard'),
url('https://matchai.kr/fonts/PretendardVariable.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2') format('woff2');
}
:root{
/* 한글+영문 공용 기본 폰트. 웹폰트가 실패해도 시스템 한글로 깔끔하게(바탕·굴림 아님) 떨어짐 */
--font-sans:'Pretendard', -apple-system, BlinkMacSystemFont, system-ui,
'Apple SD Gothic Neo','Malgun Gothic','맑은 고딕', Roboto, 'Noto Sans KR', sans-serif;
}
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; } /* iOS에서 글자 자동확대로 레이아웃 터지는 것 방지 */
body{
font-family:var(--font-sans);
word-break:keep-all; /* 한글을 단어 단위로 줄바꿈 (글자 하나씩 쪼개져 깨지는 것 방지) */
overflow-wrap:break-word; /* 긴 영문·URL이 화면 밖으로 넘치는 것 방지 */
font-synthesis:none; /* 가짜 볼드·가짜 이탤릭 금지 — 한글 뭉개짐의 최대 주범 */
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
/* ⚠️ 한글 터짐 방지 3대 규칙 — 새 서비스 만들 때 반드시!
① 한글에는 영문 전용 폰트(Fraunces·Cormorant·Playfair·Italiana 등) 절대 지정 금지.
→ 한글 글리프가 없어 제멋대로 폴백돼 깨집니다. 영문·숫자만 강조하려면 그 글자만
Vol.01 처럼 감싸세요.
② 한글에 font-style:italic 금지. 한글은 이탤릭체가 없어 '가짜 기울임'으로 뭉개집니다.
③ 화살표(→) № ♥ 같은 특수문자는 폰트마다 없을 수 있음 → 이모지나 인라인 SVG로 대체. */
.en{ font-family:'Fraunces', Georgia, 'Times New Roman', serif; } /* 영문·숫자 세리프 강조용 (한글 넣지 말 것) */