Taking things a little further you’ll recall you can create font lists as follows:

body{
     font-family: Helvetica, "Helvetica Neue", arial, sans-serif;
}

For years in web design we were limited to the ‘web safe’ fonts the likes of Arial, Courier New, Times New Roman, Verdana. The ability to embed fonts was described in the CSS2 specification but only as browser support matured did it become widely used.

To embed fonts we use @font-face. This is placed inside your CSS as follows:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url("THE-ADDRESS-OF-THE-FONT-FILES");
}

Once embedded the font can be used by referencing the font-family declared ie:

h1 {
  font-family: 'Roboto';
}

There are a range of font foundries where fonts can be downloaded – some you will pay for some, and some are free. Google offer us ‘Google Fonts’ at https://www.google.com/fonts.

The great thing about ‘Google Fonts’ is that they will host the font files for you and provide the necessary code to embed the chosen font in your CSS files.

Others services include:

Leave a Comment