How Web Fonts Work
I’m a developer and as such, I very much have a developer’s mindset… Fonts what fonts? You can read it can’t you?
This is why we have designers because if I were in charge of the web it would be in all black on white Arial or whatever your default font might be.
Ok, I’m not that cynical, but I do know my place as a developer and rely heavily on designers to make the things I build look good and this includes the use of fonts.
Even amongst some of the best designers I know, there is a lot of confusion about how fonts work on the web. I can’t tell you how many design files I have received with some crazy font combinations that can’t be used online or how many times clients have provided branding guides only to be surprised not everything can be replicated.
The Basics of Fonts and How They Work
Your computer can only display the fonts that it has installed on it or that is made available to it by other means. If a designer of any computer-based medium is to deliver a specific font as part of their presentation they must ensure that the chosen font is available to your computer for display.
There are three ways to ensure a font is displayed as we intend:
- Use a common/universal font, such as Arial
- Deliver the needed font along with everything else that makes up the web page.
- Convert it to an image so that we do not need to rely on the end user having access to the required font. This is common when displaying brands and logos.
So You Don’t Want to Use Arial?
Fair enough (I guess) and you don’t want to use another universal font… Times New Roman, anyone?
Now we have to identify the fonts we are going to use and how we are going to deliver them to the end user.
When a designer wants to use a new font in Illustrator, Photoshop, etc. they will simply install it on their computer. It’s obviously not a reasonable proposition to ask our website visitors to install fonts so they can see our site in all its glory so we must package them with our website.
Computer Fonts are not Web Fonts
The fonts that a designer installs on their computer via font library files are not the same files we can use on a website to send to the end user. I can always tell I am working with a print designer when they package up the font files for me. So in order to find fonts for web use, we must look online or convert desktop fonts to web fonts.
Everything Online is Free, Right?
Like it seems with all things ‘computers’ there are open source versions and there are licensed versions. Licensed fonts are those that you have to pay for and open source fonts are those that developers can use free of charge.
Licensed Web Fonts
If you are real picky about your fonts or your project must follow strict branding guidelines, you may find the fonts you need are licensed, meaning you have to pay for the right to use them. Typical licensing models are monthly or annual subscriptions from services like Fonts.com Adobe Fonts and MyFonts.com. Once your subscription is in place and you have chosen your fonts, your developer will need to install a small script within the website that verifies the subscription and delivers the fonts. Some services provide web font files that be stored on your server and others deliver the fonts from their servers via that script.
Open Source Fonts
Free is good, right? There are some great open source fonts and a large selection, Google (Google Fonts) being the primary source whereby you can search for and find fonts for use in your web projects free of charge. Just like the licensed fonts, these can be included in your web project via a provided script.
Did I Mention Not All Fonts are Web Fonts?
Not all fonts are web fonts and when you search for fonts, especially on the commercial licensed font sites, make sure you are searching web fonts. You may find that you will have to substitute some planned fonts for what is available for web use.
A Word of Warning for Web Designers
Be sure that when you are preparing your design comps for clients you are using web-ready fonts (open source or licensed). Selling a client on a particular design that can’t be implemented or will include unforeseen licensing costs is tough, especially for the developer who usually is the one to have to provide the bad news.
Also, remember what I said about being a developer… If I had it my way everything would be Arial, do you really want to leave me in charge of finding web alternatives for your design?
A Note About Performance
Web fonts slow your website down. There is no way around it. You are requiring your visitors to download resources so that they can see things as intended. This takes bandwidth and time. So with this in mind, you will want to keep your fonts to a minimum. For example, within our Genius Stack WordPress development service, we typically advise clients to pick one font for their headline and one for their main body font.
It’s important to note that often times if you pick a bold and regular for two fonts, you are in fact loading up 4 founts. Again keep things as simple as possible while maintaining your style and brand.
Fonts We Use
Within our website building services, we license Adobe Fonts for our client’s use, often using Google Fonts or converting provided fonts to web fonts (woff and woff2). We will often check with our clients if we are having trouble finding an online equivalent and/or are concerned about licensing. Ultimately it is our client’s responsibility to ensure they have the proper licensing for any font used on their website (image or text).
