What Font Format Should I Use for My Site

What font format should I use for my site

Understanding Font File Types

  • WOFF / WOFF2

WOFF fonts often load faster than other formats because they use a compressed version of the structure used by OpenType (OTF) and TrueType (TTF) fonts.

  • SVG / SVGZ

ideal for mobile use

  • EOT

supported only by IE

  • OTF / TTF

The WOFF format was initially created as a reaction to OTF and TTF, in part, because these formats could easily (and illegally) be copied

  • ON THE OTHER SIDE:

Google Fonts offers this as a way to use their fonts.

  • SOME PERFORMANCE TIPS

Watch the file size

Fonts can be surprisingly heavy, so lean towards options that offer lighter versions. For example, favor a font set that is 50KB versus one that weighs 400KB.
Limit the character set, if possible

Do you really need the bold and black weights for one font? Limiting your font sets to load only what is used is a good idea and there are some good tips on that here.
Consider system fonts for small screens

Many devices are stuck on crappy connections. One trick might be to target larger screens when loading the custom font using @media.

In this example, screens smaller than 1000px will be served a system font instead and screens that wide and above will be served the custom font.

  • CONCLUSION:
    Use OTF/TTF(all browsers) & EOT(I.E) for Desktop screens and use system fonts for small screens as they render faster.
    And do consider google fonts. Best choice so far.

What web font format has the highest quality?

