Using web fonts to personalize your site design

Traditionally, website font choice has been limited by a technical constraint: fonts reside on a site visitor’s computer, but the website is stored elsewhere. Using web fonts (font files that are accessible online, from any web browser) means being free to use the fonts you want, rather than the fonts you have to.

The focus of this tutorial is on Google’s free Web Fonts service, but you can apply the same principals to add any other web font service.

Finding web fonts

There are a growing number of sites offering web-compatible fonts, so you’re spoiled for choice. If you don’t want to invest in the purchase of a particular font license, then you’ll need to limit your selection to those sites and fonts offered for free.

Here’s a brief selection of sites offering free and for-pay web fonts:

Adding Google web fonts

Google Web Fonts is a collection of free-for-use fonts. To get started using a Google Web Font, first select the font or fonts you’d like to use for your site from the Google Web Fonts site.

As you browse the fonts, add each one that interests you to your “Collection” by clicking the Add to Collection button.

Choosing and comparing fonts

Once you’ve assembled a fonts shortlist, you can then compare them and choose the font(s) that are right for your website, by clicking the Review button at the bottom of the page.

Use the different tabs at the top of the screen to review different features of each font.

The Test Drive tab is particularly useful for seeing exactly how different fonts will look when applied to different parts of the site, like headings, sub-headings and page text.

Adding the fonts to your website

With your choice of fonts now ready, all that’s left to do is to add the link for each font to your website, then apply it to your site CSS.

Begin by clicking the Use button: at the top of the page, you’ll see a review section of the fonts you’ve added to your collection. To use them all, leave the boxes checked, or uncheck the boxes next to each font you’d prefer to discard.

The Page Load indicator will give you an idea of the addition page loading time penalty each one will impose on site visitors: it’s a good idea not to overload your page unnecessarily, so keep the number of fonts down to the strict minimum.

Locate and copy the font link code

Scroll further down the page to choose whether to load only the basic character set for each font, or whether you need to load the extended character set: for standard Latin alphabets like English, Spanish or French, you won’t need to add the extended versions.

If your site text contains any cyrillic or other non-Latin characters, ensure you check the extended character set, after first verifying that the font you've chosen contains the characters you'll need from the Review page.

Just below is the code to add to your website: you can choose to add a “link” tag, an @import tag or use a JavaScript font loader.

If you’re just getting started with web fonts, choose the Standard or “link” code: it will contain a link each of the fonts you’ve selected in a single line of code, and is the easiest to use when starting out.

Copy the code, then head to your site manager.

Apply the font to your website design

Now that you’ve added the reference to the font, you can apply it to your site CSS.

You’ll need to override the CSS applied via Settings > Design > Personalize menu, either by adding styles to the "Additional CSS" section at the bottom of the Personalize design page, or by editing the site CSS (if you’re using the Advanced/CSS design mode).

In the example below, we’ve applied one of the styles to the titles of pages on our website (h1) and another to the page text (p for paragraphs).

To apply a font to a selection of elements, like the title of your website, or menu links, simply add an appropriate style for each one.