Applying custom font in css is not working?

Question

I am trying to use a custom font for the headings on my site but I cannot get it to work. It is just displaying as default Times New Roman or something no matter what I try. Does anyone have any advice about what I can do to get this font to show?

<style>

@font-face {
font-family:"volcano";
src: url("/wp-content/themes/wp-bootstrap-4/assets/fonts/Volcano-King.ttf") format ("truetype"),
     url("/wp-content/themes/wp-bootstrap-4/assets/fonts/Volcano-King.woff") format ("woff");
}

h1 {
font-family: "volcano";
}

</style>

Answer 1

Looks like there's a missing :

Try this

<style>

@font-face {
font-family:"volcano";
src: url("/wp-content/themes/wp-bootstrap-4/assets/fonts/Volcano-King.ttf" format ("truetype"),
     url("/wp-content/themes/wp-bootstrap-4/assets/fonts/Volcano-King.woff" format ("woff");
}

h1 {
font-family: "volcano";
}

</style>

Answer 2

h1 {
font-family: "volcano";
}

add a colon between property-name and property-value