There are three factors that affect quality display of the font:

  1. Quality of the font. Some fonts are poorly made, some are missing characters, some have ligature issues, etc. I suggest testing the font across all browsers before committing to it.
  2. Browser rendering of the font. Chrome, Safari, FF and IE display render fonts differently.
  3. Formats readable by the browser: each also can only read a limited number of formats. (EOT for IE, TT for pretty much everything else, including FF, and there's more).

In conclusion: web fonts are still somewhat of a dark and mysterious art. Invariably, there will be minor differences. Find a well built font, and test it across your target browsers. I think we're still very much in the trial and error phase with @font-face, but there are good resources to help along the way.

Choosing the most ideal font format

woff2 is the modern "standard font" and is supported on modern browsers. Woff2 is a more compressed font, so the woff2 files are smaller then the woff files. To support modern and some older browsers, both the woff2 and woff files has to be there. The priority is to ask if the font is present on the device, if not then present Woff2, and if woff2 fails, load the woff font.

If you look at the performance, the woff2 is the best choice. The woff is a fallback for older browsers.

Note that not both woff2 and woff are loaded. If woff2 is supported, the browser will only load woff2. On the other hand, if woff2 is not supported, then only the woff is loaded. Presenting both is the best option.

WOFF2 : modern browsers
WOFF : fallback if woff2 is not supported
TTF : Android-browser on Android 4.3 or older
EOT : Internet Explorer 8 or older
SVG : iOS-Safari 3.2-4.1. SVG webfonts are not supported anymore in most browsers

Note that svg files are huge files and bad practice if you're working on performance optimization.

So for best performance, and for very good cross browser presentation, woff2 and woff are enough. Your css looks fine, first check local, then try woff2 and then, if woff2 fails, a fallback to woff.

RE: your comment

To test the performance, I uploaded a Bootstrap page with Font-Awsome and Open-Sans. These webfont files are located in a subfolder on my domain. Each font has this priority:

src: local('Open Sans Italic'),
local('OpenSans-Italic'),
url('../webfonts/OpenSans/OpenSans-Italic.woff2') format('woff2'),
url('../webfonts/OpenSans/OpenSans-Italic.woff') format('woff'),
url('../webfonts/OpenSans/OpenSans-Italic.ttf') format('truetype');

The waterfall diagram shows that from each webfont only the woff2 is loaded. If you do not have to support the old 'Android-browser' on Android 4.3 or older then remove the TTF line from this css example.

Sample Image

What kind of font files do I need for modern browsers, Android and IOS?

2022 edit

You just need WOFF2, with WOFF fallback for legacy browsers.

  • Do not use .eot, it's been a dead format for literally over a decade.
  • Do not use .svg, it was a temporary format that wasn't just bad, but so bad it got retracted.
  • Do not use plain .ttf/.otf. These are full fledged universal OpenType fonts containing tons of uncompressed data that is completely irrelevant for web use. It'd be like using PDF files for your images rather than JPG or PNG.

Original answer

As also explained in this SO post, you just need WOFF. And here's why:

  • eot was deprecated for a while, but is actually obsolete now that Microsoft only supports Edge, plus "the latest version of IE for supported versions of Windows", which is only IE11 at this point (Nov.2018). Both of these support WOFF just fine. Also note that everything older than Windows 7 is already out of support (Windows Vista SP2 was still supported under corporate enterprise licenses at the time of this answer but has since also reached end-of-life).
  • svg was abandoned years ago. It was an interesting idea but turned out bad in practice because it was ludicrously huge compared to real fonts, and lacked features that are crucial for decent typography. The entire <font> chapter was removed from SVG2 and virtually all browsers that had support for it at some point in the past have since removed that support again (that's how bad it was). The only two browsers that still support svg fonts also support WOFF, so there is no reason to serve both.
  • ttf and otf are OpenType fonts (both of them. They differ in extension for historical reasons, but unless you're making fonts, the differences between them are essentially irrelevant) that are intended for universal system use. Like installing on a computer or sending over to a modern printer for physical document generation. As such. they have a lot of bits and bobs that they need to support (the spec is rather large), many of which don't actually matter all that much if you're just rendering a web page to a screen. WOFF lets you get away with some simplifications in the OpenType font, and every browser that supports generic Opentype also supports WOFF. So again: just use WOFF.

The thing to realise is that WOFF is a byte-for-byte wrapper around OpenType fonts, but with (optional) lossless compression so that the font is smaller, making it faster to transmit from the server to the client, and indicates that the font is only for use on the web, which means that some of the requirements a font absolutely needs to meet to count as legal font on a universal type system are relaxed, so some more data can be shaved off.

I know Font Squirrel and other sites still generate the "have every format that ever existed!" kind of CSS font packs, but it's 2017 and we simply don't need these huge sets anymore. While even as short as three years ago these sets were best practice (using the 'bullet proof' approach to CSS in a browser landscape that was highly fragmented when it came to webfonts), today these packs are entirely unnecessary. Everything supports WOFF.

"What about WOFF2?"

WOFF2 is a revision of the WOFF specification, with a newer, better lossless encryption algorithm for the kind of binary data you find served on the web (WOFF2 uses brotli, rather than WOFF's "deflate") so if the browsers you're targeting support it: great. But check http://caniuse.com for that first; there are a lot of browsers that don't support it just yet, particularly on popular platforms (Windows's IE and Apple's Safari do not support WOFF2 right now. IE will eventually, but Safari... who knows)

"What about that subsetting thing Google fonts does when I ask for WOFF2?"

Indeed, WOFF2 also allows loading "one font" in chunks, by specifying how character subset loading should work, so that you can only load as much of a font as you need to support your users' locales. However, unless you run a website that needs to be available in several different localised versions, targeting specific markets on this planet in their native language, or you're running a site that teaches different languages all of which need to be styled with the same font family (which is highly unlikely) this is pretty much irrelevant to you.

All about choosing the right font for a website

1) What font faces are preferred for a website?

See this page concerning safe web fonts.

2) Any way to specify different font sizes for each particular font-family through CSS?

Nope.

Soon, @font-face will be supported by all major browsers, and you'll be able to use any font you want on your website.

Until then, have a look at Cufón or sIFR.

Is TTF format enough for using a web font in a project?

TTF is supported pretty much everywhere except Opera Mini and partial support in IE. See caniuse.com

css @font-family in what cases should I specify format?

It also worked even when you didn't specify it because the web uses WOFFor WOFF 2.0 which basically were built on truetype and it's the most common font format for both the Mac OS and Microsoft Windows operating systems.

So there are mainly three types of fonts formats:

1-Desktop format: which can be used in everything that requires locally installable fonts.

2-Web format: which can be used in all types of websites.

3-Proprietary formats: Only included in the apps they were designed for.

So keep in mind that not all fonts formats will work on the web.

Here is Browser Support for Font Formats

there are 6 types of available types for format according to MDN web docs
which are (woff, woff2, truetype, opentype, embedded-opentype, and svg)

Let's say you downloaded a font of type woff and you specify the format to be for example svg, it won't work.

Why should we include ttf, eot, woff, svg,... in a font-face

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

Fonts on the Web

Safari, and to a lesser extent, Firefox 3 have support for @font-face in CSS, which lets you use custom fonts. You need to have the appropriate licence to distribute the font files though. These articles explain it in more detail:

  • http://www.css3.info/preview/web-fonts-with-font-face/
  • http://www.alistapart.com/articles/cssatten
  • http://www.sitepoint.com/blogs/2008/07/30/custom-web-fonts-pick-your-poison/


Related Topics



Leave a reply



Submit