Search code examples
htmlcssfontsfont-face

@font-face help it do not work

I created this test file

<h1> test <h1>

Then in CSS3, I did this

@font-face {
font-family: 'hello';
src:url('/fonts/HelloStockholm-Alt.otf')
font-style: normal;
font-weight: 100;
} 

h1 {
font-family: hello;
font-weight: 100;
}

And this is the font I downloaded

https://www.dafont.com/de/hello-stockholm.font

Hopefully some of you guys can help me

Solution

  • You forgot to write ; at the end of the code

    src:url('/fonts/HelloStockholm-Alt.otf');

    UPDATE

    Ok. I found right answer. I made your little project in my local and I downloaded font. It's not .otf file, it's .ttf file. You just change type .otf to .ttf

    Also if your html out of fonts folder then remove the / from font source. And maybe you renamed font file when I downloaded name was like that HelloStockholm-Regular

    src:url('fonts/HelloStockholm-Regular.ttf');

    Finally You forgot closed here h1 ;)

    <h1> test </h1>

    Hope it'll helps you. Good luck!)