Webfont 사용 방법

Google Fonts 사용을 중심으로 웹 글꼴을 사용하는 최선의 실천 (성능이 가장 좋고 지연이 적음) 을 고려해 보려고 합니다.
서식
EOT, TTF, WOFF, WOFF2, SVG 등이 있지만 2019년 12월까지 거의 모든 브라우저가 WOFF와 WOFF2를 지원해 이 두 개만 읽으면 된다.
※ 단, 각 사건의 대상 브라우저를 확인하세요.


Google Fonts의 CDN 활용
태그에 Google Fonts를 불러오고 사용할 때 여러 글꼴을 읽으면 다음 태그가 발행됩니다.

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700|Roboto:400,700&display=swap&subset=japanese" rel="stylesheet">

W3C 검사에서 오류가 발생했습니다. 문법 오류를 피하기 위해 ｜ 대신 %7C 사용했습니다.
장점
간편한 사용
결점
렌더링 블록 발생
파일 경로가 변경될 수 있음
브라우저 비헤이비어의 차이

발생하기 쉬운 문제
FOUT(Flash of Unstyled Text)
웹 글꼴이 읽히기 전에 대체 글꼴로 표시되고 읽기가 완료되면 웹 글꼴로 전환되는 현상입니다.
크롬과 같은 브라우저는 시간 초과 전에 불러오기를 완료하지 않은 상태에서 대체 글꼴을 표시하고 글꼴을 다운로드한 후 지정한 글꼴로 전환하여 깜빡이는 문제가 발생했습니다.
FOIT(Flash of Invisible Text)
웹 글꼴 읽기가 완료될 때까지 텍스트 현상을 표시할 수 없습니다.
Safari는 글꼴이 불러오기를 계속 기다렸기 때문에 글꼴 다운로드가 끝날 때까지 텍스트를 표시할 수 없습니다.
CSS 최적화
앞에서 말한 바와 같이 브라우저에 따라 행동이 다르기 때문에 때때로 FOUT, FOIT 등의 문제가 발생할 수 있다.font-display 속성은 CSS를 통해 글꼴을 읽을 때의 동작을 제어할 수 있습니다.
장점
벽돌 링크 블록이 발생하지 않음(비동기식 읽기)
글꼴 동작을 자세히 제어할 수 있습니다
Edge, IE에서 사용 가능

auto는 브라우저의 기본 동작입니다.

block 시간 초과가 없기 때문에 FOUT가 없지만 FOIT가 발생하기 쉽다.

swap는 블록의 기한: 0초, 교환 기한: 무한, FOIT 분실, FOUT가 쉽게 발생한다.

fallback 블록 기간: 0.1초, 교환 기간: 3초, Fortback 글꼴을 표시할 수 있습니다.

optical블록기간: 0.1초, 교환기간: 0초, FOUT가 발생하지 않고 FOIT도 최소한입니다.그러나 글꼴 취득 여부는 브라우저가 결정하기 때문에 빠른 텍스트 표시를 우선적으로 사용하는 것이 좋다.

JavaScript 기반 최적화
Font Loading API
글꼴의 다운로드 진행률과 행동을 모니터링할 수 있지만 브라우저 설치에 차이가 있기 때문에 아래에 설명된 웹 Font Loader는 사용하기 쉽다.
Web Font Loader
Google과 Typekit이 공동으로 개발한 글꼴 읽기를 제어할 수 있는 JavaScript 라이브러리소스 코드GitHub가 공개되어 무료로 사용할 수 있습니다.사용 방법은 Noto Sans JP의 사용 예에서 설명합니다.
preload를 통한 최적화

장점
웹 Font Loader보다 읽기(렌더링) 빠름
AMP에서도 사용 가능
결점
IE, Firefox에서 지원되지 않음
CDN을 사용할 수 없습니다.
이 가능하다, ~할 수 있다,...
Noto Sans JP 사용 예
HTML

<script>
  WebFontConfig={
    google:{
      families:['Roboto:400,700', 'Noto+Sans+JP:400,700']
    },
    active: function() {
      sessionStorage.fonts = true;
    }
  };

  if (typeof WebFont === 'object') {
    WebFont.load(WebFontConfig);
  }
</script>

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" async></script>

<link rel="preload" as="font" href="/assets/fonts/yakuhanjp/YakuHanJP-Regular.woff2" crossorigin>
<link rel="preload" as="font" href="/assets/fonts/yakuhanjp/YakuHanJP-Bold.woff2" crossorigin>
<link rel="preload" as="font" href="/assets/fonts/yakuhanjp/YakuHanJP-Regular.woff" crossorigin>
<link rel="preload" as="font" href="/assets/fonts/yakuhanjp/YakuHanJP-Bold.woff" crossorigin>

CSS

@font-face {
  font-family: "YakuHanJP_Noto";
  font-weight: 400;
  font-style: normal;
  src: url("/assets/fonts/yakuhanjp/YakuHanJP-Regular.woff2") format("woff2"), url("/assets/fonts/yakuhanjp/YakuHanJP-Regular.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "YakuHanJP_Noto";
  font-weight: 700;
  font-style: normal;
  src: url("/assets/fonts/yakuhanjp/YakuHanJP-Bold.woff2") format("woff2"), url("/assets/fonts/yakuhanjp/YakuHanJP-Bold.woff") format("woff");
  font-display: swap;
}
}

세션 스토리지 사용
브라우저를 닫기 전에 페이지를 넘겨도 웹 글꼴을 다시 불러오는 데 낭비되지 않습니다.
비동기 읽기 파일은script 탭으로 기술합니다
Giithub의 README의 기술은 스크립트 삽입 등의 가능성이 있어 취약성 관점에서 좋지 않은 기술이다.간단히script 탭의 async 속성 코드를 사용하여 기술합니다.
또한 비동기적으로 읽을 때는 WebFont이 사용됩니다.load () 를 실행하는 시점에 웹 Font Loader의 읽기가 완료되지 않았을 수도 있습니다. 따라서 웹 Font의 typeof를 확인하십시오. 완료되지 않았을 때 실행하지 않습니다.
Noto Sans JP에서 가장 신경 쓰는 건 Yaku Hans JP입니다.
웹 글꼴의 절반 정도만 있고 노트산스에 가장 적합한 글꼴 파일도 있습니다.
https://github.com/qrac/yakuhanjp
예를 들어 Yaku Hans는 preload를 사용하지만 WebFontLoader도 기술할 수 있다
인용원
웹 사이트 글꼴 최적화 | Web Fundamentals | Google Developers
브라우저 동작의 다른 내용을 게재하려면 참고 원본에서 사용하십시오.