사용과 최적화

N Tech Service / 이상진

사용 현황

기본 사용법

문제점 및 원인

브라우저별 처리방식

최적화 방법 (4가지)

목차

1.

2.

3.

4.

5.

사용현황

# 사용사례

"웹폰트는 좋은 디자인, UX, 퍼포먼스에 있어

매우 중요한 요소이다."

 

 

- Ilya Grigorik -

Web Performance Engineer at Google

# 사용률

built with - Google Font API Usage Statics

:   1조 8천만 번

:   1조 번

:   3670억 번

폰트별 request 횟수 (google webfont) : 영문

# 웹폰트 사용률

:   4억 번

:   1억9900만 번

:   1940만 번

# 웹폰트 사용률

폰트별 request 횟수 (google webfont) : san-serif체

:   4억 번

:   4070만 번

:   1620만 번

# 웹폰트 사용률

폰트별 request 횟수 (google webfont) : 나눔체

68%

전세계

웹사이트가
웹폰트를 사용

# 웹폰트 사용률

사용법

일반적으로 웹브라우저에 표시될 폰트는

"사용자의 컴퓨터(=로컬)" 에 설치된 폰트로 표시

로컬폰트

# 웹폰트란?

일반적으로 웹브라우저에 표시될 폰트는

"사용자의 컴퓨터(=로컬)" 에 설치된 폰트로 표시

윈도우 OS

Mac OS

로컬폰트

# 웹폰트란?

웹폰트는 로컬의 폰트 설치 상황과 관계없이, 특정 서버에 업로드 된 폰트파일을

"다운로드" 한 후 화면에 표시하는 방법입니다.

웹폰트

# 웹폰트란?

서버 경로

css의 @font-face 속성을 이용

# 기본 사용법

파일 포맷

css의 @font-face 속성을 이용

# 기본 사용법

# 기본 사용법

css의 @font-face 속성을 이용

폰트 이름 설정

WIT블로그 - 웹폰트 사용하기

fallback폰트

서버 경로

# 기본 사용법

css의 @font-face 속성을 이용

폰트 이름 설정

WIT블로그 - 웹폰트 사용하기

fallback폰트

파일 포맷

서버 경로

문제점

# 웹폰트 문제점

# 웹폰트 문제점

# 웹폰트 문제점

# 웹폰트 문제점

# 웹폰트 문제점

웹폰트

# 웹폰트 문제점

Critical Rendering Path

# 웹폰트 문제점 WHY?

Critical Rendering Path

# 웹폰트 문제점 WHY?

Critical Rendering Path

# 웹폰트 문제점 WHY?

Critical Rendering Path

# 웹폰트 문제점 WHY?

Critical Rendering Path

# 웹폰트 문제점 WHY?

Critical Rendering Path

# 웹폰트 문제점 WHY?

Critical Rendering Path

# 웹폰트 문제점 WHY?

Delay or Fail

Critical Rendering Path

# 웹폰트 문제점 WHY?

Delay or Fail

Critical Rendering Path

# 웹폰트 문제점 WHY?

Delay or Fail

Critical Rendering Path

# 웹폰트 문제점 WHY?

Delay or Fail

Critical Rendering Path

웹폰트의

용량

네트워크

상태

보이지 않는

텍스트

# 웹폰트 문제점 WHY?

Delay or Fail

Critical Rendering Path

웹폰트의

용량

네트워크

상태

보이지 않는

텍스트

# 웹폰트 문제점 WHY?

Delay or Fail

Critical Rendering Path

웹폰트의

용량

보이지 않는

텍스트

# 웹폰트 문제점 WHY?

웹폰트 최적화

1.용량 줄이기

woff2 포맷

평균 30% 압축된 형식

# woff2 포맷

브라우저별 지원 범위가 상이함

fallback 처리 필요

@font-face {
    font-family: NanumSquareWeb;
    src: url(NanumSquareR.woff2) format('woff2'),
         url(NanumSquareR.woff) format('woff'),
         url(NanumSquareR.ttf) format('truetype');
}

# woff2 포맷

https://onlinefontconverter.com/

# woff2 포맷

1.용량 줄이기

Subset Font

한글 = 자음 + 모음

11,172자

# subset폰트

나눔바른고딕 Regular : 한글 11,172자

# subset폰트

