How can I prioritize using local fonts with @font-face in CSS?

@font-face src: local - Utilizing Local Fonts with Confidence

When incorporating custom fonts into your CSS code, you may encounter a scenario where you want the browser to prioritize using locally installed fonts rather than downloading them from a remote source. This issue arises when using @font-face, and browsers may behave inconsistently regarding downloaded fonts.

To address this problem, there is a simple solution you can implement in your CSS code. By including 'local' as the first source, the browser will attempt to utilize the font from the user's local system if it exists. Your modified code should resemble this:

<code class="css">@font-face {
    font-family: 'DejaVu Serif';
    src: local('DejaVu Serif'), url('DejaVuSerif-webfont.eot');
    src: local('DejaVu Serif'), url('DejaVuSerif-webfont.woff') format('woff'), url('DejaVuSerif-webfont.ttf') format('truetype'), url('DejaVuSerif-webfont.svg#webfontCFu7RF0I') format('svg');
    font-weight: normal;
    font-style: normal;
}</code>

With this modification, the browser will first check for the presence of 'DejaVu Serif' on the user's local system. If the font is found, it will be used without the need for downloading. Only if the local font is not available will the browser proceed to download the remote font files.

Refer to the provided documentation for further details: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src

The above is the detailed content of How can I prioritize using local fonts with @font-face in CSS?. For more information, please follow other related articles on the PHP Chinese website!