Support » Themes and Templates » customizing menu fonts

  • I am trying to change the font of a new drop down menu on my blog (www.thehairychef.com – using twenty ten theme), but am not confident with coding.

    The font I have used for the page title is Rock Salt, and I tried adding something along the lines of

    #site-title,
    #access .menu,
    #access div.menu ul,
    h1#page-title{
    	Font-family: Rock Salt, serif;
    	font-color: #6a6bff;
    }
    
    #menu-heading,ol, ul {
    	font-size: 16px;
    	font-family: Rock Salt, serif;
    	font-weight: bold;
    	font-color: #6a6bff;
    }

    in the style.css file…no luck as of yet.

    I also tried to change my blockquotes to the same font with the following change:

    blockquote {
    	font-style: italic;
    	font-family: Rock Salt;
    	font-size: 20px;
    	padding: 0 3em;
    }
    blockquote cite,
    blockquote em,
    blockquote i {
    	font-style: normal;

    but again, nothing changed.

    Can anyone advise one where I am going wrong…or perhaps….how to go right 🙂

    ta

Viewing 4 replies - 1 through 4 (of 4 total)
  • jampen26,

    When you use two word font names in css you need to wrap them in quotation marks.

    I had to use the !important declaration also to get it to work.

    #menu-heading,ol, ul {
    	font-size: 16px;
    	font-family: "Rock Salt", serif!important;
    	font-weight: bold;
    	font-color: #6a6bff;
    }

    thanks for your help.

    I tried making this change and it hasn’t had any effect on the font of the links within the drop down menu.

    Any other ideas?

    When I “inspect element” it shows the following

    menu-heading, ol, ul {
    font-size: 16px;
    font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
    font-weight: bold;

    Yet when I go to the saved style.css it shows the following:

    menu-heading,ol, ul {
    	font-size: 16px;
    	font-family: "Rock Salt", serif!important;
    	font-weight: bold;
    	font-color: #6a6bff;

    This confuses the hell out of me.

    HELP!?!?!?!?

    When I “inspect element” it shows the following

    menu-heading, ol, ul {
    font-size: 16px;
    font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
    font-weight: bold;

    Yet when I go to the saved style.css it shows the following:

    menu-heading,ol, ul {
    	font-size: 16px;
    	font-family: "Rock Salt", serif!important;
    	font-weight: bold;
    	font-color: #6a6bff;

    This confuses the hell out of me.

    HELP!?!?!?!?

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘customizing menu fonts’ is closed to new replies.