CSS @font-face 규칙으로 다운로드할 글꼴 위치 정의하기

CSS에서 @font-face 규칙은 웹페이지에서 사용할 글꼴의 다운로드 위치를 정의하는 데 사용됩니다. 이 규칙을 활용하면 방문자의 컴퓨터에 설치되어 있지 않은 글꼴도 웹에서 불러와 표시할 수 있습니다.

다만 브라우저마다 구현 방식이 다르기 때문에 일부 환경에서는 특정 제한 사항이 적용될 수 있다는 점을 유의해야 합니다.

@font-face 규칙의 주요 속성

• font-family: 글꼴에 지정할 이름을 정의합니다.
• src: 글꼴 파일의 위치(URL)를 지정하며, local()을 사용해 로컬에 설치된 글꼴을 우선 참조할 수도 있습니다.
• format: 글꼴 파일 형식(truetype, woff 등)을 명시합니다.
• 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;
         font-size: all;
         font-family: sans-serif;
      }
   -->
</style>

예제 설명

위 예제에서 첫 번째 @font-face 규칙은 "Scarborough Light"라는 글꼴 패밀리를 정의하고, 해당 글꼴 파일이 위치한 URL을 src 속성으로 지정합니다.

두 번째 규칙은 Santiago 글꼴에 대해 먼저 local() 함수로 방문자 시스템에 설치된 글꼴이 있는지 확인하고, 없을 경우 지정된 URL에서 TrueType 형식의 글꼴 파일을 내려받습니다. 또한 unicode-range를 통해 특정 유니코드 문자 범위에만 이 글꼴이 적용되도록 설정했습니다.

참고 사항

@font-face 규칙은 스타일시트 내 어디에나 선언할 수 있으며, 실제로 글꼴이 필요한 요소가 있을 때 브라우저가 글꼴 파일을 다운로드합니다. 최신 웹 개발에서는 WOFF 및 WOFF2 형식을 함께 지정하여 브라우저 호환성과 로딩 성능을 모두 확보하는 것이 권장됩니다.