웹 폰트를 아직 다 다운로드하기 전에, 기본 글꼴로 콘텐츠가 표시됐다가 웹 폰트를 다 다운로드하면 웹 폰트로 전환되면서 내용이 한 번 깜빡이는 현상을 말한다. FOUT, FOIT, FOFT 의 해결책들이 있다.
현재는 모든 주요 브라우저가 FOIT로 불리는 해결책을 적용한 상태다. (IE는 FOUT방식)
FOIT: 웹폰트가 적용된 텍스트 영역을 여백으로 처리하고, 웹폰트 로딩이 완료되면 해당 폰트를 적용한다. 단, 3초의 제한 시간이 있어 로딩이 3초를 넘어가면 폴백 폰트로 렌더링 한다. 한국어 웹 폰트는 용량이 커서, 다운로드 속도가 느리면 아주 오랫동안 화면이 비어 있게 된다.
로컬 스토리지에 폰트를 캐시했다가 꺼내 쓰는 것은, 브라우저의 캐시를 꺼내 쓰는 것보다 꽤 느린데, 대신 훨씬 안정적이다.
FOUT를 방지하기 위해 웹폰트를 불러오는 자바스크립트 코드는 <head>에 두고 이때 자바스크립트는 로컬 스토리지 글꼴 저장 여부를 알아낸다. 저장하지 않았다면 우선 페이지를 렌더링한 뒤, base64로 인코딩한 woff 글꼴을 내장한 CSS 파일 내용을 ajax로 가져와 <head>에 뿌리고, 그걸 로컬 스토리지에 저장한다. FOUT는 이 때 한 번 일어난다.
이후 방문에서는 localStorage에 저장된 CSS 내용을 꺼내서 <head>에 박기 때문에 FOUT가 일어나지 않는다.
서브셋 폰트 서브셋 폰트(subset font)는 폰트 파일에서 불필요한 글자를 제거하고 사용할 글자만 남겨둔 폰트다. 영어는 26개 알파벳으로 이루어져 있다. 영문 폰트에는 대소문자를 포함해 총 72자의 글자가 필요하다. 하지만 한글은 자음, 모음의 조합으로 구성되어 있다. 모든 경우를 조합하면 한글의 글자 수는 11,172자나 된다. 그래서 한글 폰트 파일은 영문 폰트 파일보다 용량이 크다. [출처]&amp;nbsp;https://d2.naver.com/helloworld/4969726
노란색으로 표시된 글자들은 거의 사용하지 않는 글자들로 이를 제외하면 나눔바른고딕 폰트기준으로 한글 글자를 11,172자(2.4MB)에서 2,350자(586KB)로 줄여 서브셋 폰트를 만들 수 있다.
- WebFont 리소스 사전 로드
<link rel="preload">를 사용하면 CSSOM이 생성될 때까지 기다릴 필요 없이 중요한 렌더링 경로의 초기에 WebFont에 대한 요청을 트리거할 수 있다. 즉, CSS 파일보다 먼저 웹 폰트 파일의 다운로드를 시작한다.
- 텍스트 렌더링 지연 사용자 지정
사전 로드는 페이지의 내용이 렌더링될 때 WebFont를 사용할 수 있는 가능성을 높이지만 보장하지는 않는다. 이때 font-display를 사용하여 최신 브라우저에 원하는 동작을 지정할 수 있다. 동일한 환경에서는 렌더링도 더 빨리 끝난다. 로딩이 빠르기 때문에 렌더링 차단 시간 역시 줄어든다.
일부 브라우저가 구현하는 기존의 글꼴 시간 초과 동작과 유사하게 font-display는 글꼴 다운로드의 수명을 세 가지 주요 기간으로 나눈다.
글꼴 차단 기간 (font block period) 이 기간 동안 font face을 로드하지 않으면 font face을 사용하려는 요소가 보이지 않는 대체 font face을 렌더링해야 합니다. 이 기간 동안 font face가 성공적으로 로드되면 font face가 정상적으로 사용됩니다.
글꼴 스왑 기간 (font swap period) 글꼴 차단 기간 직후에 발생합니다. 이 기간 동안 font face을 로드하지 않으면 font face을 사용하려는 요소가 대체 font face을 렌더링해야 합니다. 스왑 기간 동안 font face가 성공적으로 로드되면 font face가 정상적으로 사용됩니다.
글꼴 오류 기간 (font failure period) 글꼴 스왑 기간 직후에 발생합니다. 이 기간이 시작될 때 font face가 아직 로드되지 않은 경우 실패한 로드로 표시되어 정상적인 글꼴 대체가 발생합니다. 그렇지 않으면 글꼴이 정상적으로 사용됩니다.
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
font-display: auto; /* or block, swap, fallback, optional */src: local('Awesome Font'),
url('/fonts/awesome-l.woff2') format('woff2'), /* will be preloaded */url('/fonts/awesome-l.woff') format('woff'),
url('/fonts/awesome-l.ttf') format('truetype'),
url('/fonts/awesome-l.eot') format('embedded-opentype');
unicode-range: U+000-5FF; /* Latin glyphs */
}
font-display 속성은 다음과 같이 auto, block, swap, fallback, optional의 5가지 옵션이 있다.
block : FOIT와 동일하게 작동하는 옵션이다. 웹 폰트가 로딩되지 않았을 때는 텍스트를 렌더링하지 않는다(최대 3초). 웹 폰트 로딩이 완료되면 웹 폰트를 적용한다. font-display: block &amp;nbsp;속성 작동 방식 [출처]&amp;nbsp;https://d2.naver.com/helloworld/4969726&amp;nbsp;
swap : FOUT와 동일하게 작동하는 옵션이다. 우선 폴백 폰트로 글자를 렌더링하고, 웹 폰트 로딩이 완료되면 웹 폰트를 적용한다. 웹 폰트 로딩 여부와 관계없이 항상 텍스트가 보인다. font-display: swap &amp;nbsp;속성 작동 방식 [출처]&amp;nbsp;https://d2.naver.com/helloworld/4969726
fallback : 이 옵션을 사용하면 우선 100ms 동안 텍스트가 보이지 않고, 그 후 폴백 폰트로 렌더링한다. 특이한 점은 약 2초의 전환(swap) 시간이 있다는 점이다. 이 시간 안에 로딩이 완료되면 웹 폰트로 전환한다. 하지만 이 시간이 지나면 웹 폰트 다운로드가 완료되어도 웹 폰트로 전환하지 않고 폴백 폰트를 유지한다. 전환 시간 이후에 다운로드된 웹 폰트는 웹 페이지에 적용되지는 않지만 캐시에는 저장된다. 그래서 추후에 사용자가 다시 방문했을 때 바로 웹 폰트가 적용된다는 장점이 있다.
optional : 우선 100ms 동안 텍스트가 보이지 않고 그 후 폴백 폰트로 전환한다. 웹 폰트를 다운로드하지만 브라우저가 네트워크 상태를 파악해 웹 폰트 전환 여부를 결정한다는 점이 이 옵션의 특이한 점이다. 예를 들어 네트워크의 연결 상태가 안 좋으면 웹 폰트의 다운로드가 완료되어도 캐시에 저장만 하고 전환은 하지 않는다. font-display: optional &amp;nbsp;속성 작동 방식 [출처] https://d2.naver.com/helloworld/4969726
웹 폰트를 아직 다 다운로드하기 전에, 기본 글꼴로 콘텐츠가 표시됐다가 웹 폰트를 다 다운로드하면 웹 폰트로 전환되면서 내용이 한 번 깜빡이는 현상을 말한다. FOUT, FOIT, FOFT 의 해결책들이 있다.
현재는 모든 주요 브라우저가 FOIT로 불리는 해결책을 적용한 상태다. (IE는 FOUT방식)
FOIT: 웹폰트가 적용된 텍스트 영역을 여백으로 처리하고, 웹폰트 로딩이 완료되면 해당 폰트를 적용한다. 단, 3초의 제한 시간이 있어 로딩이 3초를 넘어가면 폴백 폰트로 렌더링 한다. 한국어 웹 폰트는 용량이 커서, 다운로드 속도가 느리면 아주 오랫동안 화면이 비어 있게 된다.
로컬 스토리지에 폰트를 캐시했다가 꺼내 쓰는 것은, 브라우저의 캐시를 꺼내 쓰는 것보다 꽤 느린데, 대신 훨씬 안정적이다.
FOUT를 방지하기 위해 웹폰트를 불러오는 자바스크립트 코드는 <head>에 두고 이때 자바스크립트는 로컬 스토리지 글꼴 저장 여부를 알아낸다. 저장하지 않았다면 우선 페이지를 렌더링한 뒤, base64로 인코딩한 woff 글꼴을 내장한 CSS 파일 내용을 ajax로 가져와 <head>에 뿌리고, 그걸 로컬 스토리지에 저장한다. FOUT는 이 때 한 번 일어난다.
이후 방문에서는 localStorage에 저장된 CSS 내용을 꺼내서 <head>에 박기 때문에 FOUT가 일어나지 않는다.
서브셋 폰트 서브셋 폰트(subset font)는 폰트 파일에서 불필요한 글자를 제거하고 사용할 글자만 남겨둔 폰트다. 영어는 26개 알파벳으로 이루어져 있다. 영문 폰트에는 대소문자를 포함해 총 72자의 글자가 필요하다. 하지만 한글은 자음, 모음의 조합으로 구성되어 있다. 모든 경우를 조합하면 한글의 글자 수는 11,172자나 된다. 그래서 한글 폰트 파일은 영문 폰트 파일보다 용량이 크다. [출처]&amp;nbsp;https://d2.naver.com/helloworld/4969726
노란색으로 표시된 글자들은 거의 사용하지 않는 글자들로 이를 제외하면 나눔바른고딕 폰트기준으로 한글 글자를 11,172자(2.4MB)에서 2,350자(586KB)로 줄여 서브셋 폰트를 만들 수 있다.
- WebFont 리소스 사전 로드
<link rel="preload">를 사용하면 CSSOM이 생성될 때까지 기다릴 필요 없이 중요한 렌더링 경로의 초기에 WebFont에 대한 요청을 트리거할 수 있다. 즉, CSS 파일보다 먼저 웹 폰트 파일의 다운로드를 시작한다.
- 텍스트 렌더링 지연 사용자 지정
사전 로드는 페이지의 내용이 렌더링될 때 WebFont를 사용할 수 있는 가능성을 높이지만 보장하지는 않는다. 이때 font-display를 사용하여 최신 브라우저에 원하는 동작을 지정할 수 있다. 동일한 환경에서는 렌더링도 더 빨리 끝난다. 로딩이 빠르기 때문에 렌더링 차단 시간 역시 줄어든다.
일부 브라우저가 구현하는 기존의 글꼴 시간 초과 동작과 유사하게 font-display는 글꼴 다운로드의 수명을 세 가지 주요 기간으로 나눈다.
글꼴 차단 기간 (font block period) 이 기간 동안 font face을 로드하지 않으면 font face을 사용하려는 요소가 보이지 않는 대체 font face을 렌더링해야 합니다. 이 기간 동안 font face가 성공적으로 로드되면 font face가 정상적으로 사용됩니다.
글꼴 스왑 기간 (font swap period) 글꼴 차단 기간 직후에 발생합니다. 이 기간 동안 font face을 로드하지 않으면 font face을 사용하려는 요소가 대체 font face을 렌더링해야 합니다. 스왑 기간 동안 font face가 성공적으로 로드되면 font face가 정상적으로 사용됩니다.
글꼴 오류 기간 (font failure period) 글꼴 스왑 기간 직후에 발생합니다. 이 기간이 시작될 때 font face가 아직 로드되지 않은 경우 실패한 로드로 표시되어 정상적인 글꼴 대체가 발생합니다. 그렇지 않으면 글꼴이 정상적으로 사용됩니다.
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
font-display: auto; /* or block, swap, fallback, optional */src: local('Awesome Font'),
url('/fonts/awesome-l.woff2') format('woff2'), /* will be preloaded */url('/fonts/awesome-l.woff') format('woff'),
url('/fonts/awesome-l.ttf') format('truetype'),
url('/fonts/awesome-l.eot') format('embedded-opentype');
unicode-range: U+000-5FF; /* Latin glyphs */
}
font-display 속성은 다음과 같이 auto, block, swap, fallback, optional의 5가지 옵션이 있다.
block : FOIT와 동일하게 작동하는 옵션이다. 웹 폰트가 로딩되지 않았을 때는 텍스트를 렌더링하지 않는다(최대 3초). 웹 폰트 로딩이 완료되면 웹 폰트를 적용한다. font-display: block &amp;nbsp;속성 작동 방식 [출처]&amp;nbsp;https://d2.naver.com/helloworld/4969726&amp;nbsp;
swap : FOUT와 동일하게 작동하는 옵션이다. 우선 폴백 폰트로 글자를 렌더링하고, 웹 폰트 로딩이 완료되면 웹 폰트를 적용한다. 웹 폰트 로딩 여부와 관계없이 항상 텍스트가 보인다. font-display: swap &amp;nbsp;속성 작동 방식 [출처]&amp;nbsp;https://d2.naver.com/helloworld/4969726
fallback : 이 옵션을 사용하면 우선 100ms 동안 텍스트가 보이지 않고, 그 후 폴백 폰트로 렌더링한다. 특이한 점은 약 2초의 전환(swap) 시간이 있다는 점이다. 이 시간 안에 로딩이 완료되면 웹 폰트로 전환한다. 하지만 이 시간이 지나면 웹 폰트 다운로드가 완료되어도 웹 폰트로 전환하지 않고 폴백 폰트를 유지한다. 전환 시간 이후에 다운로드된 웹 폰트는 웹 페이지에 적용되지는 않지만 캐시에는 저장된다. 그래서 추후에 사용자가 다시 방문했을 때 바로 웹 폰트가 적용된다는 장점이 있다.
optional : 우선 100ms 동안 텍스트가 보이지 않고 그 후 폴백 폰트로 전환한다. 웹 폰트를 다운로드하지만 브라우저가 네트워크 상태를 파악해 웹 폰트 전환 여부를 결정한다는 점이 이 옵션의 특이한 점이다. 예를 들어 네트워크의 연결 상태가 안 좋으면 웹 폰트의 다운로드가 완료되어도 캐시에 저장만 하고 전환은 하지 않는다. font-display: optional &amp;nbsp;속성 작동 방식 [출처] https://d2.naver.com/helloworld/4969726
