CSS

How To Set Font Family

We’ve talked a lot about what you can with CSS to change how your font looks: how to make it bigger, how to make it bolder and how to move it around your page. But we haven’t yet talked about how to set which font you want to use.

The type of font you choose will decide how each letter looks and the styles vary a lot.

To set the font, use the font-family property in CSS. Just like this:

        font-family: 
      

The font-family is then defined in two parts: firstly, a specific font you want and then a generic font which is used as a back-up.

What do you mean by a back-up?

Not all browsers support all font-families so by setting the second value, you know that in the worst case your font will look similar to what you had intended.

It’s like when the shops run out of your favourite food so I have to get a different one: it’s not exactly what you wanted but it’s close enough.

Easy for you to say. You don’t have to eat it.

You can actually list several fonts if you want, but make sure the generic font family is listed last so it is only used as a back-up.

There are a lot of examples, so let’s start having a look at some:

Sans Serif

        font-family: Helvetica, sans-serif;
        font-family: Arial Narrow, sans-serif;
        font-family: Tahoma, sans-serif;
        font-family: Gill Sans, sans-serif;
        font-family: Lucida, sans-serif;
      

Who shot the serif?

Who shot the serif?

Who shot the serif?

Who shot the serif?

Who shot the serif?

Use the boxes below to try out a few words with each font. See what the value ‘sans-serif’ looks like on its own to see the back-up option.

        font-family:
      

I shot the serif.

Serif

As well as sans-serif, there is also serif fonts. These have a little extra flourish and so tend to look a bit older or a bit more traditional.

        font-family: Times, serif;
        font-family: Palatino, serif;
        font-family: Baskerville, serif;
        font-family: Georgia, serif;
      

There’s a snake in my boots!

There’s a snake in my boots!

There’s a snake in my boots!

There’s a snake in my boots!

Use the boxes below to try out a few words with each font. See what the value ‘serif’ looks like on its own to see the back-up option.

        font-family:
      

There’s a snake in my boots!

Monospace

Unlike most fonts, letters written in monospace each take up the same width.

Normally, thin letters like i take up less space than chunkier letters like o or p; with monospace fonts all letters take up the same space.

        font-family: Andale Mono, monospace;
        font-family: Courier New, monospace;
        font-family: PT Mono, monospace;
        font-family: Monaco, monospace;
      

The final frontier.

The final frontier.

The final frontier.

The final frontier.

Try out your own monospace text below. Don’t forget to see what ‘monospace’ looks like on its own.

        font-family:
      

In monospace no one can hear you scream.

Cursive

Cursive fonts look more like handwriting than other font families. Letters tend to flow together making them look like writing in an old letter.

Note that cursive fonts don’t tend to show up well on mobile devices.

        font-family: Comic Sans MS, cursive;
        font-family: Bradley Hand, cursive;
        font-family: Brush Script MT, cursive;
        font-family: Apple Chancery, cursive;
      

To Dearest Owner

To Dearest Owner

To Dearest Owner

To Dearest Owner

Where do these names come from?

Some of them are pretty odd.

Bradley Hand sounds like an accountant.

These fonts are all very artistic and look good on websites showing off photography, jewellery and clothes.

Try writing your own sentences with cursive fonts using the boxes below.

        font-family:
      

Bradley Hand Accountancy

Fantasy

Now we are into the really wild fonts. There is a series of Fantasy fonts.

These fonts don't look like fonts you would expect to see on a computer. Some fantasy fonts look like they belong on posters for old Western movies and others look like they should be used to write spells.

        font-family: Luminari, fantasy;
        font-family: "Boots & Spurs", fantasy;
        font-family: Chalkduster, fantasy;
        font-family: Trattatello, fantasy;
        font-family: Papyrus, fantasy;
      

Billy the Kitten

Billy the Kitten

Billy the Kitten

Billy the Kitten

Billy the Kitten

Try out these fonts using the box below. They are pretty fun.

        font-family:
      

YOU SHALL NOT NAP!

Tips

Earlier we talked about using one or two font families and then a generic font as a back-up. If you want, you can add as many fonts as you like, as long as each one is separated by a comma. The browser will start at the first and continue through the list until it finds a font it can use.

Just like when I cycle through the shelves looking for cat food when Aria’s favourite is sold out!

Also, it's very likely that you will want to use one font family throughout your website to maintain a consistent look on every page.

Does that mean I have to give every text element the same class?

That is one way of doing it; but there is a simpler way.

Just like you reference classes or an id in CSS, you can instead reference a HTML tag. When you do this, your CSS is applied to every single one of those elements!

So with just a few lines of CSS, you can set all your text made with the p tag to use the same font family.

Sounds amazing! But how do you do it?

Instead of a # to refer to an id or a . to refer to a class, you simply write the HTML tag.

Like this:

        p {
          font-family: Tahoma, sans-serif;
        }
      

With this code every paragraph element will use the same Tahoma font.

Cool. So to cover all the h tags, I just need a few CSS statements and all my text is covered!

Or...

What? You can do it with less?

Oh yes my furry friend.

You can write CSS which applies to several types of HTML elements simply by listing their HTML tags separated by commas.

So with just one CSS statement you can set the font for your WHOLE website!

Here's an example.

        h1, h2, h3, h4, h5, h6, p {
          font-family: Tahoma, sans-serif;
        }
      

Or you can apply CSS to your HTML body.

Remember, the body tag is an essential tag and that all your HTML sits inside it.

        body {
          font-family: Tahoma, sans-serif;
        }
      

Your CSS will apply to every HTML element inside your HTML body. And as every HTML element is in the body, it will apply to everything!

Pretty good eh?

To be fair, you have BLOWN MY MIND!

Mind Blown!