인터넷이 조금 느린 환경이나 스마트폰에서 홈페이지에 접속했을 때, 배경과 이미지는 다 떴는데 글씨만 투명하게 안 보이다가 1~2초 뒤에 툭! 하고 나타나는 현상 겪어보셨나요?
이것을 개발 용어로 FOIT (Flash of Invisible Text) 현상이라고 부릅니다. 사이트가 무겁고 엉성해 보이게 만드는 가장 큰 원인 중 하나입니다.

1. 단 한 줄의 CSS로 해결: font-display: swap;

폰트가 다운로드되는 시간을 기다리게 하지 마세요! 폰트를 불러오는 CSS 코드에 font-display: swap; 단 한 줄만 추가하면 마법처럼 문제가 해결됩니다.
이 속성을 주면, 웹 폰트가 다운로드되기 전까지 방문자의 기기에 있는 '기본 폰트'로 글자를 먼저 즉시 보여주고, 다운로드가 완료되면 자연스럽게 예쁜 웹 폰트로 스와핑(교체)해 줍니다. 방문자는 답답함 없이 즉각적으로 내용을 읽을 수 있습니다.

/* CSS 웹 폰트 설정 예시 */
@font-face {
    font-family: 'Pretendard';
    src: url('Pretendard-Regular.woff2') format('woff2');
    
    /* 폰트 로딩 전 투명해지는 현상 완벽 방지 (핵심 코드) */
    font-display: swap; 
}

2. 애초에 폰트 용량을 확 줄여버리자! (WOFF2 포맷)

웹사이트에 글꼴을 올릴 때, 윈도우/맥에 설치할 때 쓰는 TTF나 OTF 파일을 그대로 올리면 절대 안 됩니다. 웹 전용으로 압축률이 가장 뛰어난 WOFF2 포맷을 사용해야 합니다.
추가로 불필요한 외계어나 한자 등을 제거하고 실사용 한글만 남긴 '서브셋(Subset)' 폰트를 사용하면, 수 메가바이트(MB)짜리 폰트를 수백 킬로바이트(KB) 수준으로 90% 이상 획기적으로 줄일 수 있습니다.