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.
- goto https://google-webfonts-helper.herokuapp.com/fonts
- select there the font(s) you need/want
- downlaod the selected fonts
- 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('
精彩评论