In this post I’ll dive into native fonts vs custom fonts. What the difference is and the pros and cons with each.
Fonts have had a ever evolving history on the web. If you’ve been in the IT space a while, you would have had the fortune of having to do one of these tedious tasks:
- Design using only ‘web safe’ fonts which was limited to a small number of fonts. I.e. Verdana, Tahoma and Arial
- Load font files and converting files into TTF and OTF files – so that everyone who viewed your website was able to see the fonts that were meant to load
- Converting text to images to retain their format.
Some of these we still do today, however there are better ways to do this that won’t compromise the user experience or the way it’s built.
With the introduction of font libraries such as Adobe fonts kits and Google fonts, we can begin using fonts that users actually prefer that also take minimal time to apply. In addition to this they are also visible across browsers.
More recently, we’ve started introducing the ‘native stack’. Fonts that systems typically already have on their computer that look pretty decent.
Popular frameworks have recently adopted this and will reference the ‘Native font stack’ as their default font.
Before we compare both custom and native fonts, let’s define what they are.
What is a font stack?
Native font stacks are fonts that are available as the default on a user’s device. The ‘stack’ refers to the backup fonts that are available when loading. Don’t have ‘arial’ ok go to the next font and look for that.
So when using a particular device, when a website or product refers to the ‘native stack’ the code will automatically recognise the device and pick up the font that’s already on the device.
The big three device providers are:
- Apple
- Microsoft
- Google.
And here are what their default font list looks like:
$font-family-sans-serif:
// Safari for OS X and iOS (San Francisco)
-apple-system,
// Chrome < 56 for OS X (San Francisco)
BlinkMacSystemFont,
// Windows
"Segoe UI",
// Android
"Roboto",
// Basic web fallback
"Helvetica Neue", Arial, sans-serif,
// Emoji fonts
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
What is a Custom Font?
Unlike font stacks that are pre-loaded on your users operating systems, custom fonts are loaded temporarily onto a users device while they’re viewing your website or app. The issue with custom fonts is that they often have a second delay when loading or transforming from default font to loaded, custom font. So ideally what you want to do is have a fall back web font that is as similar to custom font as possible. That being said, it a second delay and users typically don’t have an issue with this quick change when loading. Here’s hoping that technology in future will remove this issue altogether.
So why use a custom font?
Put simply, it’s Branding. Branding is crucial to conveying a strong presence on the web and the no 1 friend to branding is consistency! Being consistent on your offline marketing material, product and website is crucial so it’s understandable that companies will want to use their own font on their website.
Things to factor in when considering a custom font is:
– Page load speed
Fonts can take time to load, the more styles and weights being use, the longer it takes to load. You can use sites like Pingdom.com to test and see how long it takes to call on the font file and load it. This may be ok for websites depending on the design, however it’s critical for product design where users are spending a lot more time. When it comes to page speed, consider using a font stack rather than a custom font.
– Licensing
Netflix went from using a font design from a font house to creating their own font in-house. Why? Because licensing fonts can be incredibly expensive. This is becoming the norm with large tech companies. If you can afford to pay licensing fees (per view or load I might add!), why not get an experienced designer in-house to create your very own font.
To avoid paying these large licensing fees, you can of course use free fonts such as Google. No need to download or transform font files into OTF, simply embed the link into your digital product and you’re ready to go.
If you have any thoughts or comments around this topic, add it below.
Stay informed,
