How Can I Avoid Unnecessary Font Downloads with @font-face for Locally Installed Fonts?

@font-face src: local - Avoiding Unnecessary Font Downloads for Installed Fonts

@font-face allows you to define custom fonts in your CSS. However, it may sometimes lead to unnecessary font downloads when the user already has the font installed locally. This can be a performance issue, especially for browsers that download fonts for each instance of the @font-face declaration.

To mitigate this problem, the "local" keyword can be used in the @font-face rule to instruct the browser to check for the local font before attempting to download it. The following code snippet demonstrates how to use the "local" keyword:

<code class="css">@font-face {
  font-family: 'DejaVu Serif';
  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>

By placing the "local" keyword before any URL-based sources, the browser will first attempt to use the locally installed DejaVu Serif font. If the local font is not available, the browser will then download the font from the provided URL sources.

This approach ensures that the browser downloads the font only when necessary, improving the overall performance of the website for users who already have the font installed.

The above is the detailed content of How Can I Avoid Unnecessary Font Downloads with @font-face for Locally Installed Fonts?. For more information, please follow other related articles on the PHP Chinese website!