Possible format values ​​for font-face src

Question

How do you know what to use, when to use it, and whether you really need them?

Many sites have examples like this, but in a different order:

@font-face {
  font-family: 'Example';
  src: url('Example.eot');
  src: url('Example.eot?#iefix') format('embedded-opentype'),
       url('Example.woff2') format('woff2'),
       url('Example.woff') format('woff'),
       url('Example.ttf') format('truetype'),
       url('Example.svg#svgExample') format('svg');
}

But I have also seen examples like this:

@font-face {
  font-family: 'Example';
  src: url('Example.woff2') format('woff');
}
@font-face {
  font-family: 'Example';
  src: url('Example.ttf') format('woff2-variations');
}
@font-face {
  font-family: 'Example';
  src: url('Example.otf');
}

Sometimes the format looks identical to the end of file, sometimes the end of file is abbreviated or at least partially the same, and other times they appear to be completely random strings, or sometimes nothing at all if it's just a file.

Answer 1

It's not important to understand all possible format values ​​ - since many of them originate from experimental browser implementations.

In fact, you might compare some formatting values ​​to CSS browser prefixes - fortunately, they have become less relevant - unfortunately, they are still sometimes relevant.

Refer to your first @font-face example:

@font-face {
  font-family: 'Example';
  src: url('Example.eot'); 
  src: url('Example.eot?#iefix') format('embedded-opentype'),
       url('Example.woff2') format('woff2'),
       url('Example.woff') format('woff'),
       url('Example.ttf') format('truetype'),
       url('Example.svg#svgExample') format('svg');
}

.otf format('opentype')

.otf is actually missing - but it has nothing to do with network usage.

src: url("Example.otf") format("opentype");

Similar to truetype, they can be installed locally and used in any desktop application.

In font casting lingo: OTF font files are also known as "post-script flavor" Open Type fonts.
And .ttf/truetype fonts are also called "Truetype flavored" Open Type fonts.

The

.otf font lacks advanced file compression compared to woff2.

.eot format('embedded-opentype')

Only used by Internet Explorer - but even these atrocities are at least capable of rendering ttf/truetype.

.eot Obsolete
(Unless you need to maintain some embedded systems running on special windows embedded systems).

.svg format('svg')

Only supported by webkit browsers (safari, epiphany, midori) and Android browsers.
However, all of the above browsers also support woff2, woff or truetype.
Most importantly, it is not supported by Chromium/Blink based browsers (opera, Vivaldi, Brave, Internet Explorer 13/Edge) or Firefox.

No .svg font files are required (although they can be conveniently used as an interchange format for icon generators such as icomoon)

.ttf format('truetype')

is probably the best supported font format, but not as compact as woff2 or woff.
Additionally, truetype fonts are available in desktop environments and therefore can be installed and used locally in any application.

Still relevant for some use cases (e.g. pdf conversion).

Variable font

You may encounter old symbols like the ones in this article: css tips

src: url("Example.woff2") format("woff2 supports variations"),
       url("Example.woff2") format("woff2-variations");

These additional format types originate from a time when variable font support was still experimental.
Today, they are no longer needed - just use normal format identifiers.

You "might" abandon this format too

Most modern browsers can map font files to font families even without a specified format.
Still, it's a good idea to include them.

But: Wrong format value can break your @font-face rules!

Common mistakes:

url('Example.ttf') format('ttf') //not correct

instead of

url('Example.ttf') format('truetype') //correct

...don't forget the weight and style properties

@font-face {
  font-family: 'Example';
  src: url('Example.woff2') format('woff2'),
       url('Example.woff') format('woff'),
       url('Example.ttf') format('truetype');
       font-weight:400;
       font-style: normal;
       font-stretch: 100%;
}

/* next font style: e.g bold italic condensed */
@font-face {
  font-family: 'Example';
  src: url('Example_boldItalicCn.woff2') format('woff2'),
       url('Example_boldItalicCn.woff') format('woff'),
       url('Example_boldItalicCn.ttf') format('truetype');
       font-weight:700;
       font-style: italic;
       font-stretch: 50%;
}

Variable font@font-face

In this example, font-weight and other properties contain 2 values ​​to define the range, for example font-weight: 100 1000.

@font-face {
  font-family: 'Example;
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: 0% 200%;
  src: url(Example.woff2) format('woff2');
}