Support for Stag Sans font for use on website

Question

I am looking into the different font file types that are available for the font Stag Sans to work out if it is supported by the major browsers. According to the Can I use website, different browsers vary in their ability to support different font formats such as TTF, WOFF, etc.

Does anyone have experience with Stag Sans or know what types of browsers it is supported in based on the font formats available for download or purchase?

Also, are there alternative font formats other than TTF or WOFF that can also be used and are web-safe?

Answer 1

I havn't downloaded any web-fonts from Commercial Type—including Stag Sans—and I can't find any info on the site, but I assume that since they are offering web licenses and web-font downloads that they will give you the appropriate formats to use. If not you can always use web-font generators such as Font Squirrel's or Web Font Generator to convert the files yourself (be aware of licensing issues doing this though).

As for which formats to use—WOFF and TTF are supported by modern browsers but there are others if you want to support some older browsers. There is a good CSS-Tricks article on which formats to use here:

• CSS Tricks — Using @font-face

Deepest Possible Browser Support

For the most comprehensive browser support you want to include all of the following formats:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.eot'); /* IE9 Compat 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 */
}

Practical Level of Browser Support

Depending on the level of browser support you need, you probably don't need all of that any more. Most browsers now support the WOFF or WOFF2 format, so you can probably get away with this:

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

Which would give you support for:

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

Slightly Deeper Browser Support

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

Which would give you slightly better support:

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

In Short—You're probably fine with WOFF/WOFF2 and TTF but maybe add EOT for older IE support if you need it.