While using the @font-face rule, lots of browser compatibility issues arise. This rules performs some checks regarding browser compatibility. The browser support level can be set to either:

Deepest Possible Browser Support (deepest)
Slightly Deeper Browser Support (deep)
Practical Level of Browser Support (basic)

Deepest Browser Support (deepest)

The following definition supports most of the browsers still in use:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.eot');                                     /* IE9 Compatibility Modes */
  src: url('myfont.eot?#iefix') format('embedded-opentype'),  /* IE6-IE8 */
       url('myfont.woff2') format('woff2'),                   /* Super Modern Browsers */
       url('myfont.woff') format('woff'),                     /* Pretty Modern Browsers */
       url('myfont.ttf') format('truetype'),                  /* Safari, Android, iOS */
       url('myfont.svg#svgFontName') format('svg');           /* Legacy iOS */
}

The rule checks the following:

At least two src properties.
The second to last src property only defines an .eot file with no format.
The last src property defines the .eot file first with the IE6-IE8 ?#iefix hack. All the other formats are then defined in the following order: woff2, woff2, ttf, svg.

Slightly Deeper Browser Support (deep)

The following definition is compatible with:

Chrome	Safari	Firefox	Opera	IE	Android	iOS
3.5+	3+	3.5+	10.1+	9+	2.2+	4.3+

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff'),
       url('myfont.ttf') format('truetype');
}

The rule checks the last src property as follows:

Defines at least woff2, woff and truetype formats in this order.
Additional formats can be defined but only after the truetype format. An exception though, an .eot file can be defined before the woff2 format. Basically, if a Deepest Browser Support syntax is found, it should not raise any issue.

Practical Level of Browser Support (basic)

The following definition is compatible with:

Chrome	Safari	Firefox	Opera	IE	Android	iOS
5+	5.1+	3.6+	11.50+	9+	4.4+	5.1+

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
}

The rule checks the last src property as follows:

Defines at least woff2 and woff formats in this order.
Additional formats can be defined but only after the woff format. An exception though, an .eot file can be defined before the woff2 format.Basically, if a Deeper or Deepest Browser Support syntax is found, it should not raise any issue.

Deepest Browser Support (deepest)

Slightly Deeper Browser Support (deep)

Practical Level of Browser Support (basic)

See