![]() ![]() I used CloudConverter so the steps given below will be based on that website. Search for a good online font converter.It’s time to get the EOT and SVG versions of the Font Awesome web fonts. Now, save the edited Font Awesome web font by clicking the TTF, WOFF, and WOFF2 buttons.Having selected the icon fonts to delete in the Font Awesome icon library, click the Del(D) option.When all the web font icons are in front of your eyes, hold the Ctrl button and select the icons that are not in use on your website.Anyway, click the Open button, navigate to the font folder, and select the WOFF2 file.Also, when you select the ‘ Save as…” option after editing, it saves the web font file as SFD and you’ll have to convert the SFD to SVG. FontForge will let you edit and delete icons from the SVG font file only and it requires a lot of time to remove the icons. Now, either download and install FontForge (Windows, Mac, Linux) or just open Baidu Online Font Editor in your browser.Actually, you just need to edit just one of these files. Once you have downloaded the WOFF, WOFF2, SVG, EOT, and TTF files, place them in a new folder.Since my host doesn’t allow webmasters to access the server files, I used a plugin called WP File Manager. Download the Font Awesome web font files from your website.Anyway, I found the easiest way to cut off some extra fat to make your website a bit slimmer. Since I am not much into coding and similar stuff, I found most of those guides either unclear or too complicated. Upon googling a lot, I came across various tutorials describing the ways to remove useless icons from Font Awesome web fonts. 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 surely 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 of the bloat, you can boost the Font Awesome performance and ultimately your site’s speed. 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 which 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 is 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. Font Formats: SVG, WOFF, WOFF2, EOT, & TTF Before the optimization, the total size of Font Awesome files was 931KB but after editing the web fonts, I was able to bring it down to the file size of just 16.8KB. You can easily optimize SVG, WOFF, WOFF2, EOT, and TTF files to the lowest possible size. While the loading time of a website depends on various factors, it’s a good idea to red rid of unused Font Awesome icons for better performance. A fast-loading website with great content can guarantee better search engine rankings and lower bounce rates.
0 Comments
Leave a Reply. |