Customizing Your Website With Web Fonts

For many long internet years, we were limited to using just a handful of safe web fonts on a webpage (Times, Helvetica, Arial, Georgia, and Trebuchet) unless we resorted to using graphics in place of text. Fortunately in recent years, several web font services have emerged that give us almost endless variety to choose from. A web font service is usually a website that offers you a large library of fonts to choose from and instructions on how to add that font to your website. Some options are free while others require a paid subscription, but after comparing all the options, we feel the service with the best overall features is Google Web Fonts and below we outline why.

Why Google Web Fonts?

  1. Google Web Fonts is a completely FREE font library available to anyone and does not require registration.
  2. All the fonts are open source, meaning they can be used without the purchase of a license and the files themselves can be downloaded for free and used on your own computer.
  3. New fonts are being added daily, so the variety of fonts continues to increase.
  4. Google hosts all the necessary files on their fast-loading servers, so fonts are served to your webpage quicker than if the file was hosted by your own web host.
  5. Setup is incredibly easy and quick to implement, saving you time and money.

How to Use Google Web Fonts

  1. Go to the Google Web Fonts website https://www.google.com/webfontsand browse the library. You can start scrolling through the complete library, or in left sidebar narrow by search or filter by category. You can also change the preview text at top.

    google web fonts screenshot

  2. When you’ve found the font(s) you like, simply select them by clicking “Add to Collection” button for each font(s). It will add your selected font(s) to a blue collection popup window at bottom, similar to a shopping cart.
  3. To use just click on the Use button in the bottom blue window (upper right hand corner) and go through each step:
    Step 1: Check the font options you want (ie, light, bold, italic, etc) if you wish to have those as well. This step will also show you the Page Load time which is helpful.
    Step 2: Ignore unless is needed.
    Step 3: Grab the line of code needed to link to the font style on Google’s servers. Be sure to follow instructions on right side of where to place this code.
    Step 4: Integrate the font(s) into your CSS stylesheet by following the instructions on right side so that your website will implement this font for the style you assign it to.
  4. And lastly, click the text link “Download your Collection” at top right corner if you wish to use on your local computer for print or mockup purposes.
FYI – If you do not know how to access or implement code on your website, PLEASE contact us to do this for you. You could mess up your website if not done correctly.

The Other Web Font Options

If you wish to use a SPECIFIC font, (ie. the font used in your company logo) but you can’t find this font in the Google collection, you have a few other web font options below:

  • Embed your font using the CSS3 @font-face rule but this will only show on the latest browsers (Note: Internet Explorer 8 and earlier versions do not support the @font-face rule) and you MUST own the rights to use the font or it must be an open source font.
  • Use a paid service such as Fonts.com (~$10-100/mo) and Typekit (~$2-8/mo) which both have a limited free option. They have a similar setup as Google Web Fonts except they require you to register and pay for a subscription. The advantage of a paid service is that its font library is usually much larger, and it’s likely that your special font can be found there. The downside is that you will be tied to a subscription for as long as you wish to use the font on your website, so it’s wise to consider whether the specific font is “worth it”.
  • If your font cannot be found in any library, a last resort would be to use a free service called Cufon which embeds a font into your webpage but again you MUST own the rights to use the font or it must be an open source font. This is a last resort because there are several downsides to using this option which include text not being selectable (meaning you can’t copy and paste), odd letter spacing/kerning issues, a lengthier setup process, and longer webpage load times.

All Fonts in Moderation

Like most web features, you don’t want to go overboard with font selection. Using too many fonts can lengthen webpage load times not to mention be visually overwhelming. We recommend using no more that two unique fonts (for your Headings and regular text) with a couple of font options for each (ie, light, bold, italic, etc).

Now that you know your web fonts basics, tell us if you’re interested in using one on your website. Or, start browsing the Google Web Fonts library and show us your favorite font!

back to top