사용과 최적화

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

Text

Flash

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

로딩까지 4초의 지연시간

Invisible

fallback

Swap

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

: 의도적 FOUT 만들기

로드 전

로드 후

사용할 웹폰트 추적

로드 후, 클래스 추가

# FontLoader 라이브러리

웹폰트 최적화

CSS의 font-display속성

2.텍스트가 항상 보이게

Auto

Block

Swap

Fallback

Optional

# CSS / font-display 속성

웹폰트 요청

다운로드 완료

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) 내 로드 완료시 렌더링 / 초과시에 렌더링 하지 않음

웹폰트 요청

다운로드 완료

fallback

webfont

# CSS / font-display 속성 : fallback

100ms

아주 짧은 시간(100ms) block 후, 대체폰트 렌더링
swap기간(약 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 : 예제

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

- 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.먼저 다운받기

# preload 옵션

preload / as / crossorigin 사용

preload 미사용

preload 사용, as / crossorigin 미사용

다운로드 x 2

# preload 옵션

NAVER - 한글한글답게

결론

용량을 줄이자

- woff2 포맷

- subset 폰트 + unicode-range

1.

2.

3.

4.

항상 보이게 하자

- FontLoader 라이브러리

- css : font-display 속성

폰트간 차이를 줄이자

- Font Style Matcher App

먼저 다운받자

- link태그의 preload 속성

swap & fallback & optional

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

개발자

Creater

장인정신

감사합니다 :)

FE CONF 2018

By Sang Jin Lee

FE CONF 2018

3,751

사용과 최적화

목차

1.

2.

3.

4.

5.

사용현황

68%

전세계

웹사이트가 웹폰트를 사용

사용법

로컬폰트

로컬폰트

웹폰트

css의 @font-face 속성을 이용

css의 @font-face 속성을 이용

css의 @font-face 속성을 이용

css의 @font-face 속성을 이용

문제점

웹폰트 최적화

1.용량 줄이기

1.용량 줄이기

웹폰트 최적화

1.용량 줄이기

"가"

브라우저별 처리방식

FOIT / FOUT

로딩까지 4초의 지연시간

로딩까지 4초의 지연시간

로딩까지 4초의 지연시간

" FOIT "

모던 브라우저

IE계열 브라우저

" FOUT "

FOIT

FOUT

foit fout

웹폰트 최적화

2.텍스트가 항상 보이게

웹폰트 최적화

2.텍스트가 항상 보이게

웹폰트 최적화

3.폰트간 차이 줄이기

웹폰트 최적화

4.먼저 다운받기

결론

결론

1.

2.

3.

4.

FE CONF 2018

More from Sang Jin Lee

웹사이트가
웹폰트를 사용