@font-face / Font Preload

rabyeoljji·2024년 2월 3일

HTML/CSS (기반쌓기)

목록 보기

11/16

참고글 : https://yozm.wishket.com/magazine/detail/2107/, https://www.crocus.co.kr/1856

⭐ @font-face

로컬 폰트를 이용해 웹 폰트를 다운로드 하지 않고 빠르게 로딩하는 방법

CSS에 아래처럼 작성을 하고

@font-face {
    font-family: '폰트 이름';
    src: url(폰트파일의 위치);
}

font-family 속성에 '폰트 이름'을 그대로 적어주면 된다.

⭐ Font Preload

직역 : 폰트를 미리 로드하다.

브라우저가 폰트 파일을 백그라운드에서 미리 다운로드하여 폰트가 필요한 시점에 빠르게 로딩할 수 있도록 하는 방법
폰트 최적화 기법 중 하나

웹 폰트(Web Font)?
웹 페이지에서 사용되는 폰트를 온라인상에서 다운로드해서 쓸 수 있게 만들어진 폰트

📌 웹 폰트와 기존 폰트와의 차이점

기존에는 시스템에 폰트를 설치하는 구조였고, 설치되지 않은 폰트는 보여지지 않았음
웹 페이지에서 선택할 수 있는 폰트가 제한이 됨
시스템에 따라 다른 폰트로 웹 페이지를 보는 현상도 있을 수 있음
하지만, 웹 폰트를 이용하면 이용자의 시스템에 폰트가 없더라도 웹 페이지에 온라인상의 폰트를 적용하는 원리로 의도한 폰트를 이용자에게 보여줄 수 있음

📌 웹 폰트 최적화는 왜 필요할까?

FOIT (Flash Of Invisible Test) / FOUT(Flash Of Unstyled Text) 방지

웹 폰트가 동작하는 과정을 간단하게 살펴보면 브라우저가 HTML을 요청해서 DOM을 구성하고, CSS를 요청해서 CSSOM 구성하고, 그 이후에 렌더링에 필요한 폰트를 요청하는데 이 응답을 기다리지는 않고 렌더링을 진행하게 된다. 그렇기 때문에 발생할 수 있는 현상들이 있는데 그 현상들이 바로 FOIT와 FOUT이다.

FOIT (Flash Of Invisible Test)

웹 페이지가 렌더링 되었을 때, 필요한 폰트가 아직 준비되지 않아 사용자에게 일시적으로 글자가 보이지 않는 현상. 중요한 글자가 보이지 않는다면 의도와는 다른 정보가 전달 될 수 있어 치명적이다.

FOUT(Flash Of Unstyled Text)

글자 자체가 보이지 않는 FOIT와 달리, FOUT는 글자가 보이지만 기본 시스템 폰트로 표시되는 현상. 글자가 아예 보이지 않는 FOIT의 문제점을 해결하고자 나온 대안적인 현상. 모든 글자가 누락되는 것은 없어 치명적이지는 않지만 디자인 완성도를 떨어뜨리고 의도와는 다른 디자인이 이용자에게 노출된다던가, 기본 시스템 폰트에서 설정된 폰트로 다시 렌더링 될 때 글자들이 꿈틀거리는 현상이 있어 사용자 경험을 저하시킬 수 있음

이런 현상들을 방지하고자 하는게 웹 폰트 최적화 기법이다.

그 중에 웹 폰트 Preload 방법에 대해 알아보자.

📌 Font Preload 하는 방법

1. rel="preload"

<head>태그 내부에 rel="preload" 속성을 넣어 리소스 대기열의 우선순위를 높인다.

예)

<head\>
	<link
    	rell="preload"
        href="http://fonts.gstatic.com/s/notosanskr/......"
        as="font"
        type="font/woff2"
        crossorigin/>