I'm packing FA as part of my Angular 7 widget and web application using the approach Hosting Font Awesome Yourself. The thing is they explain to pack the whole /webfonts/ folder and it contains repeated fonts in each format.
Isn't it better to stick to one format e.g. svg and leave the others out?
What are the cons/pros, if any, of going for one specific format only?
If you need your web application that support in older browser too then you must host every font formats.
Unfortunately, there isn't a single format that works in all browsers, which means that we need to deliver multiple formats to provide a consistent experience.
Serve WOFF variant to the majority of browsers.
Serve WOFF 2.0 variant to browsers that support it.
Serve TTF variant to old Android (below 4.4) browsers.
Serve EOT variant to old IE (below IE9) browsers.
if you use only SVG font formats and leave the others out then it will support in Chrome(4.0 +), Safari(3.2 +) and Opera(9.0 +). you can check here the browser support for font formats.
The WOFF is the only format that support the majority of browsers. so
if you can ignore the older browser then I suggest you to use WOFF
font formats.
Related
I have IE11 on IE10 mode, and I want to load a css file. I have this
#font-face {
font-family: celestesansbold;
src: url('celestesanscomp-bold-webfont.woff2');
}
And then in the console I see this
CSS3111: #font-face encountered unknown error.
celestesanscomp-bold-webfont.woff2
And in the network tab I see
Name Protocol Method Result Content type Received Time Initiator
.../celestesanscomp-bold-webfont.woff2 HTTP GET 200 font/woff2 (from cache) 0 s
And the don't does not load correctly on the page, the text does not change.
Does anyone know what's wrong?
However regular woff files work, but this is woff2.
Thanks
IE doesn't support woff2. That's why you need to provide woff.
In fact, woff is the standard and it's all you need.
You only load woff2 because it provides better features for less bandwidth in browsers that do support it.
Older versions of IE used to need eot, but it's deprecated now.
However, providing more than one font type file does not mean the browser loads all of them. It stops loading them when it finds one it successfully activates. Which means their order is quite important. You want to put the more modern/efficient ones first and the larger ones (fallbacks) last.
It should be: woff2, woff, eot, svg, ttf/otf.
So the fonts folder of the FontAwesome distribution contains 6 different files.
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
fontawesome-webfont.woff2
FontAwesome.otf
Why? Do I need all of them? I don't see anything obvious on the FontAwesome readme or website explaining why all these different formats exist.
I'd prefer to have only the ones I need checked into my project.
Different browsers support different formats, there is a handy table on MDN for font formats.
You could use that table to select which fonts you want to include - you could just supply the WOFF, which has reasonably broad support. But by including more formats, more people will get the font rather than the fallback.
What does each font get you?
WOFF is pretty standard for "modern browsers", and WOFF2 is the next generation. These are the formats you really need.
You can extend the support by adding the following formats to gain some old versions of browsers:
TTF/OTF - Firefox < 3.6, Safari < 5.1, Opera < 11, Chome < 5.0
EOT - IE < 9
SVG - Chrome < 5.0
This answer might help:
Why should we include ttf, eot, woff, svg,... in a font-face
Basically certain older browsers (or specific newer browsers) need different formats. By including all the formats, a client's browser can switch to the one it supports.
Let's say the font is a .fon or .fnt, could I embed these in a webpage? Is there a particular format for embedding a raster font?
Unfortunately, there's no way to do this today. But while the technology is still in its infancy, multicolor fonts are coming to browsers. This would allow you to convert those bitmap formats to plain OpenType TTFs. All but Microsoft's proposal would allow for bitmap/raster fonts to be used.
This technology already works in current versions Firefox on all platforms. Support in other browsers is coming.
Support to font embedding via #font-face covers EOT (IE only), WOFF, SVG, and TTF/OTF. So the font files would need to be converted to at least one of these formats (and, for best browser coverage, all of them).
I've been displaying Chinese fonts on my Chrome browser on my Mac and I liked it. However the font is rendered differently in Firefox or when I use Chrome on Windows. Is there a way to standardize the font that the browser chooses for Chinese characters?
You have various options:
As Art of FITZ says, specify an #font-face and have the font downloaded to the user (which will, indeed, take up a lot of bandwidth if the font is large)
As Jukka says, provide a list of font names in the font property and hope one of these is installed on the user's computer
The legacy method: render the text on your own computer in the font of your choice, upload this as an image file. If you don't have much text to display, this may be even more efficient than having an #font-face clause that downloads a multi-megabyte font file.
Tailor the #font-face to your needs: Depending on the amount of text to display, you may be able to create a font with only the subset of characters you need (with an online utility such as Font Squirrel), reducing the size of the font file to download.
Here is a quick reference to how this line of code is used.
http://www.css3.info/preview/web-fonts-with-font-face/
Different browsers have different default fonts, but can can override this by setting font-family in CSS. Just remember that different computers have different sets of fonts available, so you should normally use a list of fonts, hopefully covering most browsing situations.
Maybe you have done so but see different results on different browsers. Please post a relevant part of the code and/or a URL then.
I'm helping my sister convert a website that somebody did for her in flash into html.
They use fancy fonts in the flash that I am trying to define in a css file through #font-face. I tried opening the page in firefox, IE and chrome, but nowhere do I see the proper font.
The declaration that I am using is:
#font-face {
font-family: "VAG Rounded";
src: url("http://judith.huinink.net/chilax/VAGROUNL.OTF");
}
http://judith.huinink.net/chilax/index.htm contains the html.
http://judith.huinink.net/chilax/chilax.css contains the full css.
I checked that I can download the font file, but it simply doesn't use the font when I open the page in a browser. I must be overlooking something. Does anybody have any suggestions?
font-face goes mainstream
As of January 2010 all major new browsers support font-face
Safari 3.1
IE - all versions
Firefox 3.6
Chrome 4
Opera 10
See http://webfonts.info/wiki/index.php?title=#font-face_browser_support
Update
In the last year, browser support for fonts has improved rather dramatically. I'd suggest reading Tim Brown's excellent article on the subject, which describes in detail how to get web fonts working in most modern browsers.
Original answer
In realistic terms, #font-face is completely unusable right now. Only two browsers support it — Internet Explorer for Windows, version 5 or better, and Safari 3.1.
Worse, IE and Safari do not support the same font formats. IE supports only EOT, while Safari instead supports the more common TrueType (.ttf) and OpenType (.otf) formats.
Almost no browsers support #font-face: When can I use...
http://www.css3.info/preview/web-fonts-with-font-face/
How to use #font-face in all browsers that support it: at Jon Tangerine's blog
ttf2eot is a nice font converter for Unix and Windows so you don't have to use the horrible old Microsoft WEFT. It converts the whole font, not just some characters.
Here's a javascript to use with sIFR that disables sIFR for #font-face enabled browsers.
Flash needs to die, so here's another alternative to sIFR: facelift. It's a serverside script that generates images.
The problem with afaik all sIFR replacements is that selecting and copying text doesn't really work -- you either don't see the selection, or it's impossible to select less than a word or line. There's also Cufón which uses <canvas>, so it only works on newer browsers, most of which have #font-face anyway.
Do the right thing, use the state-of-the-art technology now: #font-face with TTF or OTF, and fallbacks for IE and old browsers. Preferably keep your HTML clean and implement those fallbacks in separate javascript and CSS files. For IE you might need to use "conditional comments" as explained in my first link above. For browsers with javascript disabled, always specify a list of replacement fonts with the web-safe fonts at the end.
Check out the ever popular sIFR or with no flash dependency, typeface.js
I've come across situations where WWW must be included in the domain. Without it, it wouldnt work.