Choosing A Website Font

It’s a frequent discussion when designing websites…

Why can’t I use a really cool looking font everywhere on my website?

The answer is simple…You can, IF you make everything an image, IF you use Google’s Font API, or you go with an all Flash website (not recommended for SEO).

Why is this? Again, simple, but not widely understood….Not every computer in the world has those cool fonts installed on it.

Scenario: So let’s say your using a really neat handwritten style font you have called “Kristi” because you want your website to look like a handwritten letter. On your machine it looks fabulous! However, you decide to check out your site on your son’s laptop, and then you see it….a substitution! His laptop doesn’t have “Kristi” installed on it, so it’s substituting that font with something it has…and boy is it UGLY! The whole idea of your site is completely moot because the font’s not right!

Solutions: There are three ways to “fix” this issue.

(1) Create Images. You can make every page full of textual images, increase your load time and lose all your Search Engine Optimization, or you can choose certain sections that you really want to stand out, and change those text areas into images. Keep in mind that images do not carry the same “weight” with the search engines as text (even with detailed alt tags), so you should make every effort to only use non-keywords (or keywords that you repeat frequently) in your textual images. (example for me would be: design, graphics, purchase, contact, about, email, etc.).

(2) Use the Google Font API. Google recently added a beta program to use fonts from a directory on their site, simply by adding a little code to yours. A list of Google’s web fonts can be found here: www.Google.com/webfonts. You add these fonts by adding a stylesheet link to < head > area of your website, then styling an element with that font in YOUR stylesheet (you can also use inline styling, if absolutely necessary).

So to add the “Kristi” font, you would add a stylesheet link to the < head > area of your site:

Then style an element in your stylesheet using that font:

Google adds this important note:

When specifying a web font in a CSS style, always list at least one fallback web-safe font in order to avoid unexpected behaviors. In particular, add a CSS generic font name like serif or sans-serif to the end of the list, so the browser can fall back to its default fonts if need be.

Full instructions for using a Google web font are provided in their Getting Started section.

(3) Use A Universal Font. Universal fonts are fonts that are commonly installed on all computers, no matter the brand or platform. Using these commonly installed fonts will mean that your site content will look the same no matter who is browsing, and what type of computer they are using (PC or Mac).

List of Universal Fonts:

• Arial
• Arial Black
• Book Antiqua/Palatino
• Comic Sans
• Courier New
• Georgia
• Impact
• Lucida Console
• Lucida Sans Unicode
• MS Sans Serif
• MS Serif
• Segoe
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana

Verdana and Segoe happen to be my personal favorites, because there is a very significant difference between bolded and normal…why bother to bold something if it’s not going to stand out? 🙂

Once you understand this very important aspect of web design, you’ll be able to make the decisions necessary to create your “killer” website!