90

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;
}
Community
  • 1
  • 1
dbarbosa
  • 2,819
  • 5
  • 24
  • 29

3 Answers3

114

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.

Thariama
  • 49,060
  • 11
  • 131
  • 155
  • 3
    What if we have 2 `src`s (as in OP's example)? Do we put `local` on the first or second one? – mpen Jan 13 '15 at 17:51
  • 2
    How do you know what the correct font names are? – Awn Mar 02 '21 at 15:04
  • Yea I don't get how you know what the value is to pass into `local()` ? – xaunlopez Apr 28 '21 at 11:16
  • 3
    Ah ok, @Awn, it's the "full name" and "Postscript name". On Mac OSX can be found following https://apple.stackexchange.com/questions/79875/how-can-i-get-the-postscript-name-of-a-ttf-font-installed-in-os-x – xaunlopez Apr 28 '21 at 11:19
  • Thanks, this helped me resolve a problem with Firefox downloading an external font instead of using the locally installed one (it seems to require the Postscript name as of now). – Robidu Sep 22 '21 at 22:43
0

In case someone still need it:

Download the font you need from fonts.google.com, then set your CSS file:

@font-face { font-family: roboto-regular; src: url('./fonts/Roboto-Regular.ttf'); }
body {
  font-family: roboto-regular;
}

Note: make sure the path to the TTF file is correct.

Niu Bee
  • 21
  • 2
-8

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
  • 93,468
  • 54
  • 192
  • 264
  • well, font names issue is of short impact here i guess (i never had any problem with it) – Thariama Oct 01 '10 at 07:44
  • Yeah I guess a collision is unlikely. Carry on. – Paul D. Waite Oct 01 '10 at 07:50
  • 7
    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 Oct 01 '10 at 07:51
  • @dbarbosa: I know how `font`/`font-family` work. I just clearly don’t know how `@font-face` works! – Paul D. Waite Oct 01 '10 at 09:42