I’m a developer, so I very much have a developer 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 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 are 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 their computer for display.
There are four 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 as files from the web server.
- Deliver them with javascript from a third-party such as Google Fonts or Adobe Fonts.
- 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 will use and how we will deliver them to the end user.
When designers want to use a new font in Illustrator, Photoshop, etc., they will 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 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.
Licensed vs. Open-Source Web Fonts
As 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 really 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. 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.
Like the licensed fonts, these can be included in your web project via a provided script or by downloading web ready fonts and including them in your scripting.
Not All Fonts are Web Fonts
Not all fonts are web fonts, and when you search for fonts, especially on commercially 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 preparing your design comps for clients, you use web-ready fonts (open source or licensed). Selling a client on a design that can’t be implemented or will include unforeseen licensing costs is tough, especially for the developer, who usually has 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?
Fonts Affect Website 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.
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.
