@font-face src: local - How to use the local font if the user already has it?

CssFont Face

Css Problem Overview


What is the right way to use @font-face so that the browser will not download the font if the user already have it?

I am using @font-face to define DejaVu, which is already installed on my system (linux). Firefox is not downloading the font, but Chromium is downloading it every time!

My CSS code, based on font squirrel and that question look like this:

@font-face {
	font-family: 'DejaVu Serif';
	src: 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;
}

/* ... @font-face definitions for italic and bold omitted ... */

@font-face {
	font-family: 'DejaVu Serif';
	src: url('DejaVuSerif-BoldItalic-webfont.eot');
	src: local('DejaVu Serif Bold Italic'), url('DejaVuSerif-BoldItalic-webfont.woff') format('woff'), url('DejaVuSerif-BoldItalic-webfont.ttf') format('truetype'), url('DejaVuSerif-BoldItalic-webfont.svg#webfontQAewh7pf') format('svg');
	font-weight: bold;
	font-style: italic;
}

Css Solutions


Solution 1 - Css

If you want to check for local files first do:

@font-face {
font-family: 'Green Sans Web';
src:
    local('Green Web'),
    local('GreenWeb-Regular'),
    url('GreenWeb.ttf');
}

There is a more elaborate description of what to do here.

Solution 2 - Css

I haven’t actually done anything with font-face, so take this with a pinch of salt, but I don’t think there’s any way for the browser to definitively tell if a given web font installed on a user’s machine or not.

The user could, for example, have a different font with the same name installed on their machine. The only way to definitively tell would be to compare the font files to see if they’re identical. And the browser couldn’t do that without downloading your web font first.

Does Firefox download the font when you actually use it in a font declaration? (e.g. h1 { font: 'DejaVu Serif';)?

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestiondbarbosaView Question on Stackoverflow
Solution 1 - CssThariamaView Answer on Stackoverflow
Solution 2 - CssPaul D. WaiteView Answer on Stackoverflow