CODEWITHSUNDEEP
cssfont-face
dbarbosa
dbarbosa

Reputation: 3049

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

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

Upvotes: 100

Views: 154215

Answers (3)

OSWorX
OSWorX

Reputation: 138

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/

Upvotes: 0

Niu Bee
Niu Bee

Reputation: 59

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.

Upvotes: 0

Thariama
Thariama

Reputation: 50832

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.

Upvotes: 125

Related Questions