Regardless of the visual design layout, implementing typography presents a major decision point for every website. As a WordPress designer and developer, I ask whether the organization has a Brand Standard and set requirements for using specific fonts. We generally recommend that even when a Brand Identity specifies “print” fonts, we strongly suggest that there is a close match selected for use as a web-safe font. However, this is often not the case.
More frequently, we find that Google Fonts are used in Microsoft Office (and print) and that we need to use the same font on websites. Google fonts are open source, and most use the SIL Open Font (as well as Apache or Ubunto Font) license making them permissive for use in print,
To understand how fonts work on websites, let’s consider the evolution of web typography. We break fonts down into two contemporary categories:
- Web-safe fonts
- Web fonts
1. Web-safe Fonts
Web-safe fonts¹ are readily available in all systems/browsers and do not require special installation or third-party downloads for the display. They’re the only fonts guaranteed to show in all browsers regardless of a user’s geographical location, internet bandwidth, browser settings, or device.
The great thing about web-safe fonts is that you don’t have to worry about downloading them. They only require the developer codes it into the website’s CSS.
Per Kinsta, “
A Web-Safe Coding Example:
Regardless of the theme in use on a WordPress site, we always install a child theme and can more easily add customizations without worrying that our changes will be overwritten when the parent theme updates. Updating a theme is literally a rip and replace operation, so unless the parent theme is designed by its developers to store all customizations in a protected manner within the database, the child theme approach is strongly recommended.
All you need to do is add a small code snippet inside the custom CSS of your customizer settings. Open your child theme customizer and click to open the Additional CSS panel.
Hypothetically, let’s say that we want all “body” text to use the Calibri web-safe font. We don’t need to download or install files, but we need to add this little code snippet in the Additional CSS panel (and publish to save).
2. Web Fonts
Web fonts² are other fonts that are not specifically considered “web-safe.”
Years ago, we could call for a font’s usage on a website in the CSS (Cascading Style Sheets) in a similar fashion to what is shown in the code snippet above; however, if the site visitor didn’t have that font on their local computer, a more generic font such as Times New Roman will be displayed. This presented a dilemma to website and marketing professionals alike. We couldn’t be 100% certain how a target audience viewed the website design. And fonts are a critical part of website display and brand identity.
We can still use a custom font. It is not uncommon for a business to invest in purchasing a licensed font for their print and digital marketing. One must purchase the premium license that includes the web font. A series of file formats are included with fonts, including WOFF. Once the license is purchased, the web font files are uploaded to the website — usually, we create a /font/ folder in the domain root and then use special CSS to load the font into the website locally.
So what about Google Fonts? About 75% of the websites I build use Google Fonts, but we must address issues in how the fonts are loaded and optimized on the site to avoid major slowdowns in loading. Google fonts are open source and include free access to beautiful typography and iconography. However, while using them might not cost money, there is a potential cost in website performance.
Are Google Fonts Web-Safe?
No. Google fonts must be linked through a website’s CSS to the Google font servers, OR the font must be installed directly into the website’s server to bypass the lag time incurred in downloading from a remote location. Ironically, when we test a website’s page speed, the Google Font access to their remote server can slow down the website, as mentioned above. It presents challenges to those of us who develop sites.
We turn somersaults to work around the issues Google fonts present in site loading from downloading and placing on the site’s server, similarly to custom fonts using plugins like OMGF to load the scripts more efficiently.
¹Google Fonts include over 900 fonts in the following categories:
- Serif
- Sans Serif
- Display
- Handwriting
- Monospace
²A list of Web-Safe Sans Serif Fonts:
- Arial
- Calibri
- Candara
- Century Gothic
- Consolas
- Copperplate Gothic
- Dejavu Sans
- Franklin Gothic
- Geneva
- Gill Sans
- Helvetica
- Impact
- Lucida Sans
- MS Sans Serif (MS = Microsoft)
- Neue Helvetica
- Optima
- Segoe UI
- Tahoma
- Trebuchet MS
- Verdana
Web-Safe Serif Fonts:
- Baskerville
- Bodoni MT/Bodoni 72
- Calisto MT
- Cambria
- Courier New
- Didot
- Garamond
- Georgia
- Goudy Old Style
- Lucida Bright
- Palatino
- Perpetua
- Rockwell
- Times New Roman
Web-Safe Cursive Fonts:
- Segoe script
- Rage
- Script MT
- Snell Roundhand
- Lucida Handwriting
In the above list, it would not be uncommon to find that you are using these in local apps like Microsoft Word.