Not able to use this custom font in css

Question

I am not able to add this custom font to my css using @font-face. I tried this code with other fonts it worked but I can't with this font.

@font-face{
    font-family:"Megatron";
    src:url{"fonts/Megatron.otf"};
}
h1{
    font-family: Megatron;
}

<h1>Enigma</h1>

here is the link to the font https://blogfonts.com/megatron.font

Answer 1

This font (and others, that you want use) must be in fonts folder in project folder. After try this code:

@font-face{
    font-family:"Megatron";
    src:url("/fonts/Megatron.otf") format("opentype");
}
h1{
    font-family: Megatron;
}

PS Your link to font isn't working :(

Answer 2

You should try to set your font format in @font-face.

@font-face {
    font-family:"Megatron";
    src:url{"fonts/Megatron.otf"} format("OpenType");
}

Moreover, check your font is well downloaded in your webpage : use network panel then check font

Answer 3

Here is the code of CSS. if you need any help please let me know. and also add the font folder to your path. Hope it will work.

@font-face {
font-family: 'Conv_Megatron';
src: url('fonts/Megatron.eot');
src: local('☺'), url('fonts/Megatron.woff') format('woff'), url('fonts/Megatron.ttf') format('truetype'), url('fonts/Megatron.svg') format('svg');
font-weight: normal;
font-style: normal;

}

.demo
{
    font-family:'Conv_Megatron',Sans-Serif;
    width:800px;
    margin:10px auto;
    text-align:left;
    border:1px solid #666;
    padding:10px;
}

<div class="demo" style="font-size:25px">
    The quick brown fox jumps over the lazy dog.
</div>