폰트 적용 코드
<head>
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
<link rel="preload" as="font" type="font/woff2" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/PretendardVariable.woff2" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css" />
</head>
페이지 내에 <head> 안에 pretendard를 로드해주고,
css에서 아래와 같이 적용하면 됨.
body,input,textarea,select,button,table{
color: #101010;
font-size: 12px;
line-height: 16px;
font-family: 'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,"Malgun Gothic","맑은 고딕",helvetica,"Apple SD Gothic Neo",'Noto Sans KR',sans-serif;
font-weight: 500;
letter-spacing: -0.4px;
}
preload 사용 이유
<link rel="preload" as="font">를 사용하면 브라우저가 미리 폰트를 요청하기 때문에 렌더링 지연(FOUT)이 줄어들고 텍스트 깜빡이는 현상이 줄어들게 됨.
유의점
- as="font" 는 꼭 명시해야 함.
- type="font/woff2"를 넣으면 브라우저가 명확하게 처리해줌.
- crossorigin 속성은 반드시 필요함.
- <head>에 삽입해야 브라우저 TCP 연결 속도 향상에 좋음.
CDN 비교
| CDN | jsDelivr | cdnjs | unpkg |
| 신뢰성 | 매우 높음 | 높음 | 보통(npm 기반, cloudflare 캐시) |
| 속도 | 빠름 | 빠름 | 가끔 느림 |
| 버전 관리 | Semver 지원 | 버전 디렉토리 불편 | npm 기준 자동 |
| 기타 특징 | GitHub, npm, WordPress 연동 | 정적 자산에 강함 | 자동 업데이트 편함 |
pretendard CDN은 위 3곳에서 지원하고 있음.
개인적으로 jsDelivr가 글로벌 CDN에 빠르게 배포되며, font-display: swap 옵션과도 잘 맞기 때문에 웹 성능에 유리하고 또한 Cloudflare와 Fastly를 동시 지원으로 장애 시에도 안정적이기 때문에 jsDelivr를 1순위로 사용하는 것을 추천함~
728x90
반응형
'웹 스터디노트 > CSS' 카테고리의 다른 글
| 웹폰트 사용 시 @import와 <link> 방식 중 어떤 걸 써야할까? (0) | 2025.04.18 |
|---|---|
| [css] & nesting 선택자 (0) | 2025.02.13 |
| css로 요소 1개인지 체크방법 (0) | 2024.01.31 |
| 갤럭시 폴드의 실제 가로 해상도는 345px (0) | 2024.01.29 |
| 마우스 커서를 이미지로 변경하기 (0) | 2023.09.22 |
| [CSS] ":nth-child()"로 몇 번부터 몇 번까지 선택하기 (0) | 2023.08.21 |
| [css] 텍스트 안에 그라데이션 배경 움직여보기 (0) | 2023.06.08 |
| 최근 네이버 CSS 초기화 코드 (mo/pc) (0) | 2023.05.25 |
댓글