웹 폰트 어디까지 알고 있니?

     

목차

 

 

 

로컬 폰트

사용자의 컴퓨터에 설치되었거나 서버에 설치된 폰트이다.
개발자가 폰트를 웹 서버에 업로드하고 CSS로 적용하여 사용할 수 있고 웹 폰트보다 로딩 속도가 빠르다.

 

web font

온라인의 특정 서버(ex 구글)에 위치한 폰트 파일을 다운로드하여 화면에 표시하는 방법이다. 웹 서버와 사용자 간 네트워크 대역폭을 사용하여 폰트 파일을 다운로드 받기 때문에 폰트 파일의 크기가 클수록 로딩 시간이 느려진다.

 

 

폰트 확장자

로컬 폰트를 사용할 경우에는 확장자를 잘보아야 한다. 다음을 통해 살펴보자

 

TTF (TrueType Font)

• Windows, Mac OS, Linux 등 대부분의 운영 체제에서 지원
• 고해상도 디스플레이에서 자연스럽게 보이도록 설계된 벡터 글꼴 포맷

OTF (OpenType Font)

• TTF의 기능 확장 버전, Windows, Mac OS, Linux 등 대부분의 운영 체제에서 지원
• TTF 보다 파일 크기가 크기 때문에 로딩 속도가 상대적으로 느릴 수 있음

WOFF (Web Open Font Format)

• 웹에서 폰트를 사용하기 위해 개발된 형식. 압축률이 높아 로딩 속도가 빠름
• 웹에서 널리 사용됨

WOFF2 (Web Open Font Format 2)

• WOFF의 최신 버전. 압축률이 WOFF보다 더 높아 로딩 속도가 더 빠름
• IE 11 이하 버전에서 지원하지 않으며, 일부 브라우저에서 사용시 폰트가 제대로 표시되지 않을 수 있음

 

따라서 보통 폰트파일을 적용할 때 woff2를 사용한다.

 

엥 woff2만 사용하면 무조건 좋은 거 아님?

 

놀랍게도 web.dev 문서도 이렇게 적혀있다.

---

사실 이제는 WOFF2만 사용하고 다른 것은 모두 잊어버리라고 선언할 때도 되었습니다.

이렇게 하면 CSS와 워크플로가 대폭 간소화되고 실수로 글꼴을 두 번 다운로드하거나 잘못된 글꼴을 다운로드하는 일이 방지됩니다. 이제 WOFF2가 모든 위치에서 지원됩니다. 따라서 매우 오래된 브라우저를 지원해야 하는 경우가 아니라면 WOFF2를 사용하세요. 불가능하다면 이러한 이전 브라우저에 웹 글꼴을 전혀 게재하지 않는 것이 좋습니다. 강력한 대체 전략이 마련되어 있다면 문제가 되지 않습니다. 이전 브라우저를 사용하는 방문자에게는 대체 글꼴이 표시됩니다.

---

 

다음과 같이 작성하면 WOFF2가 적용되는 브라우저에선 WOFF2를, 지원을 하지 않는 브라우저에선 WOFF가 다운로드 된다.

@font-face {
  font-family: 'notoSans';
  src: url(/fonts/notoSans.woff2) format("woff2"), 
       url(/fonts/notoSans.woff) format("woff"),
}

 

++추가 정보

 @font-face 선언 자체로는 글꼴 다운로드를 트리거하지 않습니다. 오히려 페이지에서 사용되는 스타일에서 참조하는 경우에만 글꼴이 다운로드됩니다.

 

예시

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

h1 {
  font-family: "Open Sans"
}

 

 

로컬 폰트 최적화하기

 

1. 로컬 문법 쓰기

   src: url(/static_fonts/NanumGothic-Regular.eot), 
        url(/static_fonts/NanumGothic-Regular.woff2) format("woff2"), 
        url(/static_fonts/NanumGothic-Regular.woff) format("woff"),
        url(/static_fonts/NanumGothic-Regular.ttf) format("truetype");

 

• 위처럼 선언하면 시스템에 폰트 유무와 관계없이 무조건 다운로드받게 됨 -> 불필요한 리소스 요청
• local 문법을 앞에 선언해주면 시스템에 설치되어 있다면 리소스를 요청하지 않는다.

   src: local('Nanum-Gothic'), 
        url(/static_fonts/NanumGothic-Regular.woff2) format("woff2"), 
        url(/static_fonts/NanumGothic-Regular.woff) format("woff");

 

(보통의 경우 웹에서 많이 쓰는 pretendard 같은 폰트의 경우는 os에 기본적으로 깔려있지 않다.

그래서 최적화의 의미가 적을 수도..)

