This article was originally written in 2015 for a team of developers but is now published on this site for public consumption since 2022.
For years we have used the term web friendly or web safe font. What is a web friendly font? Web friendly fonts are fonts that are pre-installed by many operating systems. In the past it was considered any font that was supported by both Windows and Macintosh at least by 90% as web safe by many. We would check this percent with websites like cssfontstack.com that estimate the percent a font is pre-installed on a computer. So generally speaking, web safe fonts were Arial, Arial Black, Tahoma, Trebuchet, Verdana, Times New Roman and etc.
There has been an increase of internet usage by smartphones 394% and tablet 1,721% higher between Dec 2010 and December 2014 according to comScore. comScore also reports that March 2015 marks a new era of a mobile first world with Mobile only users exceeding the amount of desktop only users. Now there is still a large percent of multi-platform users, but statics are showing as of July 2015 mobile devices make up 51% of internet usage in the USA. Something else we have to be mindful of is the increase of other devices that can access the internet and internet users are buying these devices with many owning multiple devices that can access the internet.
So, the question arises. In 2015 can we still use the term web safe font? Arial has always been the choice of font for the web, but Android devices technically don’t have Arial instead it uses Droid Sans that looks similar. As previously noted, Arial black was supported 90% by both windows and Macintosh but it is not supported by iOS or Android. So that means while you may design and program text to look a certain way on a desktop it may not have that same look on a mobile device. And as different TVs and smart watches and other devices grow it will harder to call any font web friendly or web safe.
Should we use custom fonts? Although Android and iOS may not have the exact font we want to use in most cases when we stick to using Arial our designs will generally look the same on mobile as it does on a desktop. So, we should still try to avoid using custom fonts. Still some clients will want a fresh look so you may need to use custom fonts. In this case there are no concerns about it looking different between desktop and mobile but there are some things we do need to consider.
Performance when using custom fonts is extremely important. No matter if you are on a phone or a laptop you don’t want to have to wait for a font to load to see the site. So, when using custom fonts try to limit it to one custom font on the site. The other thing you have to be mindful of is even when you use just one font, how many versions of that font are you using? When you make a font bold or thin or italic that means an additional font file for each look. Try to keep this down as much as possible. You shouldn’t ever really go over normal, bold, italic and bold italic. That is 4 font files a user has to load. Depending on how large the font files are they could extremely hinder a person’s use of the website especially on a limited or slow data plan.
Hosting the file is the next thing you have to think about. If you are getting your custom font from Google Fonts or Typography or a place like that, they often offer a way to link to the font straight from your site to theirs but is that ideal? Think of it this way say you drive up to a fast-food place and order a combo meal. The burger comes out right away but then you see a worker run across the street into the next building and comes out with your fries. Sure, it didn’t take long but for a moment you didn’t have the complete order and you couldn’t leave the drive thru till you got your fries. It’s the same with allowing your fonts to not be hosted on the same site as your website there may be time where the site loads it is the wrong font and then it’s the right font. This can still happen when you are hosting the font on your server, but it does cut down on this issue. Hosting the font file on your own site also helps you keep control of the font and avoid the issue of the font you were referencing gets moved or edited it.
Creative and Development working together. When you are working in an environment where you have artists and developers working separately it’s a key thing for the artist to document what font they are using in their mockups. So that way the developer knows what web fonts are needed. When an artist uses google fonts, they can easily just provide the name and what styles they used. When using something like Typography it would probably be best if the artists can just provide the downloaded font from that site. No matter who gets the font communication is key between both parties for a good user experience for the end user of the website.
So, no matter if we are attempting to use common fonts or custom fonts on the web lets be mindful of all the users and the potential future users of our sites.