CSS Not Recognizing "Avenir Next" as my font family

Question

I am using CSS for my headers where all menus should be coming as "Avenir Next" font-family. But it is not recognizing it. It is showing as simple Arial.

My code is :

#main .Header .mainnav ul {
  float: left;
  list-style: none;
  margin: -17px 0 0;
  padding: 0;
  font-family: Avenir Next !important;
  font-size: 14px; 
}

1) try with enclosing quotes: `"Avenir Next"`; 2) Be sure your font is correctly loaded (check the `net` panel) — Fabrizio Calderan loves trees, May 20 '14 at 08:30
Still, it is not working. I just added a " " and reloaded my page. Still showing as Arial — Aakash Kumar, May 20 '14 at 08:33
A few things: does your system have a font with that name? If not, do you try to load it? If not, why? If yes, does it work (the loading)? — Yoshi, May 20 '14 at 08:34
Make sure you do the above and also ensure you don't have any local browser settings overriding any fonts (EG. ChromeEdit customisations) — Dan, May 20 '14 at 08:35
sorry, at this moment this question *"lacks of minimal information to diagnose the problem"* — Fabrizio Calderan loves trees, May 20 '14 at 08:37
No, My computer doesn't have. I am making it for client. it is not necessary, users who will access my site, should have Avenir Next font. Then what is solution, other than i must have Avenir next on my local. — Aakash Kumar, May 20 '14 at 08:37
@user3095179 If you feel an answer solved the problem, please mark it as 'accepted' by clicking the green check mark. This helps keep the focus on older SO which still don't have answers. — Vedant Terkar, May 21 '14 at 06:31

Vedant Terkar · Answer 1 · 2014-05-20T08:45:06.400

19

Try:

#main .Header .mainnav ul {
    float: left;
    list-style: none;
    margin: -17px 0 0;
    padding: 0;
    font-family: "Avenir Next" !important;
    font-size: 14px; 
}

It is because of " " Space in font name.

By Looking at your last comment, I'll suggest you to host a font-file in either a .ttf, .ote or .otf format and link that file in your page.

and use this code:

@font-face {
  font-family: 'Avenir Next';
  src: url("http://www.yoursite.com/fonts/Avenir_Next.otf"); /* File to be stored at your site */
  }

That will help you even if your font is not installed at your clients computer.

Hope it'll help you. cheers :)!

edited May 20 '14 at 08:45

answered May 20 '14 at 08:29

Vedant Terkar

4,043
5
31
57

Still it is not recognizing.. :( – Aakash Kumar May 20 '14 at 08:32
2

Does Your Computer have That font installed? – Vedant Terkar May 20 '14 at 08:33
2

I don't understand why this answer was downvoted. It's a legitimate solution! +1 – Terry May 20 '14 at 08:33
1

I think it's rather a suggestion, since for what we know from the question this could be just one of several possible solutions – Fabrizio Calderan loves trees May 20 '14 at 08:35
No, My computer don't have. I am making it for client. it is not necessary, users who will access my site, should have Avenir Next font. Then what is solution, other than i must have Avenir next on my local. – Aakash Kumar May 20 '14 at 08:37
@user3095179 Edited My Answer. Hope it'll be helpful now. – Vedant Terkar May 20 '14 at 08:46
Thank you very much.. It worked in this way. :) – Aakash Kumar May 20 '14 at 10:06
@user3095179 I'm glad that i could help you. – Vedant Terkar May 20 '14 at 11:07

CSS Not Recognizing "Avenir Next" as my font family

1 Answers1

Linked