Search code examples
htmlfont-awesomeassetsfont-awesome-5

Hosting Font Awesome Yourself: Do we need all formats eot, svg, ttf, woff, woff2?

I'm packing FA as part of my Angular 7 widget and web application using the approach Hosting Font Awesome Yourself. The thing is they explain to pack the whole /webfonts/ folder and it contains repeated fonts in each format.

Isn't it better to stick to one format e.g. svg and leave the others out?

What are the cons/pros, if any, of going for one specific format only?

Solution

  • If you need your web application that support in older browser too then you must host every font formats. Unfortunately, there isn't a single format that works in all browsers, which means that we need to deliver multiple formats to provide a consistent experience.

    • Serve WOFF variant to the majority of browsers.
    • Serve WOFF 2.0 variant to browsers that support it.
    • Serve TTF variant to old Android (below 4.4) browsers.
    • Serve EOT variant to old IE (below IE9) browsers.

    if you use only SVG font formats and leave the others out then it will support in Chrome(4.0 +), Safari(3.2 +) and Opera(9.0 +). you can check here the browser support for font formats.

    The WOFF is the only format that support the majority of browsers. so if you can ignore the older browser then I suggest you to use WOFF font formats.