https://velog.io/@ahyes/글자-깜빡임-현상FOITFOUT-해결하기 글을 참고해 더 나은 방법으로 적용할 수 있도록 여러 방법을 시도해봅시다.
사실 가장 좋은 방법은 기본 폰트를 사용하는 것이지만 어쩔 수 없이 다른 폰트를 사용해야 하는 경우에 최대한 문제없이 사용하도록 해보겠습니다. 🤔
첫 번째 방법 : link 태그
프로젝트에 구글 폰트를 적용하는 예시로 Nanum Gothic Coding을 적용하려합니다.
구글에서 제공하는 코드를 <head> 아래에 rel = preconnect or preload속성을 작성하게 되면 미리 외부 도메인과 연결을 설정하거나 폰트 리소스 요청 시점을 앞당길 수 있습니다.
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&display=swap" rel="stylesheet"/>
폰트를 다운받는데 114ms가 걸렸고 display=swap속성을 지정했기 때문에 폴백 폰트에서 지정 폰트로 변경되는 것을 볼 수 있습니다.
두 번째 방법 : font-face 이용하기
이때 폰트 파일의 url을 알아내 직접 css에 명시해야하기 때문에 다른 폰트를 예시로 변경하겠습니다.
프리텐다드 폰트를 예시로 작성하겠습니다.
@font-face를 작성하고 font-display를 지정해줍니다.
@font-face {
font-family: "Pretendard-Regular";
src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff")
format("woff");
font-weight: 400;
font-style: normal;
font-display: swap; //이곳
}FOUT 방식으로 폰트를 보여주는 다른 방법도 여러가지 존재하기는 합니다.
- font loading Module
- font face observer
만약 font-display나 font loading Module을 사용할 수 없는 버전을 고려한다면 font face observer 라이브러리 사용을 고려하면 좋을 것 같습니다. 하지만 제 프로젝트에선 고려하고 있지 않기 때문에 상대적으로 간단하게 적용할 수 있는 font-display 속성을 지정해주는 방식을 선택했습니다.
그리고 상대적으로 구글 폰트에서 제공하는 폰트가 용량이 작고, 다운속도가 프리텐다드에 비해 빨랐기 때문에 Nanum Gothic Coding을 사용하기로 선택했습니다. (네이버 폰트인데 구글에서 가져오기 🧐)
세 번째 방법 : font style matcher 사용해 폴백 폰트와 이질감 덜 느껴지게 하기
한글 폰트를 다음과 같이 변경해주면 이질감이 많이 사라지게 됩니다.
한글을 잘 맞췄지만 영어로 변경했을 때 다시 이질감이 드는 모습을 볼 수 있습니다.
이때 해결하는 방법은,
1. JS 정규식 이용
JS의 정규식으로 영어와 한글을 구분해 클래스를 추가해줘 font style matcher에서 조정한 스타일을 적용해줘도 됩니다.
const koreanTextRegex = /[\u3131-\uD79D]/ugi;
const englishTextRegex = /[A-Za-z]/;
if (koreanTextRegex.test(p.textContent)) {
// 한글이 포함되어 있으면 클래스 추가
p.classList.add('korean-text');
}
if (englishTextRegex.test(p.textContent)) {
// 영어가 포함되어 있으면 클래스 추가
p.classList.add('english-text');
}하지만 복잡하거나 세밀한 언어 스타일링이 필요한 경우엔 충분하지 않을 수 있으며 JS를 이용해 처리되기 때문에 페이지 로딩이나 렌더링 성능에 영향을 줄 수 있습니다. 따라서 이 방법을 사용하고 싶다면 SSR에서 적용하는 것이 좀 더 바람직할 것 같습니다.
2. unicode-range 이용
unicode-range를 이용해 특정 언어만 다른 폰트를 사용하는 방법도 존재합니다.
@font-face {
font-family: 'CustomFont';
src: url('NanumGothicCoding-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
unicode-range: U+AC00-D7A3; /* 한글 */
}
@font-face {
font-family: 'CustomFont';
src: url('NanumGothicCoding-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
unicode-range: U+0020-007F; /* 기본 라틴 알파벳 (영어) */
}
body {
font-family: 'CustomFont', monospace; /* 폴백으로 monospace 지정 */
}유니코드 범위
- 영문 (대문자) : U+0041-005A
- 영문 (소문자) : U+0061-007A
- 숫자 : U+0030-0039
- 한글 : U+AC00-U+D7A3
