Derek Zoolander: ‘What say we settle this on the runway…Han-Solo?’

There are lots of classic rivalries. Today we’ll chat about Font Awesome’s two main implementations — web fonts vs SVG. (And we provide a handy dandy scorecard at the end of the blog to help you tally up what’s best for you.)

The Web Font vs SVG Rivalry 

Some folks think that newer (SVG) is always better, and we should stop talking about it. We’ve found, though, that the conversation is more complex than that. Let’s dive into the nuance because there isn’t always a “right” answer.

Before 2012, icons were simply images on a site, but working with them was hard. You had to fiddle with individual files (or learn how to use image sprites). Font Awesome innovated by using web typography to improve the experience of putting icons up on a site. 

Retina-enabled monitors were just hitting the market, too, displaying beautiful type next to clunky, pixelated icons. 

If you’re curious to learn more, Peter Biľak gives a good, brief talk about web fonts’ history. 

Now we’ll get down to the business of discussing SVG vs. web fonts and the Pros and cons of each. 

The Pros and Cons of Web Fonts and SVG

Why Web Fonts are Awesome

• They’re bundled into one super-optimized and compressed file that is widely supported
• They’re based on a vector image format instead of bitmap, so they looked beautiful on retina displays
• They’re easy to use by just including this HTML markup `<i class=”fa fa-coffee”></i>`
• They’re extremely performant once loaded. 

Why Web Fonts Can Suck

• Using web fonts as images can result in odd problems (like spin animation having a strange wobbly result). 
• Taking an additional step to make icons automatically accessible to screen readers is easy to forget. 
• Downloading more icons than you need is wasteful (although you can fix this). 
• Managing CSS files and web font assets can be frustrating (‘specially if you’re on managed hosting). 
• Creating multicolor or duotone icons is difficult (although this is changing). 
• Getting a flash of unstyled or invisible content (FOUT/FOIT) is bummertown. 

Why SVG is Awesome

• File sizes are smaller than bitmaps JPG / PNG (but web fonts are usually smaller). 
• SVG can be extremely performant, embedded as HTML directly in the page (but you need to style them). 
• Accessibility is more robust and battle-tested (but you have to understand it and remember to apply it). 
• They are graphical by nature, so animating or modifying with CSS works great. 

Why SVGs Can Suck

• Using embedded SVG means you have to style and size it yourself.
• If loading single SVGs, you get right back into downloading single resources instead of bundling them (although there are sprite techniques and HTTP/2 makes lots of small requests more efficient)
• You might still get a flash of unstyled or invisible content (depends on how you load it)
• Inline SVG might be ultra performant, but it clutters your HTML and makes reuse difficult.

Why Was SVG Added to Font Awesome? 

With version 5, we recognized that web fonts were not always the best option for all sites and situations. So during our Kickstarter campaign, we added SVG support as one of the stretch goals.

And sure enough, our backers hit the goal.

The challenge we faced was bringing SVG support to Font Awesome in a way that felt familiar yet provided the benefits of what the new format could provide.

We’ve talked about web fonts and SVG in a fairly abstract way thus far. Before we continue, it’s worth noting that …

SVG encapsulates three varieties of usage:

1. Using individual SVGs as HTML markup (embedded or loaded over HTTP)
2. Using SVG sprites (this is a technique we will touch on later)
3. Using a JavaScript library to replace the familiar <i> tag with <svg>

Using JavaScript, we added some advanced features that are not possible with web fonts with that third option.

Our Power Transforms give you a fighter pilot’s cockpit full of controls to scale, move, and rotate an icon from a relative position. And our masking lets you take two different icons and composite them together into one. Add in layering, overlaid text, and icon-style counters, and you can quickly accomplish some complex maneuvers, all with the built-in power of the SVG format.

Why Font Awesome Offers Web Font and SVG Options

As we’ve established, there are pros and cons to all of these scenarios. Instead of shoe-horning you into one method, we like to provide multiple ways to get the job done. This adds complexity to Font Awesome, but everyone has their own unique priorities and focuses on adding icons to a project.

A great example of when to choose web fonts vs SVG 

At our site, fontawesome.com, our icons listing page intentionally displays thousands of different icons on one page. We need that to be as performant as possible as it’s the most popular section of our site. In this case, web fonts just win. 

Since web fonts use TrueType and OpenType font specifications, these formats have been optimized for file size and performance for literally decades. Not only do browsers work hard to make them fast, but the operating system itself usually bakes in all kinds of fantastic optimizations for displaying fonts on a screen.

But don’t get too excited about web fonts just yet. 

When to embed SVG into the markup 

A site displaying even 20 icons can easily be optimized by embedding the SVG directly in the markup. You can use embedded CSS style as well and really squeeze out every bit of performance. And in this scenario, SVG will win by huge margins.

The time it would take compared to loading a separate web font over the network, having the browser parse the file format and load it, then paint the characters on the screen will never be as fast as the embedded SVG at a small scale.

There are even combinations of tools like React and Next.js that can pre-render icons for you, so you get the benefits of using React and the performance of embedded SVG. 

Web Font vs SVG Is Always a Case by Case Basis

And there are all kinds of use cases in between. We have customers that manage WordPress sites where they can only change the CSS; changing the HTML markup of the page is off-limits. For those folks, web fonts are probably the best choice. 

Some folks have strict accessibility requirements, and web font <i> tags just don’t provide the semantic controls needed to meet WCAG compliance. Those folks need the additional options offered by SVG.

And finally, remember the extra features we were able to build into our SVG JavaScript framework? If you need Power Transforms, your only option is to use SVG.

How a Font Awesome Kit Solves the Sucky Stuff 

Kits are the fastest and easiest way to get Font Awesome up and running on your website. Kits allow you to package up your own version of Font Awesome just the way you like it. It’s a little bundle of settings and icons that we think is the best way to use Font Awesome.

With Kits you can …

• Automatically make your icons accessible to users with vision impairments.
• Download only the icons you use, which will help you save bandwidth and increase performance. 
• Put one line of code on your site and let us worry about hosting with our CDN.
• Switch between web fonts and SVG with ease.
• Upgrade versions of Font Awesome automagically as we release new features and icons.
• Upload your own icons and use them alongside Font Awesome Icons. 

Just Friggin’ Tell Me Which One Is Better. Web Font or SVG?!

Okay, Cranky Pants. Do you want a scoreboard to tell you which you should choose? Grab a pencil. Let’s do this. And remember, it’s a Coke vs. Pepsi thing. As in — when should you use web fonts vs. SVG? Well (you’re going to love this), it depends! Here’s a handy-dandy score sheet so you can sort it out. 

–> DOWNLOAD THE CHECKLIST

When To Use SVG and When To Use Web Fonts 

Subscribers to our Font Awesome paid plans get access to Actual Human Support including, the developers who understand Font Awesome the best.

If you scored three or more for either web fonts or SVG, that’s a pretty good indication. If you scored two or less, then you might want to reach out to us, and we can guide you a little better. 

Still need assistance? Drop us a line and we’ll be happy to help you sort it out.

Get Help