As we mentioned a few posts ago, font options used to be quite limited. The default way to render fonts online is to use the font library of the computer you’re browsing with. This is actually still true today (although this post will introduce other methods). Since Apple and PC computers come with different font options installed, you had to stick with a list of about 10 or so fonts that were considered web-safe fonts. These fonts were on every machine so it was safe to use them because you knew they would appear correctly on your site. Today, we have more options for fonts on your site so keep reading to find out more.

@font-face

@font-face has been around for a while now but has really gained popularity in the last couple of years. It’s our favorite option here at Snoack Studios for implementing fun fonts. This option, along the with all of the options we’ll present today, allows the text to still be actual text (instead of a flash file or an image) so users can highlight it and search engines can read it. These are 2 big steps forward for online text.

Instead of using the default method to render a font, you add the actual font file to your website ftp and call it in through your CSS file. You can use most any licensed OpenType or TrueType font that you have in your possession, which opens the door for tons of great-looking fonts on your site. We like searching DaFont for great free OpenType and TrueType fonts to use. We recommend using this method to create better headlines and stand-out text. Stick with web-safe fonts like Helvetica and Arial for body copy, to keep things simple and help your site load faster.

Keep in mind it doesn’t work with every browser unfortunately, older browsers only use the default font rendering method. So you must take this into account and allow your fonts to degrade gracefully in your CSS files.

Google Web Fonts

Google created an online font library that’s free to use with quite a few fonts to choose from. Using a very similar method to @font-face, you can call in a great-looking font. With Google web fonts, they store the font for you, so you don’t have to have the license for the font or worry about storing it. Currently they have 238 Open Source fonts to choose from, which is great, giving you a bunch of options to choose from. Google also allows you to download the font for your own usage so your company can use the font online and offline if you choose to make one of these fonts your official company font.

Typekit

Typekit also uses a similar method to embed fonts on your site, but boasts a much larger library to choose from. They do charge for the premium service, but they have several plans available so you can find something that best fits your needs. They store the font libraries for you and allow you to find that perfect font for your website, getting the ideal look you’re going for.

These are just a few of the options available today, there are even more out there to choose from. With all these options it’s easier than ever to have great looking typography that’s searchable, search-engine-friendly, and selectable. The look of a site depends heavily on the typography and font choices so spend some time looking into your options and choose something that fits your company and works well for you. Have fun with it too!