Font preroad란?(웹 개발에서의 폰트)

📚학습 계획

1. 웹 개발에서의 Font
2. Font preroad란?
3. 웹 폰트 최적화 방법

---

✍ 웹 개발에서의 Font

웹에서 폰트는 font-family라는 css 속성을 통해 선언 가능하며, 폰크게 로컬 폰트와 웹 폰트로 나눌 수 있다.

✔ Local Font

사용자의 컴퓨터나 기기에 이미 설치되어 있는 폰트

• 로컬 폰트를 사용하면 폰트 파일을 다운로드할 필요가 없으므로 웹 페이지 로딩 속도 향상
• 웹 폰트와 달리 기기별로 지원하는 폰트가 제한적
• 웹 폰트 로딩이 불가한 상황을 대비하여 보편적인 로컬 폰트를 대체 폰트로 지정하여 활용하기도 함

---

✔Web Font

다양한 브라우저 간에 웹 사이트가 일관되게 표시되고 작동되도록 하는 개발적인 측면을 강조

• 다양한 폰트를 웹 페이지에서 사용할 수 있음
• 브라우저에서 폰트 파일을 다운로드해야 하므로 로딩 시간이 증가
• html에서 link 태그를 통해 링크로 가지고 오거나, Css에서 import할 수 있다.
• TrueType(TTF), OpenType(OTF), Web Open Font Format(WOFF), Web Open Font Format 2(WOFF2), Embedded OpenType(EOT) 등의 포맷으로 제공

---

✍ Font preroad란?

✔개념

웹 페이지를 표시할 때 폰트 파일을 빠르게 사용할 수 있도록 하는 기술

웹 페이지에 특정 폰트가 사용되는 경우, 폰트 파일을 다운로드하고 렌더링하는 과정이 시간이 걸릴 수 있다. 폰트 렌더링이 딜레이된다면 사용자가 웹 페이지를 처음 방문할 때 글꼴이 제대로 표시되지 않을 수도 있다.

폰트 프리로드란 사용자가 웹 페이지를 방문하기 전에 폰트 파일을 미리 다운로드하게 되어, 로딩 속도를 개선할 수 있는 기술을 의미한다.

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin> link 태그에 preload를 선언하여 사용할 수 있다.

---

✔Subsetting Font

서브셋 폰트는 웹 폰트에서 실제로 사용되는 문자 집합만을 포함하도록 재조정된 폰트

일반적으로 웹 폰트에는 모든 문자와 기호가 포함되어 있기 때문에 폰트 파일의 크기가 커질 수 있다. 그러나 웹 페이지에서는 대개 일부 문자만 사용되기 때문에 웹 폰트 파일의 크기를 줄이기 위해 서브셋 폰트를 사용한다.

서브셋 폰트를 사용하면 사용자가 해당 웹 페이지를 방문할 때, 필요한 문자만을 담은 작은 폰트 파일만 다운로드하기 때문에 웹 페이지의 로딩 속도를 개선할 수 있다.

---