웹 폰트(web font)는 웹 문서에서 사용할 폰트를 불러와 글자를 표시하는 기술이다. 서버의 파일을 받아 사용하면 방문자의 기기에 미리 설치되지 않은 글자체도 보여줄 수 있다. 글자체의 모양과 함께 파일 용량, 불러오는 시간, 로딩 중의 표시를 살펴야 한다.

• @font-face에서 글자체의 이름과 파일 경로 등을 선언하고, font-family에 그 이름을 지정해 요소에 적용한다. url()로 파일을 불러올 수 있다.

• 일반적인 웹 배포에서는 압축 효율과 브라우저 지원을 고려해 WOFF2부터 검토할 수 있다. WOFF나 EOT가 나오는 오래된 예제는 당시의 지원 환경과 함께 읽는다. (MDN의 @font-face 안내)

• 파일을 불러오지 못할 때 사용할 글자체는 폴백으로 정한다. 폰트를 기다리는 문장은 로딩 중의 표시와 실패했을 때의 줄바꿈을 다룬다. 대체 글자체의 치수 맞추기는 교체 전후에 줄 길이가 달라지는 문제로 이어진다.

• 구글 폰트

• 눈누

기타 등등

• @font-face에서 local()을 쓰면 기기에 이미 설치된 글자체를 먼저 찾아볼 수 있다. 같은 선언 안에서도 파일을 내려받는 경로와 로컬에서 찾는 경로를 나누어 적을 수 있다. 출처
• font-display는 파일을 기다리는 동안 글자를 어떻게 보여줄지 정한다. 글자체 선택에는 최종 모양뿐 아니라 독자가 기다리는 동안의 화면도 포함된다. 출처

#CSS