폰트 깨짐 현상 방지 완벽 가이드: 웹 폰트(Google Fonts) 안전하게 불러오는 5가지 핵심 방법

폰트 깨짐 현상 방지 웹 폰트(Google Fonts) 안전하게 불러오고 적용하기

웹 폰트(Google Fonts) 안전하게 불러오는 5가지 핵심 방법

구글 폰트를 preconnect와 font-display: swap으로 올바르게 불러오면 폰트 깨짐 현상 없이 빠르고 안정적으로 웹 폰트를 적용할 수 있다. 폰트 하나만 제대로 설정해도 블로그의 첫인상이 완전히 달라진다.

블로그에 예쁜 폰트 적용했는데 일부 기기에서 이상한 글씨체로 보이거나, 아예 글자가 잠깐 안 보이는 현상을 경험한 사람 많을 것이다. 이게 다 웹 폰트 로딩 설정 문제다.

 

📋 목차

• 폰트 깨짐 현상의 종류: FOUT와 FOIT 이해
• Google Fonts 올바르게 불러오는 방법
• font-display 속성으로 로딩 전략 선택
• preconnect로 폰트 로딩 속도 개선
• 폰트 서브셋으로 파일 크기 줄이기
• 폴백 폰트(fallback font) 설정
• 티스토리 블로그 웹 폰트 적용 실전

🔍 폰트 깨짐 현상의 종류: FOUT와 FOIT 이해

"폰트 깨짐" 현상은 크게 두 가지로 나뉜다. FOUT(Flash of Unstyled Text)는 웹 폰트 로딩 전에 시스템 폰트가 먼저 보이다가 웹 폰트로 교체되는 현상이다. 글자가 잠깐 다른 폰트로 보였다가 바뀌는 경험이 바로 이것이다.

FOIT(Flash of Invisible Text)는 반대로 웹 폰트가 로드될 때까지 글자가 아예 안 보이는 현상이다. 폰트 파일을 기다리는 동안 텍스트 공간은 있는데 글자가 없어 보이는 현상이다.

어느 쪽도 좋은 사용자 경험이 아니다. 이걸 조절하는 게 font-display 속성이다.

🌐 Google Fonts 올바르게 불러오는 방법

"구글 폰트"를 불러오는 가장 기본적인 방법은 link 태그를 사용하는 것이다. 하지만 기본 방법에 preconnect를 추가하면 훨씬 빠르게 로딩된다.

 

preconnect는 폰트 서버와 미리 연결을 맺어두어 실제 폰트 파일을 요청할 때 지연이 줄어든다. 이 설정 하나로 폰트 로딩 시간이 눈에 띄게 단축된다.

⚙️ font-display 속성으로 로딩 전략 선택

"폰트 깨짐" 현상을 제어하는 핵심 속성이 font-display다. 다섯 가지 값이 있다.

auto는 브라우저 기본 동작을 따른다. block은 웹 폰트 로딩 중 텍스트를 숨긴다(FOIT). swap은 시스템 폰트를 먼저 보여주다가 웹 폰트로 교체한다(FOUT). fallback은 100ms 내에 로드되지 않으면 시스템 폰트 유지, 이후에도 느리면 교체 안 함. optional은 네트워크 상태에 따라 웹 폰트 적용 여부를 브라우저가 결정한다.

블로그에서는 swap이 가장 널리 쓰인다. 구글 폰트 URL에 &display=swap을 붙이면 자동으로 적용된다.

font-family: 'Noto Sans KR', sans-serif;

⚡ preconnect로 폰트 로딩 속도 개선

preconnect는 브라우저에게 "이 도메인에 곧 연결할 거야, 미리 준비해"라고 알려주는 힌트다. DNS 조회, TCP 핸드셰이크, TLS 협상을 미리 처리해두기 때문에 실제 요청 때 시간이 단축된다.

구글 폰트는 fonts.googleapis.com에서 CSS를 받고, 실제 폰트 파일은 fonts.gstatic.com에서 받는다. 그래서 두 도메인 모두 preconnect를 해주는 게 좋다.

 

crossorigin 속성은 폰트 파일이 다른 출처(cross-origin) 서버에서 오기 때문에 붙여야 한다. 없으면 CORS 문제가 생길 수 있다.

✂️ 폰트 서브셋으로 파일 크기 줄이기

한국어 폰트는 영어 폰트에 비해 파일 크기가 훨씬 크다. 한글 자모 조합이 방대하기 때문이다. 구글 폰트의 경우 subset 파라미터로 필요한 문자셋만 요청할 수 있다.

Noto Sans KR은 구글 폰트에서 자동으로 필요한 subset만 최적화해서 제공하지만, 영문 폰트와 함께 쓸 때는 언어를 명시하면 더 작은 파일을 받을 수 있다.

/* 한국어만 사용 */
family=Noto+Sans+KR:ital,wght@0,400;0,700&subset=korean

직접 서버에 폰트를 올릴 때는 woff2 포맷을 우선 사용하자. 웹 폰트 포맷 중 압축률이 가장 좋다.

🔄 폴백 폰트(fallback font) 설정

웹 폰트 로딩에 실패하거나 느릴 때를 대비해 폴백 폰트를 반드시 설정해야 한다. font-family에 웹 폰트 이름 다음에 시스템 폰트를 나열하면 된다.

body {
font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic',
sans-serif;
}

Apple SD Gothic Neo는 iOS와 macOS의 기본 한국어 폰트고, 맑은 고딕은 윈도우 기본 한국어 폰트다. 이렇게 설정해두면 웹 폰트가 안 로드돼도 비슷한 느낌의 폰트로 표시된다.

🏠 티스토리 블로그 웹 폰트 적용 실전

티스토리에서 "구글 폰트"를 적용하는 가장 좋은 방법은 스킨 편집 → HTML 탭의 head 태그 안에 preconnect와 폰트 링크를 추가하는 것이다. CSS 탭에서 body나 전체 선택자에 font-family를 설정하면 된다.

/* 스킨 CSS에 추가 */
body, p, h1, h2, h3, li, a {
font-family: 'Noto Sans KR', sans-serif;
}

티스토리는 기본 폰트 설정이 별도로 되어 있는 경우가 있으니, 적용 후 개발자 도구에서 실제로 원하는 폰트가 적용됐는지 확인하는 게 좋다. Computed 탭에서 font-family를 보면 확인할 수 있다.

---

출처 및 참고
- Google Fonts: https://fonts.google.com
- web.dev font best practices: https://web.dev/articles/font-best-practices
- MDN font-display: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display