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.

## See

- CSS-TRICKS, Using @font-face
- FONTSPRING, Further Hardening Of The Bulletproof Syntax