We see fonts every day several hours a day for most of us. If you’re an office worker you may see even more. They are used in print and on websites as well. In fact, fonts were originally designed for typesetting to print newspapers and books.
Today fonts are used in an electronic form for website design, ad graphics, and more as well as newspapers, magazines, and books that are still printed.
How do you know that the font you choose will show up to the viewer?
We have put together 32 web safe fonts that you can use with CSS on your website.
Before we get to those, however; do you know what a web safe font really is?
What is a web safe font?
Each operating system is it windows or mac comes with a certain number of built-in fonts. Even though not all computer systems have the same typefaces installed, you can use a web safe typestyle pack to choose several fonts that look comparable. This will allow various systems see what you have posted on your website.
If you do not choose a web-safe font; not everyone who visits your site will be able to see what is posted on your page that is why it is important to choose one of the web safe font stacks.
What is CSS?
With all the sites that allow you to create your own website and hosting companies that have sprung up such as Wix where you just drag and drop you may not know HTML or CSS.
CSS stands for Cascading Style Sheets which allows you to control style elements such as color, font, or spacing in web documents. It basically tells the user’s computer what font, color, and spacing to show the viewer. If that user does not have the font the computer will either download it or use a similar font as long as the designer has chosen a font stack to use or a family of fonts. A family of fonts would be something like Lucida which also contains Lucida Sans and Lucida Grande.
While the TV commercials show successful business sites having used their build your own site I would not recommend it. If you truly want to put a professional look together for your business, hire a professional design company. Still, if you truly wish to build your own and know some HTML and CSS then there are certain fonts that you should use and we will tell you what those fonts are.
32 Web Safe Fonts
Here are the fonts that if used in your font stack will be safe and your webpage will appear correctly to anyone who visits it. They can also give you a professional look.
Sans Serif web reliable typefaces
These san serif fonts will be best for your webpage.
- Arial Black
- Trebuchet MS
Here are some others even though they may not show on some computers that do not have them installed.
- Century Gothic
- Lucida Sans
- Lucida Grande
Serif Web Safe Fonts
These are the best for serif
- Courier New
- Times New Roman
These will work but may not show on some computers.
- MS Serif
- New York
- Palatino Linotype
The best fonts of monospace
- Courier New
These will work but may be missing on some computers.
- Lucida Console
Smart Phones and Mobile Devices
These devices really have only a few fonts; unfortunately, there are no mutual typestyles for Android devices. Instead, you will need to use the @font-face tag to bring in the sources you want to use. For iPhone, iPod, and iPad devices, the most often used typestyles include:
- Courier New
- Times New Roman
- Trebuchet MS
Those are the most common web safe fonts that you can use and be sure that the majority of people will see your webpage displayed correctly on iPhones, iPads, and iPads devices.
Free vs Paid
With open source code programs like Open Office and LibreOffice, you may find quite a few quality free fonts to download from the internet. Many of these are pretty high quality and face it most of us like free stuff; besides, why not save a few bucks on a project?
Is free always good, right? Or is it? Can free really compare to paid fonts?
Free fonts compared to paid fonts what’s the difference? The answer is quality. Yes, some of the free fonts are a good quality. However when it comes to free you should still check the licensing to be sure you can use them.
So what are some of the fonts from free collections?
- Southern Aire by Måns Grebäck is free for personal use
- Devil East Free by fey design
- Casablanca Noir Personal Use Regular by Billy Argel
- Magnolia Script by Jovanny Lemonad
- Manila Sans – Bold uploaded by theprintinghub
- Typnic Titling by MyFonts
- League Gothic by The League of Moveable Type
- Grand Hotel by Astigmatic
- Ayres Serif by Mariel Gornati
What the top choice free fonts of 2016?
- Arctic Free Font
- Bemount Free Font
- Esphimere Free Font
- Jaden Free Fonts
- Barbaro Free Fonts
- Ansley Display Free Font
- Bariol Serif Free Font
- Bohemia SlabSerif Free Font
- Stellar Free Font
- Panama Free Font
- BSRU Bansomdej Free Font
- Firefly Free Font
- Mightype Script Free Font
- BERNIER Free Font
- Memory Free Font
What might one use these free fonts for? Maybe on a webpage for storytelling would be a good place to use these fonts. They could also be used for a personal journal, photo blog; pretty much anything you wish to publish to the internet.
What Fonts Do the Professionals Use?
When designers are building webpages for clients they go with paid fonts from several collections.
Maybe you’re wondering what fonts the professionals use? These fonts are most used by professionals.
3. Myriad Pro
4. Avenir Std
6. Optima Std
7. ITC Franklin Gothic Std
9. Bickham Script
13. Trade Gothic
14. Gill Sans
Those 21 are fonts you will most often see on websites that were designed by professional web designers.
Would professional web designers use free fonts? There may be some free fonts that a professional web designer might use depending on the client’s wants and needs. Here are a few that might be used by professional web designers.
- Yanone Kaffeesatz
- Liberation Family which contains Sans and Serif
- Advent Pro
What you would need fonts for?
What might you need fonts for? A few things you could use fonts on are resume writing, writing a journal or a blog or what about a photo journal to share family photos. You could also use them to write your family history and genealogy or maybe a website for your home business such as those for freelancers.
If you are a freelance writer you should consider some of these free fonts as tools you can use depending on what the client would like to present. You could also use them in your portfolio to show clients.
Where can you get fonts?
Where can you get fonts for your projects, webpages, and other uses? Here is a list of places in which you can get fonts. Some of these are paid and some are free, others will contain a combination of paid and free fonts for you to download.
Many of these site if not all will give instructions on how to download and install the fonts for your operating system whether it is windows or mac.
Just pay attention and follow instructions as given and you should have no problems installing the fonts you downloaded.
How much you pay for fonts will depend on the type of business you are in, what types of projects you are doing, and your budget.
Just remember that free isn’t always the best choice. You may need to trim your budget in other areas in order to pay for some fonts if you wish to have a well-rounded selection for clients to choose from.
If you feel a paid font would be a better choice for a client explain to them why to show them the difference in the paid and free fonts; be sure to explain that not all system may have the fonts installed and therefore may be unable to see the information they are presenting.
With all the do it yourself web building sites out there, you no longer need to have any knowledge of HTML or CSS but you should be aware of the type of fonts that are generally used in operating systems.
When you build a website you are giving information to visitors about your business or things you feel they need to know, or even about yourself.
If you build your own website and do not use a common font that most operating systems have installed then visitors to your site may not be able to view your documents or information you are trying to give them.
The fonts you choose are extremely important and should be chosen with care, especially now since so many are doing their own website builds.
You have to remember not every computer will have all the fonts installed which is why you should choose a family of font or fonts that have similar fonts that can be used in place of it.
We have given you plenty of fonts to choose from, some paid some free; it is up to you to decide which is better for your project or business – paid or free. It is all about what image you wish to present to people; professional or armature. If it is for a client; then it is also up to you to present them with the best choices of paid and free and explain the differences between them so they have all the information needed to make a wise choice. Do not forget to tell them what you as a professional would choose for your own personal project and why.