[css] font-face 동작 순서

배경

프로젝트 말미에 font에 관련해서 골머리를 싸매게 되었다. 그냥 다운 받아서 local에 넣어가지고 쓰는데 문제는 safari... 왜 브라우저가 여러개야! (IE 지원 고려 안하는 걸 다행으로 생각해야지)

아무튼 font-face의 사용법을 정리할 필요성을 느껴서 한 번 정리해본다.

font-face 사용법

우선 styled-components를 사용 중이니 이걸 base로 적어보고자 한다. 참고로(styled-components는 v.5.3.0을 사용중)

import { createGlobalStyle } from 'styled-components';

export default createGlobalStyle`
	@font-face {
		font-family : 'font name'; // 다른 곳에서 사용할 font name
		font-weight : 400; // 기본 font weight인듯
		font-style : normal;
		src :  local('Noto Sans KR'), url(${NotoSansKR}) format('woff');
		// 원격 폰트(remote font) 파일의 위치를 나타내는 URL 값을 지정하거나, 
		사용자 컴퓨터에 설치된 폰트명을 local("Font Name")형식으로 지정하는 속성이다.
	}
`;

보통 css에서 font-family : '1순위', '2순위', '3순위' 이렇게 적는다. 정확한 원리는 다음과 같다.

1. '1순위'의 font를 로컬에서 찾고, 없으면 웹에서 찾는다.
2. 그 다음 순서 반복
3. 없으면 브라우저 설정의 default font 사용. serif, sans-serif, monospace, standard가 있다.
4. 이때 다른 것들이 정해져 있지 않으면 standard가 적용되니 serif나 sans,serif를 마지막에 적어주자!