웹 폰트?

폰트의 사전적 정의는 서로 어울리도록 일관성을 갖춘 글자의 모둠을 일컫는 말로, 흔히 글씨체 혹은 글꼴이라 한다.

웹 폰트는 이러한 글꼴 파일을 서버에 탑재하여 클라이언트로 보내주는 방식의 기술이다. 오늘날의 CSS3에 이르기까지 웹 페이지에서 폰트를 보여주기 위한 여러가지 시도들이 있었다고 한다.

CSS1
최초의 CSS 에서는 font 요소에 지정된 글꼴은 사용자의 컴퓨터에 설치되어 있어야 했고, 설치되어 있지 않다면 브라우저가 기본으로 가지는 Serif, Sans-serif, Monospace, Cursive, Fantasy와 같은 폴백 글꼴이 사용되었다.

CSS2
1998년 출시된 CSS2에서는 글꼴을 선택할 수 있는 프로세스가 추가되었으나 사용 빈도가 적어 CSS2.1에서 제거되었다.

CSS3
현재 웹 개발에 사용되고 있는 CSS3에서는 font module에 글꼴 다운로드 기능이 추가되었다. 이를 통해, 웹 브라우저에 관계없이 항상 동일한 글꼴을 표현할 수 있다.

---

웹 폰트의 장단점

장점

• 모두에게 동일한 글꼴을 제공하여 원하는 디자인을 일관성있게 사용자에게 제공할 수 있다.

단점

• 서버에 저장된 폰트를 다운로드해야 하기 때문에, web safe font를 사용하는 것과 비교하여 속도 저하가 발생한다.
• 설정 방법과 속도에 따라 렌더링 과정에서 사용자에게 불편한 UX를 제공할 수 있다.

---

웹 폰트의 종류

웹 폰트의 특성상 서버로부터 다운로드하는 과정이 필요하기 때문에, 폰트 파일의 용량이 중요하다.

• 출처: https://www.ionos.co.uk/digitalguide/websites/web-design/web-fonts-the-power-of-modern-typography/

eot
MS에서 웹 페이지 내부에 임베디드 글꼴로 사용하기 위해 설계한 오픈타입 글꼴의 축소형으로, IE에서만 통용됨.
ttf/oft
개발 주체가 누구냐의 차이가 있으며, 웹 뿐만 아니라 텍스트가 사용되는 프로그램에서 일반적으로 사용되는 폰트 확장자.
woff
ttf/otf의 무단배포 문제를 보완하기 위해 만들어진 웹 폰트 확장자로 라이센스와 메타데이터를 포함할 수 있어 저작권 문제에 유리하며, W3C 권고에 포함되어 있음.
woff2
woff와 비교하여 30 ~ 50%정도 더 압축되어 용량이 가벼움.

---

웹 폰트 사용법과 최적화 방법

사용법

웹 폰트를 사용하는 방법은 @font-face라는 CSS 명령어를 사용하여 사용할 폰트의 이름과 해당 폰트를 다운로드할 경로를 브라우저에게 알린 후에, 원하는 html 태그에서 font-family속성을 적용하여 사용한다. 일반적으로는 최상위 태그에 font-family를 지정하여 하위의 모든 태그에 적용해주는 방식을 사용한다.

@font-face 작성방법

@font-face {
    font-family: <a-remote-font-name>
    src: <source> [, <source>]*;
    [font-weight: <weight>];
    [font-style: <style>];
}

예제(using woff2)

@font-face {
	font-family: "font1";
    src: loacl('font1'),
    	 url(폰트를 다운로드 받은 서버 주소) format("woff2");
}

.header {
	font-family: font1, sans-serif, serif;
}

다음과 같이 작성 시, header tag 내부의 폰트는 font1이라는 폰트가 적용될 수 있다. 먼저 local()함수가 시스템 내부에 font1이 설치되어 있는지를 확인하고, 없다면 url()을 통해 이를 다운로드하고, 만약 다운로드하지 못한다면, 기본적으로 가지는 폴백 폰트가 적용된다.

---

최적화1 - 폰트 용량 줄이기

앞서 언급한 폰트 확장자에 따라 그 용량이 다르다. woff2가 현재로서는 그 용량이 가장 작지만, 지원되는 브라우저를 확인후 woff2로 설정할지, woff로 설정할지를 선택하여 적용해야 한다. 아래의 사이트에서 기존 otf나 ttf 형식의 폰트파일을 다른 형식으로 변환할 수 있고, 아래 이외에도 여러 사이트들이 존재한다.

폰트 변환 사이트
anyconv
Convertio

---

최적화2 - 서브셋 폰트

서브셋 폰트란 글꼴 파일에서 자주 사용되지 않는 글자를 제거하고 남은 글자만 존재하는 폰트이다.

영어의 경우 26개의 알파벳으로 이루어져있지만, 한글의 경우 자음과 모음의 조합으로 영어와 비교하여 그 경우의 수는 비교할 수 없을정도로 크다. 물론, 과거에 뷁,뛝 이런 글자를 인터넷 커뮤에서 사용했지만 아무튼 다시 돌아와서, 이렇게 의미도 없는 뜻을 가진 단어를 사용한다고 하더라도 분명 사용하지 않는 조합의 글자는 있기 때문에, 이렇게 사용되지 않는 글자가 제거된 글꼴 파일을 만들 수 있다.

사용방법까지 작성하면 글이 너무 길어질 것 같아 생략하며, 구글링을 통해 쉽게 접근할 수 있다. 아래 사이트에서는 앞서 언급한 폰트 변환에 추가적으로 서브셋 폰트 변환도 가능하므로, 아래의 사이트를 추천한다.

서브셋 폰트 변환 사이트
transfonter

---

최적화3 - 텍스트 렌더링 방법

브라우저에 따라 텍스트를 렌더링하는 방식의 차이가 있다.

FOIT(Flash of Invisible Text)
브라우저에서 웹 폰트를 다운로드하기 전까지는 텍스트가 보이지 않는 방식.

FOUT(Flash of Unstyled Text)
브라우저에서 웹 폰트를 다운로드하기 전까지는 텍스트가 대체 글꼴로 렌더링 되는 방식.

• 출처: https://d2.naver.com/helloworld/4969726

사용자의 UX적인 관점에서는 FOUT 방식의 렌더링이 더 유리하므로, font-display 속성을 사용하여 FOUT 방식을 브라우저에 관계없이 적용할 수 있다.

사용방법은 앞서 설명한 @font-face 작성 시에 font-display: swap 속성을 작성하면 된다. font-display 속성에는 이외에도 여러가지 속성이 존재하며, mdn 문서에서 확인할 수 있다.

---

최적화4 - preload 옵션 사용

<link rel="preload" href="./nanumGothic.woff2" as="font" type="font/woff2" crossorigin="anonymous"> 

웹 폰트 사용시 html 문서에서 link태그를 사용하여 웹 폰트를 적용하는데 이 때, preload라는 속성을 부여하여 브라우저를 렌더링하기 위해 CSS파일을 로딩하기에 앞서 preload가 부여되어 있는 즉, 중요도가 더 높은 자원을 먼저 로딩할 수 있다. 때문에, 렌더링 과정에서 CSSOM을 구성하기 위한 다른 여러 스타일링 이전에 폰트의 로딩이 완료되어 렌더링이 완료되었을 때, 폰트가 보이지 않는 문제를 해결할 수 있다.