pretendard 없어요..

 

2. 가변 폰트 사용하기

 

가변 폰트

font-weight가 한 파일로 이루어져 있어 리소스 요청에 더욱 유리하다.

const pretendard = localFont({
  src: [
    {
      path: '../shared/fonts/PretendardVariable.woff2',
    },
  ],
  variable: '--font-pretendard',
  weight: '100 900',
  display: 'swap',
});

 

정적 폰트

그에 반해 사용된 weight마다 별개의 요청이 발생한다.

const PretendardFont = localFont({
  src: [
    {
      path: '../shared/fonts/Pretendard-Black.woff2',
      weight: '900',
    },
    {
      path: '../shared/fonts/Pretendard-ExtraBold.woff2',
      weight: '800',
    },
    {
      path: '../shared/fonts/Pretendard-Bold.woff2',
      weight: '700',
    },
    {
      path: '../shared/fonts/Pretendard-SemiBold.woff2',
      weight: '600',
    },
    {
      path: '../shared/fonts/Pretendard-Medium.woff2',
      weight: '500',
    },
    {
      path: '../shared/fonts/Pretendard-Regular.woff2',
      weight: '400',
    },
    {
      path: '../shared/fonts/Pretendard-Light.woff2',
      weight: '300',
    },
    {
      path: '../shared/fonts/Pretendard-ExtraLight.woff2',
      weight: '200',
    },
    {
      path: '../shared/fonts/Pretendard-Thin.woff2',
      weight: '100',
    },
  ],
});

 

 

구형 브라우저에서는 미지원을 하고 가변 폰트(Variable Font)는 단순히 굵기(weight) 파일 여러 개를 합친 게 아니라,
하나의 벡터 수학 모델 안에서 굵기·폭·기울기 등의 변화를 실시간 계산하는 방식으로 인한 오버헤드로 단점이 있을 수는 있으나

대부분의 경우에는 더 유리하다고 볼수 있다.

 

 

웹폰트 최적화

웹폰트를 로딩할 때 link 방식과 @import 방식을 선택할 수 있다.
추가하는 폰트의 개수와 프로젝트의 우선 순위를 사용하여 결정할 수 있다.
일반적으로는 성능최적화, 크로스 브라우징 관점에서 link 방식이 권장된다.

 

link 방식

 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap">

 

병렬 방식으로, 브라우저가 리소스를 처리하기 때문에 로딩 속도 향상이 이루어지고 모든 브라우저에서 지원된다.

 

 

@import 방식

CSS 파일 어디나 작성 가능하고 상단에 작성하는 것이 일반적이다. 직렬 방식을 사용하여 로딩 속도가 더딜 수 있고 IE11 이하에선 지원되지 않는다.  

  @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

 

-> ?? 왜 link는 병렬일까?

 

1. HTML 파싱 및 link 리소스 요청

2. DOM 트리 생성

3.CSSOM 트리 생성

4. 랜더 트리 생성

 

 

<link rel="stylesheet"> 는 HTML을 파싱하면서 즉시 외부 CSS 파일을 다운로드 명령을 브라우저 로더에 등록합니다.

이때 브라우저는 HTML 파싱을 잠시 멈추지 않고 비동기적으로 여러 리소스 요청을 동시에 보냅니다.

 

 

but

@import는 <link>처럼 HTML 파싱 단계에서 인식되지 않습니다.
CSS 파일이 다운로드된 이후에야 내부의 @import 구문이 파싱되기 때문에 직렬 처리로 이어진다.

 

 

link방식 최적화 하기

link의 rel 속성은 문서와의 관계를 정의한다. preload와 prefetch, preconnect를 사용할 수 있다.

 

rel= "preload"

• 현재 페이지의 로딩 중에 필요한 리소스를 미리 다운로드하여 브라우저 캐시에 저장
• 필요한 리소스가 실제로 사용되기 전에 이미 로컬에 캐시되어 있어 빠른 로딩이 가능
• 리소스를 중복 참조하면 중복된 개수만큼 리소스를 가져옴

rel= "prefetch"

• 현재 페이지에서는 사용되지 않지만 다음 페이지에서 사용될 리소스를 미리 다운로드
• 사용자가 다음 페이지로 이동할 때 해당 리소스가 이미 로컬에 캐시되어 있어 빠른 로딩이 가능
• 과도한 prefetch는 사용자의 대역폭을 낭비할 수 있으므로 신중한 선택 필요

rel= "preconnect"

