1 분 소요

웹 폰트 & 로컬 폰트

  • 웹 폰트: 브라우저에서 웹 페이지에 사용되는 글꼴을 다운로드하여 웹 페이지에 적용하는 폰트
  • 로컬 폰트: 사용자의 컴퓨터에 이미 설치된 폰트

로컬 폰트 적용 방법

  • 로컬폰트를 적용하기 위해서는 @font-face 를 사용해야 함 
    @font-face {
font-family: <a-remote-font-name>;
src: <source> [,<source>]*;
[font-weight: <weight>]; // 폰트 굵기
[font-style: <style>]; // 폰트 스타일
}
    • <a-remote-font-name>: 폰트명으로 지정될 이름
    • <source>: 원격 폰트 파일의 위치를 나타내는 url / 로컬환경에 있는 폰트명(local(”Font Name”) 형식 )
  • 실제 사용 예시 (https://www.w3schools.com/cssref/css3_pr_font-face_rule.php 링크 참고)

See the Pen @font-face 예시 by jiyeon2y (@jiyeon2y) on CodePen.

웹 폰트 최적화

웹 폰트 최적화의 필요성

  • 브라우저가 폰트 리소스 요청을 다른 리소스 요청보다 늦게 처리하기 때문에 최적화를 할 필요가 있음
    • FOUT (Flash of Unstyled Text): 브라우저가 폰트를 다운로드하기 전까지 폰트가 적용되지 않는 현상
    • FOIT (Flash of Invisible Text): 브라우저가 폰트를 다운로드하기 전까지 글자가 보이지 않는 현상

웹 폰트 최적화 방법

(1) Font Preload 기술 사용

  • 폰트 리소스 요청을 앞당길 수 있음
  • html의 <head> 태그 안에 아래 내용을 추가하면 됨
  <link rel="preload" href="url" as="font" type="font/woff2" crossorigin/>
  • 하지만, 많은 양의 폰트를 preload하게 되면 오히려 로딩 시간이 길어질 수 있음!

(2) 압축율이 좋은 웹 폰트 확장자 사용

  • 폰트 용량을 줄여 폰트 로딩 시간을 줄이는 방법
  • 압축율이 좋은 WOFF2, WOFF(WOFF2 사용할 수 없을 경우) 사용 추천

(3) 서브셋 폰트 사용

  • 서브셋 폰트: 폰트 파일에서 불필요한 글자들을 제거한 것
  • 서브셋 폰트를 만들어주는 사이트 활용하면 됨 (e.g. Webfront Generator )

댓글남기기

참고

블로그 글 작성 커밋에도 컨벤션을 적용해 보자

최대 1 분 소요

이전까지 블로그에 글을 올릴 때 update, upload, 혹은 유형을 생략하는 식으로 커밋 메시지를 작성했었다. 사실 블로그 글 작성은 나 혼자 하는 일이기 때문에 크게 필요성을 느끼진 못했었다. 언젠간 유형을 제대로 지켜서 작성해야지 했지만, 미루고 미루다 결국 제대로 지키지...