To be honest, I really had a hard time optimizing the Font Awesome icon web fonts. If we achieve a significant reduction by cutting the unused portions, it’ll sure to help improve the page load time dramatically. The point is, font files are static assets like the CSS and HTML as they load on each and every page of a website. Before cutting the size of the icon font files, it scored 83% for Desktop and 56% on average. When I compared my website’s load time using Google Pagespeed Insights, it scored 99% with ads for Desktop and 70% on Mobile. By disposing off the bloat, you can boost the Font Awesome performance and ultimately your site’s speed.
#Font files otf vs ttf android
It works the same as debloating Android devices by removing useless pre-installed apps. A whopping saving of 914.2KB just by removing bloat icons from the Font Awesome web fonts means that my website’s Font Awesome fonts are 50 times smaller. With the easy method described below, I turned the font files of 931KB into 16.8KB. It is considered the best web font format because of its smaller file size that helps reduce web font latency. Web Open Font Format 2 (WOFF2): WOFF2 is an updated version of WOFF.It’s based on TrueType and OpenType fonts and considered good because it supports compression and almost all modern web browsers. Web Open Font Format (WOFF): WOFF was developed by Mozilla in association with Type Supply and LettError in 2009.Most older web and mobile browsers support TTF. TTF is also known as OTF (OpenType Font). It was developed by Apple in the late 1980s. TTF (TrueType Font): TTF is the most widely-used font format.Below is an example of SVG text for the Font Awesome Search icon used on this website. SVG fonts have provision for font-hinting and it’s considered a serious drawback. It’s better than JPG, PNG, and GIF formats because it’s highly scalable and doesn’t pixelated. It’s completely a bundle of text instructions that define the lines, curves, shapes, and colors. Though it’s basically an image file, it’s nothing more than human-readable plain text under the hood. SVG (Scalable Vector Graphics): SVG is an XML-based vector graphic format.EOT (Embedded OpenType): EOT format has been developed by Microsoft and works only with Internet Explorer.All these web font formats have the same icon sets but they support different browsers. If you unzip your WordPress theme and check the Fonts folder, you will find 4-5 Font Awesome web fonts with SVG, WOFF, WOFF2, EOT, and TTF extensions. Steps to Optimize Font Awesome Web Fonts Font Formats: SVG, WOFF, WOFF2, EOT, & TTF