Enhancing Your Website With Fonts

Fonts are a great way to enhance the look of your website. But, unless you’re a graphic designer, you may find yourself feeling overwhelmed by the number of fonts to choose from. And unless you’re a programmer you may not know which fonts you can and cannot use for your site. Here are some answers to frequently asked questions about using fonts for web.

Change Font on Your  Blog

Change Font on Your  Blog
Poster by Silver Samba Design at Etsy

Why are there only a few “web-safe” fonts to choose from?

When your web browser (Internet Explorer, Firefox, etc.) opens up a website it uses the fonts already stored on your computer. Since there are only a few fonts that are guaranteed to be on all the computers in the world, those are the ones that are considered web-safe. Another way to ensure readability is to give browser a couple of options, or a “font family”. This way if the viewer’s computer doesn’t have the font you’d like them to see, your site can give them an option that will look similar.

What are the most common web-safe fonts or font families?

Check out this site. It not only lists the names but it shows what they look like.

most common web-safe fonts

I want something different. Can I use a non-standard or more decorative font?

Yes. There are 2 main ways you can use a non-standard or decorative font on your site.

1. Using fonts as graphics

Many sites that have decorative fonts on their navigation menu or sidebar titles are actually using graphics. These are images created using design software, like Photoshop, and are saved as a jpg or png. The upside of this approach is that you can use whatever font you want and you don’t have to worry about weather or not it’s web-compatible. But there are several downsides.

  • Every time you need to change the text or add a new title you have to recreate the image and re-upload it to your site.
  • Sites who are using dynamic content (where the content is constantly changing, i.e.; blogs, ecommerce, search engines, social media) can only make use of the graphics on parts of the page that don’t change regularly — like headers and sidebar titles. They can’t use the graphics for blog titles because it would involve creating and uploading a new graphic for every new post.
  • Search engines cannot read text that is on a graphic; making anything written on your jpg or png completely invisible to them. Adding “alt” tags to your images helps, but is not as effective as text. So if you were trying to maximize your SEO you’d be doing yourself a great disservice.

2. Embedding fonts

An embedded font is downloaded from your hosting server by the browser when you website is loaded — similar to how website graphics and images are stored and retrieved.

  • The upside to embedding your font is that is can be used for any text on your site, whether or not it is generated dynamically. And the text can be edited just as you would edit any other site text. Best of all, search engines can read it.
  • The downside is that the font has to be in a special web format, it can’t just be any font you have on your computer. Luckily, there are hundreds of these types of fonts to choose from, as opposed to the handful of traditional web fonts. Also, in most cases it does involve a bit of programming knowledge.

Next week I’ll discuss how to go about embedding a special font on your website.

More Blog Tips:

Renee — Bold MomRenee Deming is the owner of the graphic design and web company Studio Bold, wife of an extremely supportive husband and mother of two amazing little men. She eats, sleeps and breathes design. She lives for logos and loves making websites and blogs go from good to great! She also blogs at boldmom.com where she features amazing parent entrepreneurs who manage to grow a business while raising a family.

5 Comments

Leave a Reply
  1. Thanks for sharing all of this. Renee is a phenomenal resource. I’m going to print out this post for future reference. Looking forward to the next post about embedding fonts.

Leave a Reply

Your email address will not be published. Required fields are marked *