당신이 웹을 개발하며, 디자인 가이드를 받았다면 첫 번째로 보는 항목이 바로
typography 일 것이다.우리는 그것을 기계화된 과정처럼
@font-face 를 이용하여 적용하고 있는데, 실상 정확하게 어떤 속성을 이용하여 적용할 수 있는 것인지, 속성은 어떠한 것들이 있는지 알지 못하며 적용하고 있었다.최근 새로운 프로젝트를 진행하며 글꼴을 적용하던 중, 궁금하게 되어 여러 내용들을 찾아보고 적용하는 과정을 거치고 있어, 오늘은 그것에 대해서 정리해보려 한다.
웹 글꼴 포맷
EOT ( Embedded Open Type )
마이크로소프트가 웹에서 사용하기 위해서 제안한 글꼴 포맷
TTF와 OTF를 웹에서 사용할 때 저작권 문제를 해결하기 위해서 TTF와 OTF로부터 EOT 글꼴을 생성하는 구조를 택한다고 한다.
글꼴 압축을 지원해 더 작은 글꼴 파일을 생성할 수 있으며, 암호화를 통한 저작권 보호 기능을 제공한다.현재는 사장되어 더이상 사용되지 않는다.
TTF ( True Type Font )
애플과 마이스크로소프트가 고안한 벡터 글꼴 포맷
윈도우와 맥 운영체제에서 가장 오랫동안 사용되어 온 글꼴 포맷인데, 윈도우와 맥에서 가장 오랫동안 사용되어 온 글꼴 포맷이라고 생각하면 된다. 따라서 대부분의 브라우저에서 TTF를 지원하고 있으며, IE ☹️ 도 지원을 했었기 때문에 호환성 문제도 없어 널리 사용되고 있다.
TTF는 맥 OS에서 문제를 일으키는 경우가 있다. TTF는 어떤 상황에도 원하는 모양의 폰트가 나올 수 있게 글자 모양을 보정해주는 데이터를 넣는 데 이것을 힌트라고 한다. 맥에서 간혹 이 힌트를 무시하고 자체 해석해서 출력을 하게 되는 경우가 있다고 한다.
Chrome 4+, Firefox 3.5, Opera 10+, Safari 3-5, Android, ios에서 지원
OTF ( Open Type Font )
어도비와 마이크로소프트가 협력해서 만든 TTF의 개선판
화면용과 인쇄용 글꼴 정보가 하나의 글꼴 파일 안에 들어있어 더 보기좋은 화면 출력을 보장해준다. 때문에 웹에서 사용하기에도 적합하다. 2바이트 문자를 지원해 65000자까지 글자를 저장할 수 있어 다양한 문자와 그래픽 표현을 하나의 글꼴 파일 안에 구현할 수 있다.
OTF의 경우 구형 윈도우 프로그램에서 오류가 생기기도 한다. 예를 들어 특수 문자를 넣었는데 다른 것으로 보인다거나 하는 등의 오류이다.
Chrome 4+, Firefox 3.5, Opera 10+, Safari 3-5, Android, ios에서 지원
WOFF ( Web Open Font Format ) / WOFF2
웹에서 사용하는 글꼴 포맷을 위해 여러 회사들의 협업으로 제안되었으며, TTF와 함께 가장 널리 사용되는 웹 글꼴 포맷
대부분의 최신 웹 브라우저에서 지원되기 때문에 WOFF 글꼴만으로도 웹 글꼴을 표현하는데 아무런 문제가 없다.
기본적으로 OTF와 TTF에 메타데이터가 추가로 들어있는 구조를 채택하고 있으며, 메타데이터에는 라이센스 관련 데이터를 넣을 수 있어 저작권 표시와 같은 소유권 표시를 할 수 있다.
WOFF 포맷을 개선해 30% 정도 더 작은 글꼴 파일로 압축할 수 있도록 한 WOFF2가 제안되어 있지만 널리 사용되고 있지는 않는다.
Chrome 6+, Firefox 3.6+, Safari 5.1+, FF Mobile(Gecko) 5, Opera Mobile11 에서 지원
SVG ( Scalable Vector Graphics Font ) / SVGZ
벡터 데이터를 저장하는 SVG를 활용한 글꼴 표현
SVG의 글리프 태그(<glyph>)를 활용해 벡터 도형을 사용해 글꼴을 구현한다. 웹 글꼴을 표현하기 어려운 이용 환경에서 유사한 구현을 할 수 있게 된다.
글꼴과 달리 힌팅이 지원되지 않아, 글꼴처럼 미려하게 안티알리아싱이 적용된 출력을 할 수 없다.
웹에서 표현할 때 다소 거칠게 출력되기 때문에 호환성 용도 외에는 추천하지 않는 글꼴 표현 방식
애플 사파리 브라우저에서만 제대로 지원되기 때문에 거의 사용되지 않으며, SVG 포맷이 XML 텍스트 파일 구조이기 때문에 바이너리 포맷인 다른 글꼴에 비해 파일 크기가 큰 단점이 있음.
SVGZ는 SVG의 압축된 버전이다. 모바일 사용에 이상적이라고 생각하면 되겠다.
Chrome, Opera, Safari, Opera Mobile 10.0,Safari Mobile 에서 지원
String | Font Format | Common extensions |
"woff" | .woff | |
"woff2" | .woff2 | |
"truetype" | .ttf | |
"opentype" | .ttf, .otf | |
"embedded-opentype" | .eot | |
"svg" | .svg, .svgz |
사실 svg 형태의 벡터 포맷은 보통 아이콘에만 많이 사용해봤지, 글꼴에 적용할 수 있다는 것은 찾아보면서 처음 알게 되었다. 이번 프로젝트는 woff2, woff만을 적용하기로 했다.
글꼴 로딩 전략
FOIT ( Flash Of Invisible Text )
글꼴이 렌더링 되기 전에 폰트가 전혀 표시되지 않다가 웹 페이지가 로드되는 현상이다.
FOUT ( Flash Of Unstyled Text )
여러 페이지를 접근하다 보면, 처음에는 글꼴이 적용되어 있지 않다가 반짝이면서 폰트가 적용되는 현상을 본 적이 있을 것이다. 이것이 바로 FOUT 이다.
모든 사이트의 목적이 일반적으로 콘텐츠를 제공하는 것임을 감안할 때 FOUT이 선호되어야 하며 이것은
font-display 의 swap이라는 프로퍼티로 기능을 제공해주는데, 이것은 조금 뒤에 더 알아보겠다.
FOUC ( Flash Of Unstyled Content )
사실 FOUC는 위의 두 내용과 다르게, 이번 포스팅의 내용과는 크게 연관이 있는 것은 아니지만, FOIT, FOUT와 관련이 있는 내용인 듯 하여 작성한다. 하지만 웹폰트의 경우에도 IE ☹️에서는 FOUC를 유발했었기에 뜻만 알고 넘어가도록 하자.
FOUC는 브라우저로 웹문서에 접근했을때, 미처 CSS의 스타일이 모두 적용되지 못한 상태에서 화면이 표시되어 발생하는 화면 깜박임, 스타일의 적용 전과 적용 후가 그대로 화면에 노출된 상태로 변경되는 현상등을 일컫는다.
font-face
@font-face { font-family: <a-remote-font-name>; src: <source> [,<source>]*; [font-weight: <weight>]; [font-style: <style>]; [font-display: <display>]; }
- <a-remote-font-name> : font 속성에서 폰트명(font face)으로 지정될 이름을 설정한다.</a-remote-font-name>
- <source> : 원격 폰트(remote font) 파일의 위치를 나타내는 URL 값을 지정하거나, 사용자 컴퓨터에 설치된 폰트명을 local("Font Name")형식으로 지정하는 속성이다.
- <weight> : 폰트의 굵기(font weight) 값
- <style> : 폰트 스타일(font style) 값
- <display> : 폰트 로드 방법 명시
src
@font-face { font-family: 'Pretendard'; font-weight: 700; font-display: swap; src: local('Pretendard Bold'), url('./fonts/Pretendard/Pretendard-Bold.woff2') format('woff2'), url('./fonts/Pretendard/Pretendard-Bold.woff') format('woff'); }
- local: 로컬에 이미 설치 된 폰트의 경로를 적음
- url: 다운로드 할 웹폰트의 주소를 적음
콤마를 이용해서 여러분 중첩해서 사용 할 수 있다. 이렇게 적게 되면 브라우저는 선언한 순서대로 이동하며 적용할 수 있는 폰트를 찾게 된다.
추가적으로 불필요한 네트워크 다운로드를 피하기 위해 format 속성을 사용하면 되겠다. format 속성을 사용하면 브라우저에서 지원하지 않는 폰트 포맷의 경우 무시하고, 지원하는 확장자만 다운로드가 가능하다.
font-display
font-display: auto; font-display: block; font-display: swap; font-display: fallback; font-display: optional;
font-display 는 글꼴이 다운로드 되어 사용할 준비가 되어있는지의 여부와 시기에 따라 글꼴이 표시되는 방식을 결정한다.auto
user-agent 에 따라 어떻게 표시될 지 결정된다.
브라우저의 기본 동작이며 대부분의 브라우저는 위에서 설명한 내용인 FOIT를 선호한다.
block
웹 글꼴이 로드 될 때까지 브라우저가 텍스트를 숨기려면 ( FOIT )
font-display: block를 적용하면 된다.글꼴이 특정 기간 (보통 3 초) 내에 로드되지 않으면 브라우저는 어쨌든 대체 글꼴을 사용하고 로드 된 후 웹 글꼴을 교체한다.
FOUT 가 별로 좋지 않다고 볼때 이것이 최선의 선택이라고 생각될수는 있지만 로드 되기 전까지 텍스트가 보이지 않아서 페이지를 사용할 수없고 콘텐츠를 읽을 수 없다는 것을 유의해야 합니다.
swap
글꼴에 매우 작은 차단 기간과 무한 스왑 기간을 부여한다.
즉 로드되기 이전까지는 fallback 글꼴이 노출되고 있으며, 폰트가 로드되기 이전까지는 주구장창 기다려주다가 로드된 시점에 바로 변경해주는 것이다.
fallback
swap과 매우 비슷해보이지만 차이점이라면 100ms 만큼 block 기간으로 시작하고 난 뒤에, fallback 글꼴을 표시한다. 그 이후에 3초 내에 웹 글꼴이 로드되지 않는다면 계속 fallback 글꼴이 사용되는 것이다.FOIT의 형태를 가져가려 하는데 ( 사용자가 처음 접근할 때 text를 봐야하는 것에 대해서 걱정하지 않는다 ), 웹 폰트가 매우 빠른 속도로 로드가 되는 경우라면 이 형태를 가져가면 되는 것으로 생각된다.
optional
optional은 fallback과 비슷하지만 글꼴을 로드하는 데 매우 짧은 시간 (~ 100ms)을 제공하며 그 후에는 교체되지 않는다. 그러나 연결이 너무 느려서 글꼴을 로드 할 수 없는 경우 브라우저가 글꼴 요청을 중단하도록 결정할 수 있는 추가 기능이 있다.font preload
FOIT / FOUT 기간을 최소화 하고 싶을 것이다. 그런 경우 가능한 빠르게 웹 글꼴 파일을 로드하게 선언할 수 있는데,
<link rel="preload"> 를 html <head> 단에 추가하면 된다.<link rel="preload" href="./src/styles/fonts/Pretendard/Pretendard-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
이 태그를 추가하면 브라우저에 글꼴 파일로드를 즉시 시작하도록 지시하지만, 일반적으로 CSS에서 특정 글꼴에 대한 참조를 찾고 이를 사용하는 dom 요소를 찾을 때까지 시작되지 않는다.
브라우저는 일반적으로 현재 페이지에 필요한 글꼴 만 다운로드 해주기 때문에, preload를 사용하면 이 동작이 재정의되어
글꼴이 사용되지 않더라도 브라우저가 글꼴을 다운로드 하도록 한다. 따라서 각 글꼴의 형식 하나만 preload하도록 하자. ( 위에서는 woff )preload 한 글꼴이 많을수록 이 기술에서 얻을 수 있는 이점이 적으므로 '스크롤없이 볼 수있는 부분'(사용자가 스크롤하지 않고 보게되는 처음 100vh )에 나타나는 글꼴의 우선 순위를 정하면 될 것 같다.