Insert a custom font in CSS

Question

I'm new to CSS. I want to use the Helvetica Neue font in my little project. I have downloaded the .ttf file and I tried to insert it through the @font-face rule:

@font-face{
    font-family:"Helvetica Neue Light";
    src:url("contenuti/HelveticaNeue-Light.ttf"); /*That's where I put it*/
}

To apply it I used:

.xyz{
    font-family:"Helvetica Neue Light";
    /*...other things...*/
}

The problem is that neither Safari or Chrome display it

What could I do?

Was your browser able to retrieve the ttf file? Check your browser developer console for that. — Christiaan Westerbeek, Jun 01 '15 at 09:45
inspect element(press f12) and check that you are getting font in xyz class or not? — Leo the lion, Jun 01 '15 at 09:46
I faced same problem as of you and but I didn't get any resolution around it. But in my case, font was working fine in IE 11.x and firefox 38.x. — Varun Jain, Jun 01 '15 at 09:47
What happens if you put `format('truetype')` behind the '.ttf' file (before the `;`)? — putvande, Jun 01 '15 at 09:47
@nova99, check out this SO thread on [Helvetica Neue](http://stackoverflow.com/questions/8118741/css-font-helvetica-neue) — bbh, Jun 01 '15 at 09:48
@NOVA99: Check out my updated answer below. Make sure your URL is correct. If your website is http://website.com/ the file should be located at http://website.com/contenuti/HelveticaNeue-Light.ttf - Try out my code and/or fill out the full path to the ttf file. — MortenMoulder, Jun 01 '15 at 09:55
The consoles didn't report any error and forma('truetype') doesn't work — NOVA99, Jun 01 '15 at 09:55
Did you try the full path to the ttf file? And did you make sure the file exist? Go to the ttf file link. If it works, then put the full path in instead of the shortened one. — MortenMoulder, Jun 01 '15 at 09:58
@NOVA99 Great! Please mark my question as the correct answer then. If possible, please upvote it as well. Seeing it's right, it shouldn't have negative downvotes. — MortenMoulder, Jun 01 '15 at 11:30

score -1 · Answer 1 · answered Jun 01 '15 at 09:47

-1

Try using a dash between Neue and Light. like this: font-family:"Helvetica Neue-Light";

answered Jun 01 '15 at 09:47

Fons Winters

64
5

That's just the name. It won't matter. – MortenMoulder Jun 01 '15 at 09:47

score -1 · Answer 2 · answered Jun 01 '15 at 09:47

-1

I'm guessing that the font you added's family name isn't actually Helvetica Neue light, but just Helvetica Neue with light weight.

Change font-family to "Helvetica Neue" in both the font and class and add font-weight: light;

answered Jun 01 '15 at 09:47

Luke

4,908
1
37
59

score -1 · Answer 3 · answered Jun 01 '15 at 09:48

It's most likely because your file doesn't exist. Try to write the full URL to the file instead. Your code should work, as it has no errors.

Try this:

@font-face{
    font-family: 'Helvetica Neue Light';
    src: url(contenuti/HelveticaNeue-Light.ttf) format('truetype'); /*That's where I put it*/
}

Then on your object:

.xyz {
    font-family: 'Helvetica Neue Light';
}

Insert a custom font in CSS

3 Answers3