Why [& how] Use Web Safe Fonts over Web Fonts

This post will guide you about the Web Safe Fonts and why you should use Web Safe Font over Web Fonts. Will also share some Web Safe Font example and how to use Web Safe Fonts over Web Fonts.

Every time you load a webpage in a browser, it displays text of webpage on your computer screen with specific font. The specified font could be a font locally installed on your computer, or it could have been requested by the web browser to load from a web server. This is how web browsing work, Right. Now, before digging into the details, let’s understand about the Web Safe fonts and Web Fonts.

☲ Table of Contents

What are the Web Safe Fonts?
What are the Web Fonts?
Why you should use Web Safe Fonts over Web Fonts?
How to use Web Safe Fonts properly?
Cheat Sheet for complete list of Web Safe Fonts
Web Safe Font Example

What are the Web Safe Fonts?

Several fonts installed by default on the computer you use. The heighly used operating systems in the world are Windows and MacOS. You might have noticed that there are only few fonts which are common and locally installed on the both operating systems. These locally installed universal fonts are called Web Safe Fonts.

Web Safe Fonts are the universal fonts comes pre-installed with the operating systems and browsers like Windows or MacOS and Chrome or Firefox. Web Safe Fonts are the most commonly used and seen fonts by majority of population. Most commonly available, Arial, Courier New, Georgia, Times New Roman and Verdana these five fonts come under this category. Few other fonts like Helvetica, Tahoma, Geneva, Lucida Sans Unicode etc. are also Web Safe Fonts. Jump to the cheat sheet given below for complete list of Web Safe Fonts.

What are the Web Fonts?

Web Fonts look new and feel fresh, and commonly used by modern web developers. A wide variety of Web Fonts is available for free like Google Fonts. Premium fonts like Adobe Typekit Fonts are also available and are being used by bloggers and webmasters on their websites. You can host Google Fonts on your server or load directly from Google Cloud APIs.

Why you should use Web Safe Fonts over Web Fonts?

Webpages with Web Safe Fonts load faster as the browser renders webpage data faster from such webpages and displays the page earlier. Because Web Safe Fonts installed locally on your computer they load faster hence improve your website performance.

On other side, when you open a webpage which is coded to load Web Fonts, this time the browser has to download font files in order to display webpage properly. This process took a considerable amount of time and your website loads slower.

The main reason to use Web Safe Fonts over Web Fonts is the website performance. Let’s discuss how…

Web Safe Fonts are available for free and being used widely in web development since long. Web browser took zero download time (in most of the cases) to load Web Safe Fonts and It help to increase the performance of website..

Usually, web browsers took a significant amount of time to load Web Fonts. Web Fonts directly impact the website performance and slows it down.

How to use Web Safe Fonts properly?

Every font we use on web belongs from a specific Font Family. And each Font Family has a single Web Safe Fonts. If the browser fails to load specified font (for any reason), it loads second specified font by the author or similar available font. As a final resort, if no font is available; browser load default font of the same Generic Family. These second and third tire fonts are called fallback fonts. You can use multiple fonts in your CSS specifications as fallback fonts.

Lets consider, if your CSS arrangement (Web Safe Font example) is following

font-family: Tahoma, Geneva, sans-serif;

In such case, the web browser will load Tahoma font first, and if it is not available (for any reason), it will try to load Geneva. As both of these fonts belong from ‘sans-serif’ font family, browser will load default font of ‘sans-serif’ family, whichever is available.

According to Wikipedia, there are five Generic Font Families:

Sans-serif: Fonts that do not have decorative markings, or serifs, on their letters. These fonts are often considered easier to read on screens.
Serif: Fonts that have decorative markings, or serifs, present on their characters.
Monospace: Fonts in which all characters are equally wide.
Cursive: Fonts that resemble cursive writing. These fonts may have a decorative appearance, but they can be difficult to read at small sizes, so they are generally used sparingly.
Fantasy: Fonts that may contain symbols or other decorative properties, but still represent the specified character.

In order to use Web Safe Fonts properly, you need to identify the font and font family. Than you can to specify font characteristics via font-family CSS property in your CSS arrangement.

CSS arrangement – Web Safe Font example

body { font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; }

Cheat Sheet for complete list of Web Safe Fonts

#	font-family
Sans-serif Fonts	Arial, Helvetica, sans-serif
	“Arial Black”, Gadget, sans-serif
	Tahoma, Geneva, sans-serif
	“Trebuchet MS”, Helvetica, sans-serif
	Verdana, Geneva, sans-serif
	“Lucida Sans Unicode”, “Lucida Grande”, sans-serif
	Impact, Charcoal, sans-serif
	“MS Serif”, “New York”, sans-serif
	“MS Sans Serif”, Geneva, sans-serif
	“Comic Sans MS”, cursive, sans-serif
Serif Fonts	Georgia, serif
	“Times New Roman”, Times, serif
	Garamond, serif
	“Palatino Linotype”, “Book Antiqua”, Palatino, serif
	“Bookman Old Style”, serif
Monospace Fonts	“Courier New”, Courier, monospace
	Courier, monospace
	“Lucida Console”, Monaco, monospace
Fantasy Fonts	Copperplate, “Copperplate Gothic Light”, fantasy
Fantasy Fonts	Papyrus, fantasy