3

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; 
}
Fabrizio Calderan
  • 120,726
  • 26
  • 164
  • 177
Aakash Kumar
  • 893
  • 4
  • 15
  • 38
  • 1
    1) try with enclosing quotes: `"Avenir Next"`; 2) Be sure your font is correctly loaded (check the `net` panel) – Fabrizio Calderan 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
  • Is your font loaded properly? – Terry May 20 '14 at 08:34
  • Please show how you imported the font in the CSS – Fabrizio Calderan May 20 '14 at 08:34
  • 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 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

1 Answers1

20

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

Vedant Terkar
  • 4,553
  • 8
  • 36
  • 62