devmoa

지연 시간 없이 웹폰트 서빙하기 - Feat. Safari & Edge functions

뱅크샐러드·2022년 12월 13일·00
웹폰트Pretendardfont-displaywoff2SafariEdge웹 성능

AI 요약

Beta

뱅크샐러드에서 커스텀 웹폰트인 Pretendard를 적용하며 겪었던 경험을 공유하는 글입니다. `@font-face` 설정을 통해 폰트를 적용하는 기본적인 방법과 함께, 폰트 로딩 지연으로 인한 깜빡임(FOUC) 현상을 개선하기 위한 방법을 다룹니다.

특히 Safari와 Edge 브라우저에서 발생하는 문제를 해결하기 위해 `font-display: swap` 속성의 동작 방식을 설명하고, 폰트 파일을 미리 로드하는 `font-display: optional` 또는 `link` 태그를 활용하는 방안을 제시합니다. 이를 통해 사용자 경험을 저해하는 폰트 로딩 문제를 해결하고 웹사이트의 전반적인 성능을 향상시키는 방법을 알아봅니다.

이 글이 궁금하신가요?

원문 블로그에서 전체 내용을 확인해 보세요

원문 읽으러 가기

AI 추천 연관 게시글

이 글과 관련된 다른 기술 블로그 글을 AI가 추천합니다