웹 폰트 최적화: local 함수 활용하기

CSS에서 웹 폰트를 적용할때 @font-face 속성을 활용하는데요. 이 속성을 통해 로컬 폰트와 웹 폰트 두 가지 방식으로 폰트를 적용할 수 있습니다.

local 함수는 사용자의 컴퓨터에 이미 설치된 폰트를 참조합니다. 이 방법을 사용하면 웹 페이지 로딩 시 해당 폰트를 다운로드할 필요가 없어져, 페이지 로딩 시간이 단축됩니다. 예를 들어, 다음과 같이 local()함수와 url함수를 적용할 수 있습니다.

@font-face

{ font-family: 'MyWebFont'; /* 폰트 이름 설정 */

src: local('MyWebFont'), /* 사용자 컴퓨터에 설치된 폰트 */

url('mywebfont.woff2') /* 웹 폰트 파일 경로 */

}

과거 웹 페이지는 주로 시스템 폰트나 제한된 웹 안전 폰트를 사용했기 때문에 local 함수와 같은 고급 기능은 비교적 덜 알려져 있었는데요.

local 함수의 사용은 속도 개선과 대역폭 절약을 통해 사용자 경험을 향상시키는 데 도움이 됩니다. 따라서 local 함수와 함께 url 함수를 백업 옵션으로 사용하는 하이브리드 접근법을 권장합니다. 폰트의 사용 가능성과 성능을 최적화할 수 있기 때문입니다.

https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face