tags:

views:

68

answers:

2

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;
}
A: 

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';)?

Paul D. Waite
well, font names issue is of short impact here i guess (i never had any problem with it)
Thariama
Yeah I guess a collision is unlikely. Carry on.
Paul D. Waite
font/font-family in css does not make a browser download anything. If it does not find the font locally, it ignores it. That's why usually we use a font stack (a list of fonts) - if it does not have the first, it tries the second and so on.@font-face is something relatively "new" (http://stackoverflow.com/questions/2219916/is-font-face-usable-now)
dbarbosa
@dbarbosa: I know how `font`/`font-family` work. I just clearly don’t know how `@font-face` works!
Paul D. Waite
+4  A: 

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('GraublauWeb.ttf');
}

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

Thariama