나눔바른고딕 Regular : 한글 11,172자

11,172 자

2,350 자

https://www.kssn.net/

ks x 1001

한국 산업 규격

# subset폰트

현대 한글 11,172자. 적색은 KS X 1001 2,350자. 녹색은 ’KS 코드 완성형 한글의 추가 글자 제안’의 224자

# subset폰트

11,172자

2,350자

586 KB

2.4 MB

# subset폰트

서브셋 폰트 메이커

Python FontTool

https://opentype.jp/subsetfontmk.htm

https://github.com/fonttools/fonttools

# subset폰트

웹폰트 최적화

1.용량 줄이기

unicode-range

https://www.unicode.org/charts

U+

AC00

"가"

# unicode-range

https://unicode-table.com

# unicode-range

U+BC14

U+CC28

@font-face {
    font-family: NanumPenWeb;
    src: url(NanumPenWeb.woff2) format('woff2');
    unicode-range: U+BC14, U+CC28;
}

# unicode-range

U+BC14

U+CC28

# unicode-range

@font-face {
    font-family: NanumPenWeb;
    src: url(NanumPenWeb.woff2) format('woff2');
    unicode-range: U+BC14, U+CC28;
}

# unicode-range

@font-face {
    font-family: NanumPenWeb;
    src: url(NanumPenWeb.woff2) format('woff2');
    unicode-range: U+BC14, U+CC28;
}
@font-face {
    font-family: NanumSquareWeb;
    src: url(NanumSquareWeb-Arab.woff2) format('woff2'); /* 나눔스퀘어 전체 */

}

@font-face {
    font-family: NanumSquareWeb;
    src: url(NanumSquareWeb-Combodia.woff2) format('woff2'); /* 나눔스퀘어 전체 */

}

# unicode-range

@font-face {
    font-family: NanumSquareWeb;
    src: url(NanumSquareWeb-Arab.woff2) format('woff2'); /* 나눔스퀘어 전체 */
    unicode-range: U+06??;  /* 아랍어 */
}

@font-face {
    font-family: NanumSquareWeb;
    src: url(NanumSquareWeb-Combodia.woff2) format('woff2'); /* 나눔스퀘어 전체 */
    unicode-range: U+1780-17FF;  /* 캄보디아어 */
}

# unicode-range

Delay or Fail

Critical Rendering Path

웹폰트의

용량

보이지 않는

텍스트

# 웹폰트 문제점 WHY?

Delay or Fail

Critical Rendering Path

보이지 않는

텍스트

# 웹폰트 문제점 WHY?

Delay or Fail

Critical Rendering Path

# 웹폰트 문제점 WHY?

브라우저별 처리방식

FOIT   /  FOUT

Flash

Of

 

Text

 

Flash

Of

 

Text

Unstyled

Invisible

# FOIT & FOUT 예제

웹폰트

https://sangziii.github.io/fontStyleMatcher/foitfout

# FOIT & FOUT 예제 : 2s

https://sangziii.github.io/fontStyleMatcher/foitfout

# FOIT & FOUT 예제 : 4s

https://sangziii.github.io/fontStyleMatcher/foitfout

# FOIT & FOUT 예제 : 4s

Invisible

fallback

로딩까지 4초의 지연시간

Invisible

fallback

fallback

fallback

로딩까지 4초의 지연시간

Invisible

fallback

Swap

fallback

fallback

Swap

로딩까지 4초의 지연시간

웹폰트가 다운로드 될 때까지 텍스트를 랜더링 하지 않다가,

로딩이 된 이후에 텍스트를 보여주는 동작

" FOIT "

모던 브라우저

기다리는 제한시간 3s가 있다.

웹폰트가 로딩이 되지 않을때, 해당 텍스트 "rendering Block"

# FOIT & FOUT

IE계열 브라우저

웹폰트가 다운로드 될 때까지 unstyled 텍스트(fallback폰트)를

보여주고, 로드가 되면 웹폰트로 대처하는 방식

"  FOUT  "

글꼴의 자간, 높이에 따라 “레이아웃”이 변경 될 수 있다.         레이아웃이 틀어져서 이상해보인다.

웹폰트 로딩에 관계없이 텍스트는 항상 보인다.

# FOIT & FOUT

FOIT

FOUT

보이지 않는 텍스트

ugly한 기본 폰트 텍스트

