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

Question

What is the correct way to use @font-face so that the browser does not download the font if the user already has it?

I use @ font-face to identify DejaVu, which is already installed on my system (linux). Firefox does not download the font, but Chromium downloads it every time!

My CSS is based on font squirrel and this question looks 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; } 

Answer 1

If you want to check local files first:

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

A more detailed description of what to do here .

Answer 2

I really didn’t do anything with font-face , so take it with a pinch of salt, but I don’t think that for any browser it will be finally indicated whether this web font is installed on the user's computer or not.

A user may, for example, have a different font with the same name installed on his computer. The only way to finally say is to compare the font files to make sure they are identical. And the browser could not do this without first downloading its web font.

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