Fonts. We see them every day. From print ads to magazines, there’s all kind of fonts out in the world.
Whether you’re an eCommerce store owner or a budding blogger, the one thing that all websites have in common is the use of text for content.
Putting some thought on your displayed text (or typographic design) is unsurprisingly important when creating your site’s overall aesthetic and to ensure its success.
But what’s more important is for them to be web safe fonts.
What Are Web Safe Fonts?
Web safe fonts are font styles that are usually pre-installed and made viewable in to most devices – computers, mobile phones, smart TVs, and tablets.
Why web safe fonts matter?
In an ideal world, you should have the ability to choose any font you want for your website. In reality, there are restrictions to the type of fonts that you can use.
Most computers and web browsers come with a set of fonts that are pre-installed by the manufacturers, however, their designs can (and usually) differs. There wasn’t a standard font set that was shared by all the different manufacturers.
If the font that you used was not installed on a user’s computer, then your website will just revert to a generic font, which can sometimes end up as unreadable.
In other to avoid that, web designers have been using the Core Fonts for the Web that Microsoft released in 1996 as the standard for most website fonts. These set of fonts eventually became “web safe fonts’, because regardless of the computer, the fonts will safely appear on your website.
Should I Use Web Safe Fonts For My Website?
Short answer: Absolutely.
If you want to keep the design and visual brand of your website consistent, then using a web safe font ensures that your website appears exactly as you’ve intended it to be.
In fact, almost all website today are using some form of web safe font. Web designers will always recommend choosing a web safe font in order to avoid having generic fonts, such as Times New Roman, appear when users are visiting your website if they do not that specific or custom font.
How Do I Add These Web Safe Fonts?
There are a number of ways that you can use to add these fonts into your web page, but if you’re not into programming or have little-to-no technical experience, you can just easily copy the raw CSS code and paste them directly into your own stylesheet to use the fonts.
If you're still unsure, then just follow these few simple steps:
- Load up your header.php file
- Copy the font source/standard code (see reference 1)
- Paste the code at the top of your header file.
- Load up your style.css, put the font code to change the font text of your choice. (see reference 2)
Reference 1
<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
Reference 2
body {font-family:'Abel';font-size:22px;}
The 25 Gorgeous Web Safe Fonts For Your Website
1. Arial
Links/Source: Fonts.com / CSS Font Stack
2. Calibri
Links/Source: Fonts.com / CSS Font Stack
3. Helvetica
Links/Source: Fonts.com / CSS Font Stack
4. Segoe UI
Links/Source: Fonts.com / CSS Font Stack
5. Trebuchet MS
Links/Source: Fonts.com / CSS Font Stack
6. Cambria
Links/Source: Fonts.com / CSS Font Stack
7. Palatino
Links/Source: Fonts.com / CSS Font Stack
8. Perpetua
Links/Source: Fonts.com / CSS Font Stack
9. Georgia
Links/Source: Fonts.com / CSS Font Stack
10. Consolas
Links/Source: Fonts.com / CSS Font Stack
11. Courier New
Links/Source: Fonts.com / CSS Font Stack
12. Tahoma
Links/Source: Fonts.com / CSS Font Stack
13. Verdana
Links/Source: Fonts.com / CSS Font Stack
14. Optima
Links/Source: Fonts.com / CSS Font Stack
15. Gill Sans
Links/Source: Fonts.com / CSS Font Stack
16. Century Gothic
Links/Source: Fonts.com / CSS Font Stack
17. Candara
Links/Source: Fonts.com / CSS Font Stack
18. Andale Mono
Links/Source: Fonts.com / CSS Font Stack
19. Didot
Links/Source: Fonts.com / CSS Font Stack
20. Copperplate Gothic
Links/Source: Fonts.com / CSS Font Stack
21. Rockwell
Links/Source: Fonts.com / CSS Font Stack
22. Bodoni
Links/Source: Fonts.com / CSS Font Stack
23. Franklin Gothic
Links/Source: Fonts.com / CSS Font Stack
24. Impact
Links/Source: Fonts.com / CSS Font Stack
25. Calisto MT
Links/Source: Fonts.com / CSS Font Stack
Font Tools To Check Out
A number of tools exist online that you can use to check and test out different fonts that you can use for your website. If you’re having trouble choosing a font or just want to explore what types of web safe fonts are available, these sites are a great tool to use.
Font Pair
Font Pair offers a ton of resources, plugins, eBooks, guides, videos, and even inspirations on anything and everything to do with typography. They even have a section that gives you the most popular fonts available on Google Fonts and which fonts are best paired with each other.
Wordmark.it
If you want a quick preview of what your text would look like with a certain font, Wordmark.it gives you an instant preview of how your text would appear on multiple fonts at once. Just type a word or phrase on their front page bar, press enter and it will show you your text with different fonts such as Candara or Lucida Console.
WhatTheFont
WhatTheFont is a tool that you can use to figure and identify a font that you’ve seen online. All you have to do is just upload an image of the font and WhatTheFont will cross-search it in their database to give you the closest results. If you still can’t find the exact font, you can even head to their forum to ask for help.
It's All About The Font Play
If you're anything like me, then odds are you spend a lot of time on the web, reading and visiting tons of websites. Because of that, you'll appreciate it when a website uses good typography to complement their site's visual design.
When you use web safe fonts that are pleasing to the eyes, your users will be grateful and more willing to come back and consume more of your content. So what are you waiting for? Start using these fonts and make an awesome website for your business!
Read more:
