How to use downloaded font in css

Question

Very entry-level here. I have a .ttf font file I'd like to use for my blog, but I am unsure of how/where I can get its coding (?). Is this about right?

* {
    font-family: 'providence-bold';
    src: url('/font/providence-bold.regular.ttf');
  }

feel free to skewer this, as I said I've little idea of what I'm doing.

EDIT: Here is a link to the font I'm trying to use. (If it helps) https://ufonts.com/download/providence-bold.html

Answer 1

@font-face {
  font-family: 'providence-bold';
  src: url('/font/providence-bold.regular.ttf');
}

This is the format I use. Just make sure you're path is correct.

Side note: I don't like using underscores (_) and dashes (-) in variables. It's recommended to get in the habit of writing variables as camelCase or PascalCase.

Answer 2

I would advice and is a better way to include fonts is by converting it into these formats.

You can get the code from here after you converting your fonts into the formats you wanted -> link

After you convert your fonts it will produce a rar file extract it you will find the font.css where you can find these codes.

@font-face {
font-family: 'providence-bold';
src: url('../fonts/providence-bold.eot');
src: url('../fonts/providence-bold.eot?#iefix') format('embedded-opentype'),
      url('../fonts/providence-bold.woff') format('woff'),
      url('../fonts/providence-bold.ttf') format('truetype'),
      url('../fonts/providence-bold.svg#providence-bold') format('svg');
      font-weight: normal;
      font-style: normal;
    }

Be sure to check your url to the fonts' location.