Change the font family for blog elements

The Clean theme uses one font across all elements – Lato from Google Web Fonts (see the section below for more information on Google Web Fonts).

To change the default font on your blog, simply add the font-family of your choice to the body code:

Note: When multiple fonts are listed, the page looks for them in order. For example, in this case, it would first look for Helvetica Neue. If it is present, it will use that, but if it is not not present then it will continue on and look for Helvetica. If Helvetica is not present, then it looks for Arial, and if Arial is not present then it uses the default sans-serif font on the computer. Also, font names that have multiple words (like “Helvetica Neue”) need to be enclosed in quotes when used in the CSS code. Font names that are a single word do not need quotes.

Some other standard fonts (also see here) that people usually have installed are:

Serif font-stacks

Garamond, Baskerville, "Baskerville Old Face", "Times New Roman", serif;

```
"Lucida Bright", Georgia, serif;
```

Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;

Sans-serif font-stacks

Optima, Segoe, Calibri, Arial, sans-serif;

Futura, "Trebuchet MS", Arial, sans-serif;

"Gill Sans", "Gill Sans MT", Calibri, sans-serif;

"Trebuchet MS", "Lucida Grande", "Lucida Sans", Tahoma, sans-serif;

Google Web Fonts

Using Google Web Fonts, the font is stored online so it does not rely on the viewer having the specific font installed on their computer. To import a Google Web Font for use on your blog, first head on over and choose a font.

When you have found one that you would like to use, click the Quick-use link next to the font. Then scroll to where it says Add this code to your website. Click on the @import tab and copy the code shown there.

Note: Depending on the font, there may be different font weights available in the pack. Select only the weights you will be using (no need to load extra things you are not using, as this will slow down the page loading time).

For this example, we are going to use the Noticia Text font. We will apply it to the entire blog so we selected the normal version (400) to use for the regular text and the bold version (700) to use for the title. The import code provided for this font looks like this:

Take the @import line and paste it in your Custom CSS at the top. This imports the font for use but does not actually apply on the blog until you add the font-family next.

Back on the font page at Google, scroll down to the next section and you’ll see Integrate the fonts into your CSS. There it will display the font-family: