How to Prevent Browsers from Downloading Fonts Already Installed on the User\'s System Using @font-face?

@font-face src: local - Ensuring Local Font Usage

This question addresses the issue of how to prevent browsers from downloading fonts that are already installed on a user's system when using the @font-face rule.

The CSS provided in the question uses the syntax recommended by Font Squirrel. However, the problem persists in Chromium, suggesting a browser-specific issue.

The solution lies in leveraging the "local()" keyword to prioritize local font files. By modifying the src property as seen below, the browser will first attempt to load the font from the local system:

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

In this modified code, 'local('DejaVu Serif')' ensures that Chromium checks for the DejaVu Serif font installed on the user's system before attempting to download it from the web.

This approach guarantees optimal font loading, as the browser will use the local copy if available, avoiding unnecessary downloads and reducing page load time.

The above is the detailed content of How to Prevent Browsers from Downloading Fonts Already Installed on the User\'s System Using @font-face?. For more information, please follow other related articles on the PHP Chinese website!