The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Bulletproofing a menu

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #34712

    I’m having a problem with bulletproofing a menu. Here’s the problem, the site uses a custom font from

    	font-family:'HelveticaNeueW01-55Roma', Helvetica, Arial, sans-serif;

    Now, if HelveticaNeue fails to load and it falls back to Helvetica which is a much wider font the menu falls apart.
    This is my markup:

    This is my CSS:

    float: right;
    margin: 51px 0 0 0;
    max-width: 700px;
    #main-menu li{
    float: left;
    #main-menu li a{
    display: block;
    padding: 0 0 5px 0;
    margin: 0 25px;
    font-family:'HelveticaNeueW01-77BdCn 692722', Helvetica, Arial, sans-serif;
    font-size: 2em;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: 0 1px 0 #946439;

    First list item should align to begining of #main-menu, and the last list item should align to the end of #main-menu. How do I get it to work the same when I have Helvetica or Helvetica Neue as my font?

    Thanks for any help.


    I’ll have to check about the legalities of hosting the font myself…
    So you would suggest against using services like or
    What if self-hosted font is not an option?



    I’m pretty sure you can’t use Helvetica Neue with @font-face. Typekit I believe is an alternative option.


    I previously went through this as I was designing my menu. In the license it states I cannot use @font-face in which I had to rely on a simple image sprite.

    Edit: You can use Helvetica with (owned by Monotype which owns Helvetica)

    Neue Helvetica


    I am using Helvetica Neue from I need a backup plan if loading the font from webfonts fails, since my fallback font (Helvetica) is much wider than Helvetica Neue Condensed.

    See: Your text to link…

    It needs to be 100% bulletproof so if for any reason webfont loading fails the menu musn’t fall apart.

    Any ideas?


    @Paulie_D What about..?

    font: normal 22px "Helvetica", Arial, sans-serif;

    Obviously Arial isn’t the right choice but if Helvetica fails, Arial will take its place.


    I don’t think you’re wrong but merely a personal way of doing it. I do the exact opposite.

    Also, you edited your post therefore my comment doesn’t fit what you previously said.


    I’ll just say this: If you know typography, choosing the right fallback should never break your layout. Also, would you stay on a site that is poorly designed? I think it matters what every aspect of the site looks like.


    Agree. Helvetica was not the right fallback choice in a typeface that has a weight of black and is condensed.

    I have actually never looked into the probability of the fonts failing to load. I think I’ll put that on my list.


    You guys have a point, there is almost no chance of the font failing to load…
    Could you recommend another web-safe fallback font insted of Helvetica, Arial?

Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘CSS’ is closed to new topics and replies.