94

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,969
  • 5
  • 25
  • 29

3 Answers3

120

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
  • 50,002
  • 13
  • 138
  • 166
  • 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
  • 4
    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
  • 5
    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
  • 53
  • 4
  • This will only work if your fonts folder is located in your css folder. In the case you store your fonts outside the css folder you have to use src: url('../fonts/Roboto-Thin.ttf'); – Marcel Zebrowski Jan 15 '23 at 12:25
0

Rather an old discussion, but is someone comes to this place, here some more infos.

  1. goto https://google-webfonts-helper.herokuapp.com/fonts
  2. select there the font(s) you need/want
  3. downlaod the selected fonts
  4. copy the displayed css

The copied css code may not be 100% correct, so below what I have been using (and works perfectly):

/* open-sans-regular - vietnamese_latin_hebrew_greek_cyrillic     */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/open-sans-v34-vietnamese_latin_hebrew_greek_cyrillic-regular.eot'); /* IE9 Compat Modes */
src: local('');
src: url('fonts/open-sans-v34-vietnamese_latin_hebrew_greek_cyrillic-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/open-sans-v34-vietnamese_latin_hebrew_greek_cyrillic-regular.svg#OpenSans') format('svg'), /* Legacy iOS */
url('fonts/open-sans-v34-vietnamese_latin_hebrew_greek_cyrillic-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/open-sans-v34-vietnamese_latin_hebrew_greek_cyrillic-regular.woff') format('woff'), /* Modern Browsers */
url('fonts/open-sans-v34-vietnamese_latin_hebrew_greek_cyrillic-regular.woff2') format('woff2'); /* Super Modern Browsers */
}

Inside the edited code you can delete the comments (after each url(..) line. And finally - as tipp: pack the source, in general the packed file is ~ 30% smaller (and your website will have the benefit).

Edit: updated code snippet to be actual. The font ordering is based on the fact, that browsers read from bottom to top (see https://stackoverflow.com/a/22835957/3450837).

It includes also the "bulletproof" solution where a smiley (which one you want to use is up to you) is used (to prevent wasting bandwidth) - see https://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/

OSWorX
  • 136
  • 9