Wordpress- How do i change the default font of navigation menu?


Tags: jquery,html,css,wordpress,fonts

Problem :

i am trying to change the default font of the site. i have edited the css file and changed the font. everything works fine. except the nav menu font. its not changing. it is set to default ""Trebuchet MS", Arial, Helvetica, sans-serif" font.

.sf-menu > li > a {
font: bold 21px/66px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #333333;
}

I can change the font here.. but the problem i am facing here is, this code is pointing to (index):67 (when i do inspect element in chrome). where can find this code? which file i have to edit.?

screen shot -> http://i39.tinypic.com/2rzqcld.png

in css file main_style.css,

.sf-menu > li > a {
    padding:0 28px;
    border:none;
    color:#323232;
    -webkit-transition:0.3s;
    -moz-transition:0.3s;
    -o-transition:0.3s;
    transition:0.3s;
}

I am not able to find anything about this font family. even if i add font face here, its not changing the navigation menu's font family. if i add other properties like background color is working, only the font properties not working.

How to fix this??



Solution :

You can create your own custom class and give the fonts property an "!important" tag, and apply that class to the menu too. This way only font property will be overwrited.

Eg:

example

{
font-size: 14px !important; 
    font: "Your Own Fonts", Arial, Helvetica, sans-serif !important;
}

You can read more about it here: http://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/


    CSS Howto..

    how to textalign in middle with css?

    CSS3 Transitions in Stylus - how to degrade for IE9

    Materialize CSS Showing errors on form fields

    How to properly preload images, js and css files?

    How to take control of style sheets in ASP.NET Themes with the StylePlaceHolder and Style control

    How to style Menu border/outline in JavaFX8 using CSS?

    How to render css file from url in to the webview in android

    Jquery Show Hide with attribute

    How to make custom css fonts render exactly like designs

    How to center a group of images in HTML/CSS?

    How can I caption an image inside a paragraph

    ?

    How to make a background with 2 gradients in CSS

    How to darken a background using CSS?

    how to make a stretchable blog header

    How to detect CSS inheritance source?

    How can I instantly stop a CSS animation on hover?

    How to select attribute value for a selected element with wombat

    How to compile or convert sass / scss to css with node-sass (no Ruby)?

    How to write CSS code without using :not selector?

    How to apply the grayscale jquery plugin to a background image?

    CSS and HTML: How to create an Expanding DIV On Click?

    How to build HTML email using CSS?

    How to align text next to a “div” in HTML/CSS?

    Showing a demo of my CSS on any website

    How to position two divs on either side of the screen, HTML, CSS

    CSS How to I align a header with a height of 2em to the bottom

    how to get fixed header with css?

    how to change css of n number of div element using jquery

    How to use metro ui css sidebar and compact classes

    How can I position list in
    ?