How to change Menu font?

11 posts from 4 voices

• Started 1 year ago by bcopping
• Latest reply from bcopping
• This topic is closed
• This topic is resolved

Tags:

• font menu

1. 

   bcopping
   Member

   Like the title says, how do I change the Menu font as in the menu bar that says: "Home | Motorsport | Aviation | Contact | Advertise | Shortcodes | Home | Gears"

   I want to change it to: "Century Gothic Bold"

   And how might I change its colour?

   Also, I want to change the font for the rest of the site to: "Century Gothic Regular"

   Thanks so much!

   Posted 1 year ago #
2. 

   bcopping
   Member

   Any help please? My website is http://www.greaseandgears.com

   Posted 1 year ago #
3. 

   Mya
   

   Hi bcopping,

   To change the menu's font, you'll need to add this to your custom.css:

   .main_menu {
   font-family: "Century Gothic", Arial, Helvetica, sans-serif;
   font-weight: bold;
   }

   To change the menu's color:

   .main_menu a { /* this is the normal state */
       color: #777777;
   }
   
   .main_menu a:hover,
   .main_menu .current-menu-item a { /* this is the hover/current state */
       color: #777777;
   }

   You'll need to change the #777777 to whatever color you want to use.

   To change the body color:

   body { font-family: "Century Gothic", arial, helvetica, sans-serif; }

   Regards,
   Mya

   Posted 1 year ago #
4. 

   bcopping
   Member

   Testing now! I'll report back!

   Thanks so much.

   Posted 1 year ago #
5. 

   Mya
   

   Hi!

   You're welcome. Let us know.

   Regards,
   Mya

   Posted 1 year ago #
6. 

   bcopping
   Member

   So I updated the code which almost worked perfectly EXCEPT for changing the Body text. It changed the right hand side "Recent Posts" to Century Gothic but none of the other categories updated to Century Gothic.

   Does that make sense?

   Posted 1 year ago #
7. 

   Mya
   

   Hi bcopping,

   Sorry about that. Let's see if we can switch the other parts.

   body, .post_excerpt p, .entry-content, .blog-meta, .tweet-text.avatar_no, .widget_rss li div, .recentcomments a,
   .read-more-icon strong, #top .pagination .pagination-meta,
   #comments span, .minitext, .form-allowed-tags, #reply-title small, #commentform label,
   .author_name, .commentmetadata, .message_data textarea, #comment,
   .text_input, .button, #commentform input, .text_area, .wp-caption-text, cite,
   .text_input, textarea, select, .textwidget {
        font-family: "Century Gothic", arial, helvetica, sans-serif;
   }
   
   h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, #top .widgettitle, #top .widgettitle a, .miniheading, .related_single_heading, #top .post-title {
        font-family: "Century Gothic", arial, helvetica, sans-serif;
   }

   Regards,
   Mya

   Posted 1 year ago #
8. 

   bcopping
   Member

   Amazing! I think it's all working for now. I'll report back.

   Posted 1 year ago #
9. 

   rumblefish
   Member

   You might want to check this:

   http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

   If your chosen font isn't a system default and you are not using a type integration system like cufon, google fonts or typekit, no one else will see the font the same way as you do.

   Posted 1 year ago #
10. 

    Dude
    Dude

    Hey!

    bcopping - I hope it worked out?

    Best regards,
    Peter

    Posted 1 year ago #
11. 

    bcopping
    Member

    Sorry for the late reply but yes, that issue is fixed! I now have another one I'm about to post though!

    Posted 1 year ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.