开发者

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

开发者 https://www.devze.com 2023-01-18 03:27 出处:网络
What is the right way to use @font-face so that the browser will not download the font if the user already have 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;
}


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.


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.


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('
0

精彩评论

暂无评论...
验证码 换一张
取 消