All website owners and developers want their site to load fast with the best possible performance. There are many steps that one needs to perform for optimizing your site. If you’re using font icons then convert them to SVG (Scalable Vector Graphics) is a great option.
AVAILABLE NOW: Detailed video of the steps below
Problem Statement
You need to load the whole font file if you want to use the icons in your CSS. This adds unnecessary hit to the performance if you just want to use the icons. Creating them in SVG is better and faster. You can cache them in your server or the browser for a longer duration.
Creating SVGs from scratch is also not an option for some. if you can do it then it’s one of the best options to consider. That way you can create your unique and custom icons.
Solution: Font icons to SVG
A much simpler (and faster) route can be converting your font icons to SVG.
A quick google on the topic returns many helpful links and tools. At times these links have complicated steps. Some tools need your email to register.
Why this post?
After going through many links and tools, I am cutting through the chase and boil it down to two simple steps.
Without further ado
Step 1: Choose your font icons
- Go to http://fontello.com/
- Select your icons (one or more) and
- Download web-font to your computer, it will download as a zip file
Step 2: Convert to SVG
- Unzip the downloaded file in your computer
- Go to https://icomoon.io/app
- Click on “Import Icons”
- Select all font-files (eot, svg, ttf, woff, woff2) in the “font” folder of the unzipped folder.
- Choose the icons that you want to convert (single or multiple)
- Click on “Generate SVG & More”, it will download as a zip file
- Unzip the downloaded file and it will contain your SVG in “SVG” folder
Video Tutorial
Conclusion
Converting font icons to SVG is one of the options that you should consider for improving your site’s performance.
There are many other steps involved in optimizing your site’s performance and is not in the scope of this post.
Many more fantastic tools and tutorials are available online. I encourage you to find the best one that suits your needs. One great read is https://www.sarasoueidan.com/blog/icon-fonts-to-svg/ It is one of the few posts that worked for me.
The intent of this post is to serve a quick 1-2 step for converting font icons to SVG. It serves for my reference and can be yours too!
Let me know what are your thoughts on it.