@font-face help it do not work

Question

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

Maybe this link can help you [https://stackoverflow.com/questions/47340584/downloaded-font-wont-display-properly/47345855#47345855](https://stackoverflow.com/questions/47340584/downloaded-font-wont-display-properly/47345855#47345855) — Sfili_81, Dec 14 '17 at 13:35

Elvin Mammadov · Accepted Answer · 2017-12-13T20:50:57.770

1

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!)

edited Dec 13 '17 at 20:50

answered Dec 13 '17 at 16:13

Elvin Mammadov

1,110
7
16

Oh sorry yes i see but that was not the problem – Enes Dec 13 '17 at 19:56
Ok. I found where's the problem ;) – Elvin Mammadov Dec 13 '17 at 20:51
If answer helps give up vote and check please like "this answer is useful" Thanks ;) @Enes – Elvin Mammadov Dec 15 '17 at 21:10

score 0 · Answer 2 · answered Dec 13 '17 at 16:08

0

Try to remove '/' before fonts

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

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

answered Dec 13 '17 at 16:08

Tard

36
5

I already DELETED the fonts folder so there is only the nameofthefont.otf – Enes Dec 13 '17 at 19:56

@font-face help it do not work

2 Answers2