I'm working on ASP.NET web forms application .I'm using Visual Studio 2019. I wanted add two new fonts to the application and I added using below way and it working as expected . I have checked changes with Firefox , Google Chrome and New Edge and it's working fine.I just added one file type to each font as below.
#font-face {
font-family: 'TT Commons';
src:url('./Fonts/TTCommons/TTCommons2.woff2') format('woff2');
}
#font-face {
font-family: 'Hind';
src: url('./Fonts/Hind/Hind-Regular.ttf') format('truetype');
}
But I saw many examples in web as below (Which containing many file types for one font)
#font-face {
font-family: 'font-name';
src: url('font-name.eot');
src: url('font-name?#iefix') format('embedded-opentype'),
url('font-name.woff') format('woff'),
url('font-name.ttf') format('truetype'),
url('font-name.svg#font-name') format('svg');
font-weight: normal;
font-style: normal;
}
I want to know adding one type is enough or do I need to add every type and I'm Using Git do I need to convert these files to binary before committing. Thanks
Different font file formats are supported by different versions of browsers, the latest being woff2.
For maximum backwards compatibility, you should use the second example you showed with many font file formats.
You can check https://caniuse.com/woff2 to see the various browser support. If the shown level of support is acceptable, you can use just woff2.
Related
Visiting a website i have found out the menu links were abnormally bolder than wile watching the same page from my collegue computer with same browser.
Deleting the corresponding font from my windows font folder corrected the difference.
My question is how preventing this possibility when designing css fonts on a website
Most #font-face at-rules begin with a local(name-of-local-file) and then a reference to your distant url(/on/server/teh-webfont.woff).
Browsers will try, in this typical situation, to use the local file and if they find nothing will continue by downloading from your server the distant asset. If they find a local matching font, then they'll use it immediately and will stop their search of a font thus they won't download and use your distant asset.
Conclusion: don't use local() and only keep those url(). It's the contrary of this SO answer
Example without local() and many url() corresponding to many formats. Browsers will download the first one that please them, not 2+ of them:
#font-face {
font-family: 'Gudea';
src: url('./fonts/gudea/Gudea-Regular-webfont.eot');
src: url('./fonts/gudea/Gudea-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('./fonts/gudea/Gudea-Regular-webfont.woff2') format('woff2'),
url('./fonts/gudea/Gudea-Regular-webfont.woff') format('woff'),
url('./fonts/gudea/Gudea-Regular-webfont.ttf') format('truetype'),
url('./fonts/gudea/Gudea-Regular-webfont.svg#gudearegular') format('svg');
font-weight: normal;
font-style: normal;
}
Download the font .ttf
Saving the font in a folder in your web site
For call font use this code in css:
#font-face {
font-family: "YourFont";
src: url('font/YourFont.ttf');
}
.example{
font-family: YourFont, sans-serif;
}
This article: When do web-fonts load and can you pre-load them?, says to use local to take advantage of already loaded fonts. I can't find any other way to preload webfonts.
However, I can't figure out what names I am supposed to use for the local references. In MacOSX multiple variants show up as the same font name. e.g. what i would think would be local("Helvetica Neue Light") is available in font book as "Helvetica Neue"... how do i refer to different variants?
#font-face {
font-family: 'ProximaNova';
font-weight: normal;
font-style: normal;
src: url('/fonts/proximanova/ProximaNova-Reg-webfont.eot');
src: local("Proxima Nova Regular"), url('/fonts/proximanova/ProximaNova-Reg-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/proximanova/ProximaNova-Reg-webfont.woff') format('woff'),
url('/fonts/proximanova/ProximaNova-Reg-webfont.ttf') format('truetype'),
url('/fonts/proximanova/ProximaNova-Reg-webfont.svg#webfont') format('svg');
}
#font-face {
font-family: 'ProximaNova';
font-weight: $light_weight;
font-style: normal;
src: url('/fonts/proximanova/ProximaNova-Light-webfont.eot');
src: url('/fonts/proximanova/ProximaNova-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/proximanova/ProximaNova-Light-webfont.woff') format('woff'),
url('/fonts/proximanova/ProximaNova-Light-webfont.ttf') format('truetype'),
url('/fonts/proximanova/ProximaNova-Light-webfont.svg#webfont') format('svg');
}
All variations still result in requests for the woff files in chrome. Additionally, I can't find any recent or current best practices on web fonts or how to optimize their performance, how can I prevent these requests?
As a supplement to Jukka's answer, you can use the FontBook app on Mac OS to find the various names for a font. To see the names, select the font and then select the info tab (CMD+i).
Web fonts are subject to caching under normal rules, so if a user has recently visited a page that refers to a web font, then a copy cached the browser may be used when another page is visited and it uses the same URL for the web font.
The use of local(...) relates to something else, namely to the possibility that the font might exist in a system as an installed font. This depends on system settings and user actions; as an author, you cannot make users’ systems install fonts.
Technically, in local(...), you should use a name for a specific typeface (not font family), and the name should be either the PostScript name or the full name of the typeface. These names can be found in the names table of the font as corresponding to nameID values 6 and 4. To find out such names, you can use e.g. the DTL OTMaster Light program.
But this will only affect systems with the font installed. That is, for systems where the user has purchased and installed the font.
#font-face {
font-family: iconFont;
src: local(iconFont), url('fonts/iconFont.ttf') format('opentype');
}
The font file is not corrupt and installs fine in OSX etc. letting me preview it. But it won't render anything when I try to use it on a web page or even if I select it in illustrator it just switches to another font if I touch any key.
The font is for 'regular' and I have tried other options, but it won't work. Have tried typing with caps on/off etc. Using numpad, nothing. Have re-installed it and made sure there are no duplicates. It also won't work in Windows. Not sure if I need to change my css somehow or the fault lays with the font.
Here's a link to the font for anyone wanting to try. It's a bunch of metro icons. http://www2.zippyshare.com/v/23494573/file.html
Not sure if this will help, but this is the CSS I use, and it works fine. The webfonts directory is in the same directory as the css file, and includes three file types: .eot .ttf .woff
#font-face {
font-family: 'AvenirLT-Book';
src: url('webfonts/25EE2B_0_0.eot');
src: url('webfonts/25EE2B_0_0.eot?#iefix') format('embedded-opentype'), url('webfonts/25EE2B_0_0.woff') format('woff'), url('webfonts/25EE2B_0_0.ttf') format('truetype');
}
a typical class decleration:
.AvenirLT-Book {
font-family: AvenirLT-Book;
font-weight: normal;
font-style: normal;
}
perhaps you need to change the format to ('truetype') instead of ('opentype') ?
Building a site using custom fonts. Got .ttf files from a designer.
css looks like this:
#font-face{
font-family:MenuFont;
src: url("http://www.website.com/assets/fontfile.ttf");
}
.divClass{font-family:MenuFont;}
I've tried with a couple different font files he gave me. One of them doesn't show up at all. Even more strangely, a couple of them only effect certain letters. For instance, plugging in one file makes only O's, R's C's and P's use the correct font. I checked and it's the same letters across browsers.
Looking in firebug, I can see the whole font, when I roll over the font file url, so my Url's are fine, and the browser is getting the font.
What am I missing here?
Generate the correct font-face code and all the needed fonts with FontSquirrel. See: http://www.fontsquirrel.com/fontface/generator
You will get a more extended and compatible font-face declaration. Like this:
#font-face {
font-family: 'Meran';
src: url('../fonts/meran-normal-webfont.eot');
src: url('../fonts/meran-normal-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/meran-normal-webfont.woff') format('woff'),
url('../fonts/meran-normal-webfont.ttf') format('truetype'),
url('../fonts/meran-normal-webfont.svg#Meran') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face is kind of confusing as all the browsers cannot decide on a single file format to use. Below is what I am currently using to add 1 new font to a site, you can see there is 4 separate font files, I know that each one is because some browsers support different formats but does the browser download all the files or just the 1 that it needs?
#font-face {
font-family: 'Oswald';
src: url('oswald-webfont.eot');
src: url('oswald-webfont.eot?#iefix') format('embedded-opentype'),
url('oswald-webfont.woff') format('woff'),
url('oswald-webfont.ttf') format('truetype'),
url('oswald-webfont.svg#OswaldRegular') format('svg');
font-weight: normal;
font-style: normal;
}
I would expect for a browser to download all fonts that it supports and than apply the latest only, just like with other css properties.
My expectation seems to be wrong though. On a site that embedded fonts with markup identical to what you've provided above, FF only downloaded the .woff file even though it supports .ttf/.otf as well.
FYI, the support matrix; individual formats are linked to at the bottom.