웹 폰트의 동작 방식

브라우저는 기본적인 폰트 설정을 가지고 있다.

예컨대 크롬의 폰트 설정(chrome://settings/fonts)에 들어가면 글꼴 크기, 폰트 스타일을 지정가능하다.

반면, 웹 폰트는 해당 페이지에서 지정한 폰트를 사용하는 것이다.(크롬은 기본적으로 허용이고, 파이어폭스는 허용 여부를 선택할 수 있다)

 

폰트 임베딩(font-embeding)

---

사용자가 폰트가 설치되어 있이 않는 경우를 대비하여 폰트를 브라우저에 삽입하는 기능

html에 link 태그로 삽입하거나 @font-face라는 css 문법을 사용한다.

 

@font-face 예시

@font-face {
    font-family: 'CustomFont';
    src: url('/fonts/CustomFont.woff2') format('woff2'),
         url('/fonts/CustomFont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CustomFont';
    src: url('/fonts/CustomFont.woff2') format('woff2'),
         url('/fonts/CustomFont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CustomFont';
    src: url('/fonts/CustomFont.woff2') format('woff2'),
         url('/fonts/CustomFont.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

• font-family | 다운받은 폰트의 이름
• src | 해당 폰트의 경로. format을 함께 지정할 수 있고, 일반적으로 압축률과 호환성이 좋은 woff를 사용한다. 복수를 지정하여 순서대로 로드를 시도하고 실패 시 다음 폰트를 불러온다.
• font-weight(옵션) | 해당 폰트의 굵기이다. 일반적으로 폰트를 불러올 때 동일한 폰트의 다른 굵기 값을 함께 가져온다
• font-display(옵션) | 웹 폰트 로드가 로드되는 동안 대체 폰트의 유무를 지정한다.
  • swap: 폰트가 로드될 때까지 대체 폰트를 사용하다가, 로드되면 즉시 웹 폰트로 교체
  • fallback: 로딩 시간이 길어지면 웹 폰트 대신 대체 폰트를 사용하고, 웹 폰트가 로드되어도 교체하지 않음
  • block: 웹 폰트가 로드될 때까지 텍스트가 보이지 않음 (최대 3초)
  • optional: 네트워크 상황에 따라 웹 폰트 로딩을 포기하고 대체 폰트를 사용

 

폰트 사용 예시

---

body {
    font-family: 'CustomFont', Arial, sans-serif;
}

다운 받은 폰트를 font-family에서 사용가능하다. 이 때 순서대로 로드를 시도하며 실패 시, 다음 폰트를 로딩한다.

구체적인 것에서 덜 구체적인 것으로 순서를 적는데 일반적인 순서는

• web font | 개발자가 원하는 구체적인 폰트. 다운로드를 받는 것이 일반적
• web safe font |  거의 모든 운영체제와 브라우저에서 광범위하게 사용하는 폰트
• fallback font | 앞의 두가지가 없는 경우를 대비하여 지정하는 마지막 대안 폰트

위 순서는 예시일 뿐, 폰트는 몇 개든지 지정가능하다. 하지만 가장 마지막에는 serif, san-serif, cursive 중 하나를 지정하는 것이 일반적이다. 이들은 특정 폰트를 지칭하는 것이 아니라 폰트의 스타일 범주를 의미한다. 이들은 대개 브라우저에 지정된 해당 범주의 폰트를 사용한다.

• serif | 획이 있는 전통적인 글꼴 스타일. 고풍스러운 느낌.
  • 예시 | Times New Roman, Georgia
• san-serif | 획이 없는 글꼴 스타일 | 현대적이고 간결한 느낌 | 작은 화면에서 볼 때 긴 글의 가독성이 좋음
  • 예시 | Arial, Helvetica
• cursive | 필기체나 손글씨처럼 장식적인 획과 곡선이 첨가된 스타일 | 타이포 그래피
  • 예시 | Comic Sans, Brush Script
• fantasy | 형태의 변형과 장식이 더 가미된 스타일 | 타이포 그래피
  • 예시 | Papyrus, Jokerman
• monospace | 모 글자가 동일한 너비를 가지는 고정폭 글꼴. 코드나 테이블 형식의 데이터에 주로 사용
  • 예시 | Courier New, Lucida Console

 

참고 문서

---

https://developer.mozilla.org/ko/docs/Web/CSS/@font-face

@font-face - CSS: Cascading Style Sheets | MDN

https://olivia-blackcherry.tistory.com/263

[44-9 HTML] font 폰트 스타일링하기, Serif, Sans-serif, Monospace, Cursive, Fantasy, font embeding, fallback font, web sa