In CSS3 font-face, there are multiple font types included like ttf, eot, woff, svg and cff.
Why should we use all of these types?
If they are special to different browsers, why is the number of them greater than the number of the major web browsers?
Answer in 2019:
Only use WOFF2, or if you need legacy support, WOFF. Do not use any other format
(svg and eot are dead formats, ttf and otf are full system fonts, and should not be used for web purposes)
Original answer from 2012:
In short, font-face is very old, but only recently has been supported by more than IE.
eot is needed for Internet Explorers that are older than IE9 - they invented the spec, but eot was a proprietary solution.
ttf and otf are normal old fonts, so some people got annoyed that this meant anyone could download expensive-to-license fonts for free.
Time passes, SVG 1.1 adds a "fonts" chapter that explains how to model a font purely using SVG markup, and people start to use it. More time passes and it turns out that they are absolutely terrible compared to just a normal font format, and SVG 2 wisely removes the entire chapter again.
Then, woff gets invented by people with quite a bit of domain knowledge, which makes it possible to host fonts in a way that throws away bits that are critically important for system installation, but irrelevant for the web (making people worried about piracy happy) and allows for internal compression to better suit the needs of the web (making users and hosts happy). This becomes the preferred format.
2019 edit A few years later, woff2 gets drafted and accepted, which improves the compression, leading to even smaller files, along with the ability to load a single font "in parts" so that a font that supports 20 scripts can be stored as "chunks" on disk instead, with browsers automatically able to load the font "in parts" as needed, rather than needing to transfer the entire font up front, further improving the typesetting experience.
If you don't want to support IE 8 and lower, and iOS 4 and lower, and android 4.3 or earlier, then you can just use WOFF (and WOFF2, a more highly compressed WOFF, for the newest browsers that support it.)
#font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
}
Support for woff can be checked at http://caniuse.com/woff
Support for woff2 can be checked at http://caniuse.com/woff2
Woff is a compressed (zipped) form of the TrueType - OpenType font. It is small and can be delivered over the network like a graphic file. Most importantly, this way the font is preserved completely including rendering rule tables that very few people care about because they use only Latin script.
Take a look at [dead URL removed].
The font you see is an experimental web delivered smartfont (woff) that has thousands of combined characters making complex shapes. The underlying text is simple Latin code of romanized Singhala. (Copy and paste to Notepad and see).
Only woff can do this because nobody has this font and yet it is seen anywhere (Mac, Win, Linux and even on smartphones by all browsers except by IE. IE does not have full support for Open Types).
WOFF 2.0, based on the Brotli compression algorithm and other improvements over WOFF 1.0 giving more than 30 % reduction in file size, is supported in Chrome, Opera, and Firefox.
http://en.wikipedia.org/wiki/Web_Open_Font_Format
http://en.wikipedia.org/wiki/Brotli
http://sth.name/2014/09/03/Speed-up-webfonts/ has an example on how to use it.
Basically you add a src url to the woff2 file and specify the woff2 format. It is important to have this before the woff-format: the browser will use the first format that it supports.
Related
I'm trying to determine the status of support for the TTF font format on Internet Explorer. (I don't have any Windows machines on hand to try it with.) The table at caniuse states that IE from version 9 onwards supports TTF but "only working when [fonts are] set to be installable". What does that mean? That page links to a blog post on MSDN, which describes updated font support on IE9. It isn't very clear or explicit; I think the "raw fonts" being referred to mean ttf and otf. It says "supported font formats include ... raw fonts with embedding permissions set to installable"
So, in summary:
Does IE support ttf fonts at all?
If ttf support exists, does it differ among IE9, IE10, and IE11?
What does "embedding permissions set to installable" mean in reference to ttf fonts?
So as I mentioned in my question above, Internet Explorer has some ttf support starting with version 9, but "only working when [fonts are] set to be installable".
Some background:
...TrueType fonts have embedding "bits" which allow the creator of the
font to decide the level of embedding that will be permitted. There
are four different embedding bits: (1) no embedding, (2) embedding for
view and print only, (3) embedding for view, print and editing, and
(4) installable embedding.. Many small type design houses have set
their embedding bits so that embedding of any kind is not permitted. ...
Source (also contains a lot of other information on this) and here's Another source with similar info
In another question, dealing with the embedding bits was discussed. It was revealed there that the Font Squirrel webfont generator automatically deals with these embedding bits by default on most fonts. Since I had ran my font through font squirrel I was good to go. I tweaked my CSS to prefer TTF over WOFF for testing and obtained the following results using webpagetest:
IE8 Did not work with TTF. It fell back to EOT
IE9 Worked with TTF
IE10 Worked with TTF
Note that I did not test fonts without the embedding bits set to installable, no I cannot say anything about that. But the general conclusion is that TTF fonts work in IE 9 onwards when the embedding bits are set to installable
Just google internet explorer ttf support or alike which would give you lots of information like eg http://www.fontspring.com/blog/fixing-ie9-font-face-problems
IE support for TTF is unclear: some sites claim support (like caniuse) other deny that (like http://webfonts.info/node/379)
In a ttf file there is information on what a user is allowed to do with the font. For TTF fonts to be allowed to be used in websites the font's embedding bits must be set to installable. The 'embedding bits' refer to fsType information in the OS/2 table, and 'installable' means that all fsType bits are off. So even if a browser supports TTF the font's foundry could deny usage of particular fonts.
Up until now, I've used Paul Irish's bulletproof font-face syntax
But I was just looking at support for .woff and .woff2 files on caniuse and it says woff is supported in IE9+. Most articles on this topic are from around 2009, which at the time of this writing was a full 7 years ago. Do we really need to keep declaring ttf, otf, eot, and svg when woff now enjoys such wide support?
October 2018 edit
tl;dr: use WOFF2, every modern browser supports it, with WOFF fallback because IE11 just won't bloody die (late 2022 update: Microsoft actually killed it on its promised EOL date of June 15, and the world is a better place for it), and without the local() source indicator, because you want everyone to use the same font, not "a different version or even completely different font that happens to use the same name".
The end.
Original 2016 answer
Short answer: no.
Longer answer:
EOT is only relevant for IE8 and below (although as trivia: all the way down to IE4. IE actually pioneered webfonts), and SVG fonts as technology (not to be confused with OpenType fonts with SVG outlines) were abandoned (in early 2015) because the limitations were insane once real webfonts started to become available. As of 2016 you just need WOFF. And WOFF2 if you want to take advantage of the newer better version of WOFF that only just became a w3 recommendation (at the time of this answer).
To make things easier, as of January 12th 2016, Microsoft ceased support for IE8 and below, with limited support for IE9: they will now only support the latest available browser for each still supported OS, meaning that IE9 is no longer supported for Windows XP, because XP is itself no longer supported, but is technically still—begrudingly—supported until Vista SP2 and Server 2008 R2 reach the end of extended support in 2017 and 2020, respectively. Of course, for Windows Server 2008 webfont support is irrelevant, and most businesses that still use an old version of Windows skipped Vista, being either on Windows XP (at their own peril) or Windows 7 (which we can pretty much expect to all become Windows 10 in July of 2016, the 29th of which is the last date people can upgrade from 7/8.1—but not 8—to 10 for free).
(April 2017 edit: Windows Vista SP2 went out of support this month, and as such IE9 is now officially no longer supported)
As for TTF/OTF, you don't want to use these online any more than you would want to use TIFF images rather than JPG or PNG: even though WOFF is "just" a thin wrapper around a TTF/OTF data, WOFF/WOFF2 allow the data to be compressed, whereas plain OpenType does not.
Furthermore, TTF/OTF are universal (for systems that support OpenType) fonts, and so are scrutinized more for correctness, especially by versions of IE. Using WOFF, which as a filetype makes it explicit this is a Web (Open) Font (Format), a less strict form of scrutiny means that some fonts that would fail a system OpenType verification pass may still work just fine as webfonts (due to the fact that not all required-for-universality OpenType data is necessary for a font to work in just a web context).
Finally, you get a choice in WOFF formats: Format 1, just called WOFF, is the older format and uses compression based on deflate, similar to PNG compression; and Format 2, called WOFF2, is the newer format with compression based on the brotli algorithm, and also allows for "chopping up" a font into separate files for optimized delivery when dealing with unicode fonts that support multiple languages. You don't need all the files at the same time, so only deliver those files that cover the unicode ranges necessary for a specific page and you keep page size and load times down that little bit more.
In conlusion: hurray for the march of progress, just use WOFF (or WOFF2).
And, of course, remember to indicate the format of your #font-face sources using the format() value.
06/20/2022 Update
My answer is now no longer truly relevant, unless you're working on some really specific use-case where you know truly antiquated browsers that should not be used anymore are still being used anyway (government work?). Keeping this here for posterity, but IE is now finally dead, at least for modern commercial applications.
(edited to move this to the top)
This is more of a 2019 addendum. At this point 09/18/2019, there is still substantial use of IE11, not to mention other more obsolete software.
As such, the accepted top voted answer is wrong in it's most recent edit from a year ago no less, that you only need woff2. At the very least you need both woff2 and woff, and you may want a more universal backup option even if it's less than ideal like svg.
While certainly you should first start by loading and supporting woff2 primarily, legacy support is just a fact of life and you probably will not be able to get away with only woff2 for several more years in any professional endeavor.
The most comprehensive modern option is likely woff2, woff as a fallback, and eot for IE. This hits all browsers in any significant use in 2019/2020
Example:
#font-face {
font-family: "yourFontHere";
font-style: normal;
font-weight: 400;
font-display: block;
src: url("../fonts/yourFontHere.eot");
src: url("../fonts/yourFontHere.eot?#iefix") format("ie9-skip-eot"),
url("../fonts/yourFontHere.woff2") format("woff2"),
url("../fonts/yourFontHere.woff") format("woff");
}
This is what a normal comprehensive font face declaration looks like.
See the following:Eot, Woff, Woff2
This covers everything except for Opera Mini, which frankly is less worth supporting than IE 6-8 due to being both a nightmare to support, and seeing very little usage.
However if you disagree with this assessment you can add an additional fallback line as needed just like the woff line. adding svg format to the example above will not only support all browsers, but there's also an argument to be made for including it for accessibility purposes. See here: Accessibility example
I decided to post my own answer to this for two reasons: the currently accepted answer is slightly overzealous about using the WOFF2 and WOFF font stack in modern web dev without mention of other factors, and it also points heavily to official end-of-life dates, which don't reflect what browser versions are actually being used in the real world. In this answer I'll be sourcing CanIUse.com, which is an industry standard for keeping track of things like this.
Support for WOFF2
WOFF2 improves on WOFF in every way, is supported by most desktop browsers released after 2014, but has only since 2018 began to be supported by most mobile browsers. It's supported by an estimated 93% of browsers globally.
Support for WOFF
WOFF began to be supported by Internet Explorer in IE9 (released in 2011), which renders the EOT format obsolete for versions of IE released since 2011. It's supported by an estimated 97% of browsers globally.
Other desktop browsers began to support WOFF at roughly the same time, including Firefox since Firefox 3.6, Chrome since Chrome 5, and Safari since 5.1 (released in 2010, 2011 and 2011 respectively), rendering the TTF and OTF1 formats obsolete in prior versions. Most mobile browsers have supported WOFF since 2013.
Caveat and Conclusions
From this standpoint, it's easy enough to write off all other formats as being unnecessary, but software no longer officially being supported has never been a good indicator that it's no longer being used. To put it another way, global browser version share is not guaranteed at all to be representative of the demographics that your website will be used by.
Browser version share can vary dramatically among demographics: factors like country, social class, and income all heavily influence what devices (and therefore, versions of browsers) your users are using. As a developer, think about whether the site you're building will be used by demographics that are more likely to be using those older versions.
If you decide that that's the case, and you need to support desktop browsers older than 2011, or mobile browsers older than 2013, use the full font stack: WOFF2, WOFF, TTF (or OTF), and EOT.
If you don't need to support those ancient browsers, and it's still true that you more than likely don't, simply use WOFF2 and WOFF as your font stack from hereon.
(1) TTF and OTF are traditional desktop font formats, and any browser that supports one supports the other, so never use both
A typical #font-face setup:
#font-face {
font-family: 'myFont';
src: url('/fonts/myFont.woff') format('woff'),
url('/fonts/myFont.ttf') format('ttf'),
url('/fonts/myFont.svg') format('svg'),
url('/fonts/myFont.eot') format('eot')
}
Now, we have this definition of IE 9+, which translates to "modern browsers". Looking at font type support it is a big mess, though eot seems to be for IE8. Looking at the site "can I use" both woff and svg format is supported by all modern browsers.
So why do we add all these three formats, we only need one as all modern browsers support either woff or svg? What I do not understand either is that the order matters. So in the example above all modern browsers will download the "woff" format. There is no need to add svg. So why do we do that?
The background for this question is inline optimization. If I want to include my fonts as a Base64 string it is not very "optimizely" to inline all three font formats, it will only make the CSS unnecessary large.
So if your target is "modern browsers", just choose a format that the font supports and stick with that. Forget about this fallback that "every single example" on the web uses.
Maybe some formats looks better in some browsers than others, but it does not matter because the browsers will only download the first supported format anyways which in "modern browsers" will always be the first woff or svg on your font face list, or ttf if you do not care about IE.
So, I have just made a bunch of assumptions here. Is there really any reason to add all of them? You mostly get away with using either woff or svg?
You almost answered all your question yourself. :)
Here's a good read that might help:
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization?hl=en
Re SVG fonts, I think Safari on older versions of iOS only supported SVG webfonts. That's why it became popular in recipes. EOT was old IE. TTF is pre-woff non-IE. There's also woff2 around these days which is supported in Chrome, Opera, and non-release builds of Firefox.
For inlining font data, you need to detect your browser and send down the best supported version.
I would like to use a custom font that I have in TTF format only, so I need to execute a script that would detect a support of #font-face with TTF format. What are my options?
TTF is supported by a lot of browsers. I wrote a check to test #font-face support by trying to render a small custom TTF font. If you disable the test for IE8 and below from this script (which uses an EOT font), you'll have the test you're looking for.
You can find the script here: https://github.com/RoelN/font-face-render-check
There are a ton of posts here that get into this subject in great detail.
Just to get you going if you only have a TTF file you can use Font Squirrel to convert the TTF file into other common web fonts.
These will help provide fallbacks for all of the different major browsers
The site will also help you with the generation and usage of the #font-face tag in CSS to embed the font correctly.
I am trying to understand why Font Awesome comes with various font formats and was wondering if it is no harm for use if I had to keep only one or two.
I want to identify things that I won't need for downsizing.
I have yet to come across with documentation that explains this.
#font-face {
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot?v=3.2.1');
src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
font-weight: normal;
font-style: normal;
}
The reason why you have those different file formats is crossbrowser compatibility. There are many font file types, but I will tell you about the most common ones.
EOT
Internet Explorer pioneered support for webfonts since IE4, I believe; older versions, however, only accept .eot files: so, if you want to support IE<9, you have to include that. But .eot is a proprietary file type and is exclusively supported by Internet Explorer, also is very compact and has a kind of digital rights protection to avoid usage without license (the file can have an URL-binding, tying it to a specific domain).
SVG
When Safari implemented webfonts (version 3), they decided to go for the .svg, and Opera followed. Being Webkit Chrome also supports .svg. As you know, SVG is basically graphics in XML format: this made them convenient since the browser wanted to start supporting vector graphics, but it's not the best solutions as fonts in this format can be pretty large.
TTF and OTF
The more common .ttf and .otf are supported by all the modern browsers. These formats have been around since forever: TrueType replaced the bitmap fonts in the 1980s with an outline format, and OpenType is basically built on that standard with added typographical features (such as ligatures, variations and so on). These features are really important for a serious web-typography, but are still in the process of being supported:
See:
http://caniuse.com/font-feature
http://helpme.webink.com/customer/portal/articles/310119-what-browsers-support-opentype-features
https://www.typotheque.com/articles/opentype_features_in_web_browsers (2012)
WOFF
Lastly, .woff is basically .ttf/.otf with added compression (has a ~40% better compression than those) and metadata (for example, the license). It was specifically developed for the web by W3C for the web performance (bandwidth constraints) and has a suprisingly good support.
In conclusion, I don't think not putting them in the CSS will save you a few bytes, browsers are presumably smart on the fonts they download when encountering the #font-face property.
See: What fonts do browsers download when using #font-face
This all boils down to browser support.
For instance, woff doesn't work on IE8 or various mobile browsers, whereas eot does; eot only works on IE. svg doesn't work in IE8 or old versions of Android Browser.
If you don't need to support IE8 then you can probably get away with dropping the eot file altogether. Equally if you don't need to support various mobile browsers then you can probably drop the svg version too.
Different font formats are for different operating systems and browsers. I would suggest reading this article: http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/