CSS @font-face 규칙으로 웹 문서에 사용할 글꼴 정의하기

CSS에서 문서에 사용할 글꼴(font face)을 직접 정의하려면 @font-face 규칙을 사용합니다. 이 규칙을 활용하면 웹 폰트 파일을 불러와 사용자 브라우저에서 원하는 서체를 표시할 수 있습니다.

@font-face의 주요 속성

• font-family: 정의할 글꼴의 이름을 지정합니다. 이후 스타일에서 이 이름으로 해당 글꼴을 참조합니다.
• src: 글꼴 파일의 위치를 지정합니다. url()로 외부 파일 경로를 지정하거나, local()로 사용자 시스템에 설치된 글꼴을 우선 참조할 수도 있습니다.
• format: 글꼴 파일의 형식(예: truetype, woff, woff2)을 명시하여 브라우저가 파일을 올바르게 해석하도록 도웁니다.
• unicode-range: 특정 유니코드 문자 범위에만 해당 글꼴을 적용합니다.

예제 코드

다음 코드는 @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;
      }
   -->
</style>

코드 설명

첫 번째 @font-face 규칙은 "Scarborough Light"라는 이름의 글꼴을 외부 URL에서 불러오도록 정의합니다.

두 번째 규칙은 Santiago 글꼴을 정의하는데, 먼저 local("Santiago")로 사용자 컴퓨터에 해당 글꼴이 설치되어 있는지 확인하고, 없으면 지정된 URL에서 트루타입(TrueType) 형식의 글꼴 파일을 다운로드합니다. 또한 unicode-range 속성을 통해 특정 문자 범위에만 이 글꼴이 적용되도록 설정했습니다.

참고 사항

@font-face 규칙은 모든 최신 브라우저에서 지원됩니다. 실무에서는 로딩 속도와 호환성을 위해 WOFF2 형식을 우선적으로 사용하고, 구형 브라우저를 위한 대체 형식(WOFF, TTF)을 함께 제공하는 것이 좋습니다.