: invisible 텍스트는 UX관점에서 나쁘다

→ FOIT 는 FOUT보다 나쁠수 있다.

foit            fout

웹폰트 최적화

FontLoader 라이브러리

2.텍스트가 항상 보이게

FontLoader 라이브러리

- FontFaceObserver

- Google Webfont Loader

- typekit /webfont Loader

- npm / webfonts-loader

# FontLoader 라이브러리

: 가볍고 빠른 font loader 라이브러리

https://fontfaceobserver.com​

# FontLoader 라이브러리

CSS

JS

: 의도적 FOUT 만들기

로드 전

로드 후

사용할 웹폰트 추적

로드 후, 클래스 추가

# FontLoader 라이브러리

웹폰트 최적화

CSS의 font-display속성

2.텍스트가 항상 보이게

  • Auto
  • Block
  • Swap
  • Fallback
  • Optional

# CSS / font-display 속성

웹폰트 요청

3s

다운로드 완료

webfont

fallback

invisible

# CSS / font-display 속성 : block

웹폰트 요청

다운로드 완료

webfont

fallback

즉시 대체 폰트 렌더링(rendering block기간 없음)
무한정 웹폰트 응답 대기 (=FOUT)

# CSS / font-display 속성 : swap

웹폰트 요청

fallback

다운로드 완료

webfont

100ms

# CSS / font-display 속성 : fallback

아주 짧은 시간(100ms) block 후, 대체폰트 렌더링
swap기간(약 2s) 내 로드 완료시 렌더링 / 초과시에 렌더링 하지 않음 

2s

웹폰트 요청

다운로드 완료

fallback

webfont

# CSS / font-display 속성 : fallback

100ms

아주 짧은 시간(100ms) block 후, 대체폰트 렌더링
swap기간(약 2s) 내 로드 완료시 렌더링 / 초과시에 렌더링 하지 않음 

2s

웹폰트 요청

FOIT

fallback / webfont

아주 짧은 시간(100ms) block 후, 대체폰트 렌더링
네트워크 상태에 따라 브라우저가 렌더링할 지 결정

# CSS / font-display 속성 : optional

100ms

https://font-display.glitch.me/

# CSS / font-display 예제

FOIT

FOUT

FOIT

fallback

font

fallback

font

브라우저별

기본값

# CSS / font-display : 예제

# CSS / font-display : 예제

웹폰트 로드 여부에 관계없이 항상 텍스트가 보이게 하려면?

- swap

- fallback

- optional

}

100 ms

매우 짧은 시간

모던 브라우저에서는 ok!  

# CSS / font-display : 브라우저 지원

웹폰트 최적화

3.폰트간 차이 줄이기

웹폰트 적용 전

(= fallback폰트)

웹폰트 적용 후

# 폰트간 차이 줄이기

폰트 종류에 따라

style이 조금씩 다르다

# 폰트간 차이 줄이기

https://sangziii.github.io/fontStyleMatcher/

Fallback 폰트

웹폰트

# 폰트간 차이 줄이기

CSS

로드 전

로드 후

body {
    font-family: 'Nanum Gothic', sans-serif;
    font-size: 15px;
    line-height: 1.65;
    letter-spacing: -0.4px;
}

body.font-loaded {
    font-family: 'Black Han Sans', 'Nanum Gothic', sans-serif;  
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0;
}

fallback 폰트 스타일

}

 웹폰트 스타일

}

# 폰트간 차이 줄이기

웹폰트 최적화

4.먼저 다운받기

<link>태그에 preload 옵션을 주면, 다른 리소스보다 빨리 받아올 수 있음

# preload 옵션

preload / as / crossorigin 사용

preload 미사용

preload 사용,    as / crossorigin 미사용

다운로드 x 2

# preload 옵션

# preload 옵션

NAVER - 한글한글답게

결론

결론

용량을 줄이자

     - woff2 포맷 

     - subset 폰트 + unicode-range

1.

2.

3.

4.

항상 보이게 하자

     - FontLoader 라이브러리

     - css : font-display 속성 

폰트간 차이를 줄이자

     - Font Style Matcher App

먼저 다운받자

     - link태그의 preload 속성

swap & fallback & optional

이렇게까지 해야될까....?

개발자

Creater

장인정신

감사합니다 :)

Made with Slides.com