3 Important Things You Must Know About Web Safe Fonts

Web Safe Fonts

What Are Web Safe Fonts?

Web typography refers to fonts used for the online world. Web safe fonts specifically are fonts used in the online world which are common and available in most computer systems. If the fonts are available, it means that when users view your online content, your content will show as per how you’ve designed it and not any other way instead.

For the creative ones, here’s the problem, the list of fonts under web safe fonts is relatively small compared to the full list of available fonts in the entire world. Hence, sometimes, when you need to use some special fonts for your website or blog or any other online project, the list of available web safe fonts might not be good enough for you. One way to go around it is to design it in a JPEG instead, a no-brainer-fool-proof way of doing it and your beautiful fonts will definitely be seen just the way you want it. But by doing so, your content is not crawled by Google spiders and that’s bad news for you.

There are also those who always install new fonts on their computers and sometimes, they forget that their contents and fonts are only showing up correctly in their own browser and not on other people’s browsers because other people might not have the same fonts installed. When this happens, the computers automatically load a similar font type to display your fonts so that other people can read it. This is when all the hardwork of choosing the right font suddenly becomes wasted and your contents are published either in the wrong font, with misalignment or layout issues, or worst, read as gibberish fonts.

Therefore, when working on your online projects, make sure you use web safe fonts to ensure that your contents show exactly as how you intended them to be when other people are reading your contents.

Why Do I Need Web Safe Fonts?

Web Safe Font

Why do I need web safe fonts, can’t I just use any other common fonts like Arial and Times New Roman?

Web typography is an art by itself where different font type really gives you a very different feel. Hence, let’s take an example where you’re designing a new blog called “my hi-tech technology blog” and you’re deciding on what font to use in the header image. It’s obvious that when you’re talking about technology, you need a font type that can link with a hi-tech feel for your blog. Here are some basic options you can get this done and the pros and cons of each:

  1. Just use Times New Roman or Arial or Impact, or any other fonts that are already common.
    While this is generally OK, you’re not maximising the full potentials of web typography to make the best of it. Which is OK since I would assume more than 90% of the newbie bloggers out there are doing the exact same thing anyway, but if you can do it better, why not?
  2. Use Photoshop, design it as beautiful as you want and just plaster the whole header image at the top of your blog.
    While this is generally OK as well, you’re losing out on maximum SEO leverage for your blog. A typical blog platform like WordPress allows you to include your blog title and blog description ‘on top’ of your header image. By omitting these and use a header image instead, guess what Google spiders will find first when they crawl your site? You guess it, your Header JPEG instead of your keywords. Though there are ways to counter this as, well, if you can do it without even having to counter anything, why not?
  3. Use Google Web Fonts, or any other fonts that are safe for web.
    This is definitely OK. I use Google Web Fonts myself. In case you’re wondering, Google has a thing called the Google Web Fonts where they have a healthy list of creative fonts that are web safe and free for you to use. If you’re looking for a hi-tech font, perhaps you can try Metrophobic,  Expletus Sans, Wire One, Vollkorn. Browse it, find one that you like and use it.

How do I use Web Safe Fonts?

Google Web Fonts

This is the easiest part, select your favourite font in Google Web Fonts and type in the name of the font in your font script.

Go to your CSS file and look for the font script for whichever portion of your site or blog that needs to use the font and type in the name of the font you desire. For me, I use WordPress with a theme, and under theme options, I get to point and click my way to choosing the font I want for different portions of my blog.

I also get to choose the size and color of the font I want, all by just a few clicks of the mouse. If you need help on this area, check out your help section for whichever platform you’re using or get customer support. It’s a really simple process, I’m sure you’ll find a way to do it with ease.

BONUS TOPIC – Get a free link to your website or blog from Google!

From the Google Web Font page, look for the Tools and Documentations tab and select the drop down that says “Tell Us About Your Site“. Once you click it, you’ll get a form to tell Google about your site and provide a URL where you’ve used the Google Web Font. Here’s the most interesting question, just for the fun of it anyway – at the end of the form, they ask…

Are you happy for us to write or blog about it?

How nice of Google, duh!

As you can see, I added my blog to it, do you think it’ll ever be blogged by Google? Wishful thinking lol.

What fonts do you use for your website or blog? And while we’re at it, do you know of any unique web safe fonts for a hi-tech feel?

About Author

kuanyew Kuan Yew is a Social Geek. He works as a Digital Strategist and blogs about online marketing and social marketing stuff for digital warriors. Get free tips and tricks on online marketing and social marketing from him at SocialGeekStuff.com

Related Posts Plugin for WordPress, Blogger...
Suscribe Now!Subscribe to get free latest updates by email. Like Us!Like our Facebook Page.


LIKE It & Leave A Comments

Leave a Reply