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.

How to use Web Safe Fonts
How to use Web Safe Fonts

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
Papyrus, fantasy

Web Safe Font Example

Arial

OS Compatible – 99.84% Windows and 99.74% Mac

Arial Web Safe Font Visual
Arial Web Safe Font Visual

Arial Black

OS Compatible – 98.08% Windows and 96.22% Mac

Arial Black Web Safe Font Visual
Arial Black Web Safe Font Visual

Comic Sans MS

OS Compatible – 99.04% Windows and 97.14% Mac

Comic Sans MS Web Safe Font Visual
Comic Sans MS Web Safe Font Visual

Courier New

OS Compatible – 99.73% Windows and 95.68% Mac

Courier New Web Safe Font Visual
Courier New Web Safe Font Visual

Georgia

OS Compatible – 99.4% Windows and 97.48% Mac

Georgia Web Safe Font Visual
Georgia Web Safe Font Visual

Impact

OS Compatible – 0% Windows and 95.14% Mac

Impact Web Safe Font
Impact Web Safe Font

Lucida Console

OS Compatible – 99.18% Windows and 0% Mac

Lucida Console Web Safe Font
Lucida Console Web Safe Font

Lucida Sans Unicode

OS Compatible – 74.81% Windows and 99.64% Mac

Lucida Sans Unicode Web Safe Font
Lucida Sans Unicode Web Safe Font

Palatino Linotype

OS Compatible – 99.29% Windows and 86.13% Mac

Palatino Linotype Web Safe Font
Palatino Linotype Web Safe Font

Tahoma

OS Compatible – 99.95% Windows and 91.71% Mac

Tahoma Web Safe Font Visual
Tahoma Web Safe Font Visual

Times New Roman

OS Compatible – 99.67% Windows and 97.48% Mac

Times New Roman Web Safe Font Visual
Times New Roman Web Safe Font Visual

Trebuchet MS

OS Compatible – 99.67% Windows and 97.12% Mac

Trebuchet MS Web Safe Font Visual
Trebuchet MS Web Safe Font Visual

Verdana

OS Compatible – 99.84% Windows and 99.10% Mac

Verdana Web Safe Font Visual
Verdana Web Safe Font Visual

Hope you find this post useful. Which Web Safe Font do you use and why, do let us know in the comment section below.

Read More:
How to Remove Dashicons from Genesis Theme
Remove Font Awesome from WordPress Theme
How to Enable Accelerated Mobile Pages in WordPress

Photo of author
Saurabh K
Saurabh K is a technology enthusiast and part-time blogger. He loves to explore the efficient use of technology and gadgets. He is an outlier and lensman. Add him in your social circle to know more.
Disclaimer: Affiliate links of some product(s) are being used on this page, if you follow the link and make a purchase, we may receive compensation from respective companies. This compensation comes at no additional cost to you.

Leave a Comment

Your email address and website details will not be published. Required fields are marked with *.