HTML custom @font-face not displaying correct font

Question

i've downloaded a custom font in ttf format, i want to override my bootstrap font for a header text.

I've added it in my CSS.

@font-face {
  font-family: 'BrauerNeue';
  src: url(brauerneue.ttf);
}

h1 {
    font-family: 'BrauerNeue';
}

Then added a h1 in my page:

<h1>Text</h1>

It still displays in the bootstrap font.

What am i doing wrong?

Answer 1

Check the URL. If all is correct, then:

h1 {
    font-family: "BrauerNeue" !important;
}