Using different fonts in CSS that are not available in browser

  • Post author:
  • Post Category:CSS
  • Post Comments:0 Comments

By going to https://fonts.google.com/ we are able to use many new fonts on our websites.

Method 1: Downloading from the internet

We are able to select fonts for our website. This site will provide code to download the font from and the font-family code for our css.

At the google website we can select the font we like:

and then we get the details we need to use that font in our website.

To use this code take a look at the below.

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>My website</title>
   <meta charset="UTF-8">
   <link href="https://fonts.googleapis.com/css?family=ZCOOL+KuaiLe" rel="stylesheet">
   <link rel="stylesheet" a href="browser-reset.css">
   <link rel="stylesheet" a href="style.css">
  </head>
  <body>
    <p>Nulla semper interdum enim, sed aliquet lacus facilisis commodo. Etiam et mollis sem. Praesent pellentesque ante eu turpis porta tincidunt. Ut tempor, libero non pretium sagittis, purus lacus placerat diam, faucibus dignissim tellus erat sit amet ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat lectus blandit risus gravida, et porttitor magna ultricies. In risus felis, viverra et ligula a, vehicula condimentum ipsum. Fusce dui tellus, facilisis in lacinia in, pharetra quis tortor. Donec imperdiet metus ut lorem interdum, ac posuere enim aliquam. Sed nulla risus, hendrerit vitae leo at, hendrerit sollicitudin nulla. Donec eu volutpat turpis. Curabitur at auctor magna. Vestibulum lacinia accumsan urna.</p>

  </body>
</html>

style.css

p {
  font-family: 'ZCOOL KuaiLe', cursive;
  line-height: 30px;
  font-size: 20;
}

We will now see that this new font is used in our paragraph text.

Method 2: Down font file so font is on our server

This is probably a more robust way of doing things as we are not dependent on a link to another site on the internet in order for our website to look correct.

Once again, click on the font you like.

This time select the file and download it.

Navigate to your downloads folder and then copy and paste this into the same folder that your website is in.

To get this font to work, we import it into the CSS as shown below, the working HTML is included as well.

style.css

@font-face {
  src: url(Lobster-Regular.ttf);
  font-family: lobsterFont;
}
p {
  font-family: lobsterFont;
  line-height: 30px;
  font-size: 20;
}

In the style.css above, we can see the use of @font-face which imports the font file (the ttf file). With font-family we can designate it with a new name.

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>My website</title>
   <meta charset="UTF-8">
   <link rel="stylesheet" a href="browser-reset.css">
   <link rel="stylesheet" a href="style.css">
  </head>
  <body>
    <p>Nulla semper interdum enim, sed aliquet lacus facilisis commodo. Etiam et mollis sem. Praesent pellentesque ante eu turpis porta tincidunt. Ut tempor, libero non pretium sagittis, purus lacus placerat diam, faucibus dignissim tellus erat sit amet ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat lectus blandit risus gravida, et porttitor magna ultricies. In risus felis, viverra et ligula a, vehicula condimentum ipsum. Fusce dui tellus, facilisis in lacinia in, pharetra quis tortor. Donec imperdiet metus ut lorem interdum, ac posuere enim aliquam. Sed nulla risus, hendrerit vitae leo at, hendrerit sollicitudin nulla. Donec eu volutpat turpis. Curabitur at auctor magna. Vestibulum lacinia accumsan urna.</p>
  </body>
</html>

How to use fonts with different weights

Sometimes font type faces are provided with differing weights.

On google fonts you will notice that some fonts offer different ‘weights’. For example:

Now if we go to embed, let’s take a look at the code.

As before we can now use this code in our HTML page and put the relevant font-family in our css as below.

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>My website</title>
   <meta charset="UTF-8">
   <link href="https://fonts.googleapis.com/css?family=Merriweather:300i,400,700" rel="stylesheet">
   <link rel="stylesheet" a href="browser-reset.css">
   <link rel="stylesheet" a href="style.css">
  </head>
  <body>
    <p>Nulla semper interdum enim, sed aliquet lacus facilisis commodo. Etiam et mollis sem. Praesent pellentesque ante eu turpis porta tincidunt. Ut tempor, libero non pretium sagittis, purus lacus placerat diam, faucibus dignissim tellus erat sit amet ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat lectus blandit risus gravida, et porttitor magna ultricies. In risus felis, viverra et ligula a, vehicula condimentum ipsum. Fusce dui tellus, facilisis in lacinia in, pharetra quis tortor. Donec imperdiet metus ut lorem interdum, ac posuere enim aliquam. Sed nulla risus, hendrerit vitae leo at, hendrerit sollicitudin nulla. Donec eu volutpat turpis. Curabitur at auctor magna. Vestibulum lacinia accumsan urna.</p>
  </body>
</html>

style.css

p {
  font-family: 'Merriweather', serif;
  line-height: 30px;
  font-size: 20;
}

So now our page is running the Merriweather font.

Because we downloaded different font-weights, we can now use them by simply adding a font-weight attribute to our css.

style.css

p {
  font-family: 'Merriweather', serif;
  line-height: 30px;
  font-size: 20;
  font-weight: 400;
}

We now see the Merriweather font with a weight of 400.

Leave a Reply