Font란?
웹 폰트는 웹 페이지에서 사용되는 폰트를 온라인상에서 다운로드하여 쓸 수 있는 기술이다. 이전은 사용자가 시스템에 설치되 있던 폰트만 사용할 수 있었다. 이러한 상황으로 다양한 선택지와 모든 사용자들이 일관되게 폰트를 볼 수 있는지에 대해 문제가 생겼다.
이를 웹폰트를 이용해 극복할 수 있었고, 다양한 폰트를 사용할 수 있게 되었다.
이로 인해 웹에서는 웹 폰트의 중요성이 상당히 많은 부분을 차지하고 있다!
Font-Preload
Font preload는 웹 폰트를 미리 로드하는 방법이다.
Font preload 방법에는 여러가지가 있다. 우선 FOIT/FOUT 기간을 최소화 하기 위해
웹 폰트를 가능한 빠르게 로딩을 시작할 때
<head/>
<link rel="preload">를 사용해서, 브라우저에 가능한 빠르게 폰트를 다운로드 하게 할 수 있다.가능한
<head>
의 가장 앞자리에 설정하는 것이 좋다.
여기서 FOIT(Flash Of Invisible Text)는 웹페이지가 렌더링 되었을 때, 필요한 폰트가 아직 준비되지 않아 사용자게에게 일시적으로 글자가 보이지 않는 현상을 말한다.
FOUT(Flash Of Unstyled Text)는 글자가 보이지만 기본 시스템 폰트로 표시되는 현상을 말한다.
로컬폰트 있을 때 로딩하는 방법!
CSS에 폰트를 선언하게 되면 시스템에 폰트 유무와 관계없이 무조건 폰트를 다운로드하게 되어 불필요한 리소스를 요청하게된다. 이를 방지하기 위해 local 문법을 앞에 선언해주면 시스템에 설치되어 있다면 리소스를 요청하지 않는다.
@font-face {
font-family: <a-remote-font-name>;
src: <source> [,<source>]*;
[font-weight: <weight>]; // font 굵기 값
[font-style: <style>]; // font 스타일 값
}웹 폰트만 로딩해야되는 상황에서 최적화 기법
- WOFF(Web Open Font Format)
WOFF는 모질라 파운데이션과 오페라 소프트웨어, 타입키트, 그리고 마이크로소프트가 협력하여 개발한 웹폰트이다. TTF, OTF와 동일하지만 더 작은 파일의 크기를 가지고 있다. 2010년에 출시하여 2012년에 W3C에 권장 사항으로 등록되어 모든 브라우저에서 이 형식을 지원한다.
@font-face {
font-family: 'Nanum Gothic';
src: url('궁서체.woff') format('woff');
font-weight: 100;
font-style: thin;- WOFF2(Web Open Font Format2)
앞서 말한 WOFF에 개선된 버전이다. Brotli 압축 알고리즘을 사용하여 압축을 해 기존 WOFF대비 약 30%에서 50%정도 더 작은 파일을 가지게 된다. 성능은 우수하지만 호환적인 부분에서 아직 완벽하지 않기 때문에 폴백 폰트로 같이 사용한다.
@font-face {
font-family: 'Nanum Gothic';
src: url('궁서체.woff2') format('woff2');
url('궁서체.woff') format('woff');
font-weight: 100;
font-style: thin;- 서브셋 사용하기
서브셋이란 웹 폰트 파일에서 필요한 문자 집합만을 선택하여 추출한 폰트 파일이다.
웹페이지 내 특수하게 사용되는 폰트의 경우 사용하는 폰트만 사용하여 폰트 크기를 줄이게 된다.
- 다운로드하여 미리 연결하기
웹 폰트는 로컬뿐만 아니라 온라인상에서 폰트도 사용이 가능하다.
<html>
<head>
<link href="google.com/nanumgothic" rel="stylesheet">
</head>
</html>
