Adding Custom Fonts in CSS

If you want to add a font in your website that does not come with the browser or the users normally dont have installed.

You can do it like this.

First get the font that you want to apply. For this example I am using DaFont

Click the Download button on the font that you would like to use and it will download a zip file. Extract that file into your project folder. It will be a .ttf, .otf or .woff file.

Now lets look at how we can use it. I am going to use internal styles for this. but you might want to put this in a separate file.

...
<head>
  ...
  <style>
    @font-face {
      font-family: mycustomfont;
      src: url(reality.ttf);
    }
    .cool-text {
      font-family: mycustomfont;
    }
  </style>
</head>
...

You can give any value in font-family property of the @font-face block, and then you can use that value whereever you want to change the font-family property.

And in the body doing the following will render the elements with that font.

...
<body>
  <h1 class="cool-text"> This heading looks cool </h1>
  <p class="cool-text">This paragraph also looks cool.</p>
</body>
...

And that’s it.

One thought on “Adding Custom Fonts in CSS”

Leave a Reply

Your email address will not be published. Required fields are marked *