Catford Coding Club Course Resource

HTML & CSS Week 5 - Frivolous Fonts

We've changed the look of the letters on our pages (the fonts) in several ways; the size, the colour and the shape of the letters. But what shape of letters can we use? Well, any that are on the computer. But which computer? While you're making the web page, it's the computer you're using, but when you put it on the World Wide Web, it's the computer that's hosting your site. And who knows what fonts are on that? This is a problem. So what's the fix?

Web fonts

The fix is to add any fonts that you want to use to your site. And one way to do this is using web fonts, which allows you to download them from another website whenever you need them. And fortunately, Google has a huge collection of free fonts that allow you to do just that. To get started, open:

https://fonts.google.com

Browse around, choose a font that you like and we'll get started.

How to use a Google font

I'm going to go with Lobster. Click the font to open its page. Next, click the Get Font button on the right-hand side. Then click Get Embed Code.

Get it into your head

You'll now see a box that says: Embed code in the <head> of your html Click the 'copy code' link, to copy it to your clipboard. Then, somewhere in the head of your document, paste that code. It will look something like this:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">

Now your font will be downloaded from the Google Fonts website when your page loads, ready to be used whenever you need it. But how do you use it? there are a couple of different ways.

First, just like in any of your earlier code, you can change the style of any element by adding it inside your style tags. All you need to know is the name of your font, and you can see this in the box labelled CSS Class on Google's page, in the font-family declaration. You can also see they put another 'generic' font in afterwrds, called a 'fallback', which the browser can use in case for some reason it can't download the one you want.

h3 {
    font-family: Lobster, sans-serif

}

This heading uses the Lobster font!

The other way is to create a 'class' for your font, which you also goes within your style tags, using the code provided by Google. Mine looks like this:

.lobster-regular {
  font-family: "Lobster", sans-serif;
  font-weight: 400;
  font-style: normal;
}

I can now make anything appear in my new font by giving it this class

Here's a whole div that has content written in Lobster! I've also given this div a border, so that you can see where the div begins and where it ends.

This text, on the other hand, is outside of the div.

Masses of classes

Making a class like this can work because an element can have lots of different classes. You can use multiple classes by putting a space in between them. This makes it easy to add your font class to any element, even if it has other classes going on too:


.lobster-regular {
  font-family: 'Lobster', sans-serif;
  font-weight: 400;
  font-style: normal;
}
.greenbox {
    background-color:#448844;
    border-radius:30px;
    padding:10px;
    text-align:center;
    color:white;
    font-size:34px;
}
<div class='greenbox lobster-regular'>
    Greetings, and welcome to the Baked Bean Bar!
</div>

Greetings, and welcome to the Baked Bean Bar!

Oodles of Google's (fonts)

Now pick some more fonts. You can do them one at a time, and add them manually, or you can add them to 'shopping bag' on Google fonts and it will generate code to download them all in one go. Try applying them to different elements, and see what effects you can create.

CourseResource