CSS @font-face 규칙 완벽 가이드: 웹 폰트 정의와 활용법

@font-face 규칙은 문서에서 사용할 글꼴(font face)을 상세하게 정의하는 CSS 규칙입니다. 이 규칙을 활용하면 웹 서버에 저장된 글꼴 파일을 다운로드하여 페이지에 적용할 수 있으며, 방문자의 기기에 해당 글꼴이 설치되어 있지 않더라도 원하는 타이포그래피를 일관되게 구현할 수 있습니다.

다만 브라우저나 실행 환경에 따라 다운로드 가능한 글꼴의 크기나 형식에 제한이 있을 수 있으므로, 실무에서는 여러 조건을 고려한 설정이 필요합니다.

기본 예제

다음은 @font-face 규칙을 사용해 외부 글꼴과 로컬 글꼴을 각각 정의하는 예제입니다.

<style>
   <!--
      @font-face {
         font-family: "Scarborough Light";
         src: url("https://www.font.site/s/scarbo-lt");
      }

      @font-face {
         font-family: Santiago;
         src: local ("Santiago"),
         url("https://www.font.site/s/santiago.tt")
         format("truetype");
         unicode-range: U+??,U+100-220;
         font-size: all;
         font-family: sans-serif;
      }
   -->
</style>

주요 디스크립터 살펴보기

font-family

정의하려는 글꼴의 이름을 지정합니다. 이후 스타일시트에서 font-family 속성으로 이 이름을 참조하면 해당 글꼴이 적용됩니다.

src

글꼴 리소스의 위치를 지정합니다. local() 함수는 방문자 시스템에 이미 설치된 글꼴을 우선 확인하고, url() 함수는 웹상의 글꼴 파일 경로를 지정합니다. format()을 함께 사용하면 truetype, woff 등 글꼴 파일의 형식을 명시적으로 알려줄 수 있습니다.

unicode-range

해당 글꼴이 적용될 유니코드 문자의 범위를 지정합니다. 위 예제처럼 특정 문자 코드 범위(U+100~220 등)만 지정하면, 필요한 문자에 대해서만 글꼴이 선택적으로 적용되어 성능 최적화에도 도움이 됩니다.

실무 활용 팁

브라우저 호환성을 높이려면 woff2, woff, ttf 등 여러 형식의 글꼴 파일을 함께 제공하는 것이 좋습니다. 또한 font-display 속성을 추가하면 글꼴이 로딩되는 동안 텍스트를 어떻게 표시할지 제어할 수 있어, 빈 화면 현상(FOIT)이나 글꼴 교체 깜빡임(FOUT)을 완화할 수 있습니다.