• 특정 도메인과의 연결을 사전에 설정하여 해당 도메인과의 네트워크 지연을 최소화
• CDN이나 외부 도메인과의 연결에 활용됨
• 구글 웹폰트 서비스 이용시 자동으로 설정되는 값

-> 따라서 폰트 리소스의 도메인 연결을 사전에 하기 위해서는 preconnect를 설정하는 것이 좋다.

 

 

공통 최적화 방법

서브셋

실제 사용되는 글자만 추출하여 파일 크기를 최소화하는 기술

 

 

하나의 프로젝트에서 디자인을 위해 2개 이상의 폰트가 사용될 때가 많다.
한글용, 영문용 폰트를 각각 사용하는 경우 해당 기술을 통해
파일 크기를 최소화하는 것은 성능 최적화에 큰 도움이 된다.

https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap&subset=korean

 

@font-face {
  font-family: 'Open Sans';
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('/fonts/open-sans-subset.woff2') format('woff2'); /* 서브셋 파일 경로 */
  font-weight: 400;
  font-style: normal;
  unicode-range: U+0000-00FF; /* 사용할 글자 범위 설정 */
}

/*
* 일반적인 특수문자 (Common Symbols) 
  unicode-range: U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E;
* 모든 기본 다국어 평면 (영어 해당) 
  unicode-range: U+0000-FFFF;
* 한글 범위 설정
  unicode-range: U+AC00-D7AF; 
*/

 

 

font-display

 

다음의 속성을  먼저 살펴보자

 

FOIT (Flash of Invisible Text)

• Chrome, Safari 등의 브라우저 초기값

웹폰트 로딩되는 동안, 텍스트를 표시하지 않는 경우이다.
글자가 숨겨져 있는 것처럼 보이는데, not 과 같은 단어가 미노출 되었을 때 문맥과 전혀 다른 내용을 사용자에게 전달할 가능성이 있어서 권장되지 않는다.

 

FOUT (Flash of Unstyled Tex)

• IE, Edge 브라우저에서 발생

폰트 로딩되는 동안, 기본 텍스트를 우선 표시하는 경우이다.
처음 웹페이지 접근 시 기본 텍스트가 노출된다. 폰트 로딩이 완료되면, 해당 폰트로 교체된다.
이 과정이 사용자에게 보여지면, 버벅 거리는 것처럼 느껴질 수 있다.

 

 

font-display는 위에서 언급한 FOIT, FOUT와 관련된 폰트의 로딩 동작을 지시할 수 있는 속성이다.
특정 브라우저에서는 지원되지 않는다. 상황에 따라 적합한 값을 사용해야 하나, FOIT가 기본값인 크롬/사파리 브라우저에선 auto가 아닌 값을 사용하는 것이 좋다.

 

auto

• 기본값, 브라우저가 자동으로 FOIT와 FOUT를 처리함

swap

• 폰트 로딩이 완료될 때까지 기본 폰트로 텍스트를 표시하다가 로딩이 완료되면 웹 폰트로 교체
• 로딩 중에도 텍스트를 볼 수 있어서 사용자 경험을 개선 할 수 있음
• 기본 폰트와 로딩된 폰트가 시각적으로 큰 차이가 없는 경우에 적합함
• 구글 웹폰트 기본 세팅값

fallback

• FOIT를 피하면서 로딩이 느려져도, 대체 폰트로 텍스트를 볼 수 있음
• 로딩이 완료되면 웹폰트로 교체됨
• 빠른 초기 렌더링이 중요한 경우에 적합함

-> swap과 fallback의 큰 차이는 웹폰트가 너무 늦게 오면 교체를 할지 말지의 여부 입니다.

 

swap - 웹폰트가 늦게와도 교체

fallback - 웹폰트가 너무 늦게 올 경우 교체 x

optional

• FOIT를 피하고 로딩에 실패해도 무시하고 계속 진행
• 폰트가 없는 경우에 대비한 대체 폰트를 사용 가능
• 폰트가 중요하지 않은 경우에 적합함

 

web-dev

성능: font-display: optional를 사용합니다. 가장 '성능이 우수한' 접근 방식입니다. 텍스트 렌더링이 100ms 넘게 지연되지 않으며 글꼴 전환 관련 레이아웃 전환이 없다는 보장이 있습니다. 단점은 웹 글꼴이 늦게 도착하면 사용되지 않는다는 점입니다.

 

권장 방식

이 두 가지 접근 방식을 결합할 수 있습니다. 예를 들어 브랜딩 및 시각적으로 고유한 기타 페이지 요소에는 font-display: swap를 사용합니다. 본문 텍스트에 사용되는 글꼴에는 font-display: optional를 사용하세요.