✏️ font를 Preload하는 방법
웹 페이지를 더 좋은 페이지로 보이기 위한 첫번째 방법은 바로 font 설정이라고 생각한다. 간단한 font만 설정해도 깔끔함을 어필할 수 있다. 오늘은 font 적용하는 법을 알아보자.
📘 Preload
preload값은 html의 <head> 에서 가져오기 요청을 선언할 수 있게 해주고, 페이지에서 즉시 필요할 때 리소스를 명시할 수 있다. 페이지 생명주기의 초기에서 불러오고자 하는 리소스이다.
<link rel="preload" href="style.css" as="title"> css 파일이 필요할 때 바로 사용할 수 있도록 링크 태그로 연결된 것이다. rel="preload"로 설정하면 리소스의 우선순위를 정확하게 지정하고 캐시에 리소스를 저장해 재사용 가능하고 콘텐츠 보안 정책이 적용가능하다.
📘 로컬폰트 적용하는 방법
- 구글 폰트 사이트에서 들어가서 원하는 폰트를 찾는다.
- 오른쪽 Selected family에 자신이 고른 폰트가 추가되어 있는 걸 확인한다.
- 폰트를 불러오는 방법에는 2가지 방법이 있는데 바로
<link>로 선언하거나@import시키는 것이다. 먼저<link>는<head>안 에 복사 붙여넣기 하면 되고,@import는 html 파일에 연결된 css파일에 붙여넣기 하면 된다. 보통 글꼴은 base.css와 같이 임의의 파일로 지정해두는 것이 편하다.
body {
font-family: 'Noto Sans KR', sans-serif;
}
.content-layer {
font-family: 'Noto Sans KR', sans-serif;
}
- 사용할 폰트를 선언을 해주었다면 이제는 사용하고 싶은 곳에 적용하면 된다. css파일 안, 본인이 사용할 곳에
font-faily를 붙여넣기 해주면 된다.
📘 웹 폰트 속도 이슈
웹 폰트를 사용하면 사용하는 사람이 해당 웹 폰트가 없어도 디자인을 모두에게 동일하게 제공할 수 있지만 웹폰트는 용량 자체가 크고 웹의 속도를 저하시킨다. 그래서 사용자에게 웹폰트가 적용되는 과정이 눈에 보이는 현상이 발생할 수 있다. 따라서 속도 이슈를 방지해야한다.
📘 웹 폰트 확장자
EOT : IE8이하일때 사용
TTF : 구형 안드로이드 버전에서 사용
WOFF : 대부분의 모던 브라우저 지원
WOFF2 : WOFF보다 압축률이 30% 나음
📘 웹 폰트 최적화 방법
📌 local 문법 사용
css에 폰트를 선언하면 시스템의 폰트 유무에 따라 폰트를 다운로드하게 되어 불필요한 리소스를 요청한다. 이것을 방지하기 위해 local 문법을 앞에 선언해주면 불필요한 리소스 요청하는 것을 방지한다.
📌 font-display 속성 사용
font-display를 사용하면 외부 라이브러리를 사용하지 않아도 웹 폰트의 로딩 상태에 따른 동작을 설정할 수 있다.
auto : 브라우저 기본 동작 사용
block : 웹 폰트가 로딩되지 않았을때 텍스트를 렌더링하지 않는다
swap : 먼저 폴백 폰트로 글자를 렌더링하고 웹폰트가 로딩이 다 되면 웹폰트를 적용한다. 웹 폰트 로딩과는 상관없이 텍스트가 항상 보인다
fallback : 100ms 동안 텍스트가 보이지 않고 그 다음에 폴백 폰트로 렌더링한다. 추후에 다시 방문해도 바로 웹폰트가 적용된다
optional : 위와 동일하게 작용하지만 네트워크 상태에 따라 웹폰트의 다운로드가 완료되어도 캐시에만 저장한다
📌 preload 옵션으로 먼저 로딩하기
<link>태그의 rel 속성에 preload 옵션을 사용하면 다른 리소스보다 더 빨리 로딩한다. 폰트 파일이나, 이미지 파일 , 비디오 파일 등 페이지에서 중요도가 높은 자원을 우선적으로 먼저 로딩을 해야할때 preload를 사용한다.
