#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.
Related
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.
I've been supplied an OTF font from a client and not following the web font trends for a while now in terms of support, if I remember correctly, the pattern used for cross browser support for web fonts would look like this:
#font-face {
font-family: 'AvalonBook';
src: url('Avalon-Book-webfont.eot');
src: url('Avalon-Book-webfont.eot?#iefix') format('embedded-opentype'),
url('Avalon-Book-webfont.woff') format('woff'),
url('Avalon-Book-webfont.ttf') format('truetype'),
url('Avalon-Book-webfont.svg#AvalonBook') format('svg');
font-weight: normal;
font-style: normal;
}
Probably because I've been so used to copying and pasting the above code and modifying it to my needs, I haven't got the chance to actually understand the reasons behind this pattern.
This begs the question, is OTF even supported in the browsers? What browsers and versions? Also why is it not in the above #font-face declaration if it is supported?
Thanks.
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;
}
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;
}
According to this article, http://www.standardista.com/css3/font-face-browser-support IE supports #font-face but I couldn't find any site which has valid custom font face working for IE
Also, if IE supports custom font via #font-face from early on (IE6), then why people still using cufon for instance?
Any clarifications or examples?
Older version of Internet Explorer supports Embedded OpenType (EOT) files before #font-face was formalized in CSS3. You can find compatible files on sites like FontSquirrel or Google's Font API. FontSquirrel's conversion tool should also help here. Also worth a read would be the latest bulletproof syntax recommended by fontspring to embedding multiple files for multiple browsers.
The fact that this wasn't used frequently until recently is two-folds; first there are legal issues with using #font-face fonts - copyrights to be specific. Unlike cufon which only retains the shape of the fonts, with #font-face you are transmitting the actual fonts themselves, which has legal implications.
The other problem is support in other browsers - Firefox 3 was the last of the modern browsers to not support #font-face in some way, so before Firefox 3.5's release in mid-2009 #font-face was still not viable. In addition to all that there are differences in format support between the browsers, so the development of the technology is slow.
Internet Explorer 9 requires an EOT type font. TTF fonts can be used in most of the other recent browser versions and SVG for devices like iPhone and iPad. You can read more about browser support for #font-face here http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
Font Squirrel is also a great resource for creating web font files including EOT from your existing font files. Please be sure you have a licence to use the fonts on the web. You can access the free web font file generator here:
http://www.fontsquirrel.com/fontface/generator
A typical CSS entry for an #font-face set looks like this:
#font-face
{
font-weight: normal;
font-style: normal;
font-family: 'custom-font';
src: url('/some/directory/custom-font.eot');
src: url('/some/directory/custom-font.eot?#iefix') format('embedded-opentype'),
url('/some/directory/custom-font.woff') format('woff'),
url('/some/directory/custom-font.ttf') format('truetype'),
url('/some/directory/custom-font.svg#webfont') format('svg');
}
Then you can call your font by assigning the "font-family" attribute using css
.my-class { font-family: "custom-font" }
You can also write:
#font-face {
font-family: 'custom-font';
src: url('/some/directory/custom-font.eot');
}
#font-face {
font-weight: normal;
font-style: normal;
font-family: 'custom-font';
src: url('/some/directory/custom-font.woff') format('woff'),
url('/some/directory/custom-font.ttf') format('truetype'),
url('/some/directory/custom-font.svg#webfont') format('svg');
}
Works as well as the example above, without using the "?" mark.
Yes they do starting with IE6*.
A working example.
The font must follow some special rules though, for example the font name must begin with the family name and the family-name in the CSS must match the family name of the font.
If you use the font squirrel webfont generator to generate an .eot from a .ttf, it will ensure the generated .eot is usable on IE6.
* Beware that there are aliasing issues with custom fonts rendering in IE6/7/8.