Spicing Up Your Website's Look With Custom Fonts

In the past, using custom fonts on a website was typically frowned upon. It's important for a website to display consistently to as many users with as many types of web browsers and operating systems as possible, and since web fonts rely on the fonts that are installed on the visitor's computer it was important to use a fairly standard one like Arial, or Verdana.

One obvious solution to using a custom font was to convert the text into an image. All browsers display images the same for the most part, so you could create a custom graphic in a program like Photoshop, using a custom font, and everyone would be able to see it in the browser whether they had Comic Sans installed on their computer or not. However, as the SEO-savvy web denizens that we are, we know that this has a negative impact on how a search engine can index our small business's website. The search engine bots that crawl websites in order to rank them in search results love text and can't get much from an image.

So Now What?

The good news is it has been possible to implement custom web fonts that will render in all web browsers since the release of CSS 2.0. Using some CSS magic a web developer can load a custom font into the stylesheet itself, which causes the web page to render with the font that's located on the web server rather than on the visitor's own computer, so that even if they don't have Comic Sans installed they'll see the website as you intend for them to.

Additionally, I recently came across a really cool (and very free) tool that Google offers called Google Font Directory which includes their Font Previewer. The Font Previewer lets you select from a list of Google fonts, customize that font by adding styles to it with dropdown boxes and sliders, and finally when you're happy with the way the font looks they'll even automatically generate the CSS you need to import into your website in order to use that font.

Smart Developers Make Happy Visitors

With all of that said it's still important to make sure that whomever is developing the website that will be representing your small business understands the importance of maintaining a consistent look across all web browsers. Even though it's now possible to use these custom fonts to make websites more attractive, it's still a good idea to setup a backup font that is more common. For instance, Comic Sans might be your first choice, but also choose a more standard webfont like Arial as a backup, just in case. A developer can setup the stylesheet so that your "safety" font will be used in the event that an error occurs with the custom font, ensuring that your site will still be readable no matter what.