@font-face src: local - 로컬 글꼴 사용 보장

이 질문은 브라우저가 다음과 같은 글꼴을 다운로드하지 못하도록 방지하는 방법에 대한 문제를 다룹니다. @font-face 규칙을 사용할 때 사용자 시스템에 이미 설치되어 있습니다.

질문에 제공된 CSS는 Font Squirrel에서 권장하는 구문을 사용합니다. 그러나 Chromium에서는 문제가 지속되어 브라우저 관련 문제를 암시합니다.

해결책은 "local()" 키워드를 활용하여 로컬 글꼴 파일의 우선 순위를 지정하는 것입니다. 아래와 같이 src 속성을 수정하면 브라우저는 먼저 로컬 시스템에서 글꼴을 로드하려고 시도합니다.

src: local('DejaVu Serif'), url('DejaVuSerif-webfont.woff') format('woff'), url('DejaVuSerif-webfont.ttf') format('truetype'), url('DejaVuSerif-webfont.svg#webfontCFu7RF0I') format('svg');

이 수정된 코드에서 'local('DejaVu Serif')'는 Chromium이 설치된 DejaVu Serif 글꼴을 확인하도록 합니다. 웹에서 다운로드를 시도하기 전에 사용자 시스템.

이 접근 방식은 브라우저가 최적의 글꼴 로딩을 보장합니다. 가능한 경우 로컬 복사본을 사용하여 불필요한 다운로드를 방지하고 페이지 로드 시간을 줄입니다.