If you have a second look at the website, you can see that we're using custom fonts, which means that we're not using web safe fonts. Web-safe fonts are the fonts pre-installed on every device. They appear on all operating systems. This collection of fonts is used by Windows, Mac, Google, Linux, Unix, and so on.

There may be a few more, but this is a list of the common web-safe fonts:

• Arial
• Helvetica
• Times New Roman
• Courier New
• Courier
• Verdana
• Georgia
• Comic Sans MS
• Trebuchet MS
• Arial Black
• Impact

Not super appealing; let's be honest.

But, with CSS3, we can now add our own custom fonts, by using @font-face. Let's see how we can add this:

@font-face

For this exercise, I have provided a zip file called fonts.zip to make it easier for you. You can unzip this file and move the folder fonts to our Web Project folder. Let's see what's in this folder:

It contains the font files needed and ready to use for the web.

There is also a CSS file that uses the @font-face property:

@font-face {
  font-family: 'built_titling';
  src: url('built_titling_rg-webfont.woff2') format('woff2'),
       url('built_titling_rg-webfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'built_titling';
  src: url('built_titling_el-webfont.woff2') format('woff2'),
       url('built_titling_el-webfont.woff') format('woff');
  font-weight: 200;
  font-style: normal;
}

So, let's link this CSS file to our HTML file. And in our index.html, let's add the following:

<link rel="stylesheet" href="fonts/font.css"> <!-- Font face CSS link -->
      
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">

Great, we have now linked our fonts to our HTML page. Let's now add our second font, which is a Google font.