Search code examples
csscross-browserfont-face

Is there a benefit to using multiple font file type sources when declaring a font-face?

I see a chunk of code declared as such:

@font-face{
    font-family: 'SourceCodePro-Regular';
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    src: local('SourceCodePro-Regular'),     
         url('assets/fonts/EOT/SourceCodePro-Regular.eot') format('embedded-opentype'),
         url('assets/fonts/WOFF2/TTF/SourceCodePro-Regular.ttf.woff2') format('woff2'),
         url('assets/fonts/WOFF/OTF/SourceCodePro-Regular.otf.woff') format('woff'),
         url('assets/fonts/OTF/SourceCodePro-Regular.otf') format('opentype'),
         url('assets/fonts/TTF/SourceCodePro-Regular.ttf') format('truetype');
}

Is there a benefit to having a bunch of different sources for this? ie. is there any benefit to requiring truetype, opentype, woff, woff2and embedded-opentype, or is there a source type that will work for everything?

I assume this is for a fallback, but the documentation doesn't really talk about this: https://developer.mozilla.org/en-US/docs/Web/CSS/%40font-face

Solution

  • The different file types are for different browsers.
    Here is a nice overview:

    Source: CreativeMarket