how to edit wp_head() to overwrite the default fon

Question

i am using @font-face to change the default font. but the navigation menu fonts are not changing. its not over writing the default font. if I remove the wp-head() its works fine. but i need wp-head(). only the default fonts must be removed from wp_head()?

@font-face {
         font-family: leb-webfont;
         src: url(http://www.swaidanews.com/CMS/wp-content/uploads/fonts/leb.ttf);

}
body {font-family:"leb-webfont"!important; color:#333; font-size:16px;}
h1,h2,h3,h4,h5,h6,h7{font-family:"leb-webfont"!important; color:#000;}

Also tried this..

.sf-menu > li > a {font-family:"leb-webfont"!important;}

didn't worked.

how to edit wp_head() and overwrite the default font?

Answer 1

Try to put your font name inside " " as well as include all types of your font for browser compatibility:

@font-face {
font-family: 'leb-webfont';
src: url('leb-webfont.eot');
src: url('leb-webfont.eot?#iefix') format('embedded-opentype'),
     url('leb-webfont.woff') format('woff'), 
     url('leb-webfont.ttf')  format('truetype'), 
     url('leb-webfont.svg#leb-webfont') format('svg');
}

Answer 2

It sounds like your theme is using the wp_head action hook to set the CSS rules using the theme's options. You can try to clear the default font setting in your theme's options panel and instead, add the CSS rules to the theme's style.css file directly. The style.css is located in the root of your active theme's directory.

style.css file:

body {
font-family:"leb-webfont"!important; 
color:#333; 
font-size:16px;
}
h1,h2,h3,h4,h5,h6,h7{
font-family:"leb-webfont"!important; 
color:#000;
}

If that does not work, you could try to set an explicit override in the style.css file for your navigation element.

Example:

.my-nav{
font-family:"leb-webfont"!important;
}

Either way, try to avoid inserting CSS directly into the header tags. By WordPress standards, it is bad practice and not recommended, and helps to avoid the types of problems you are having now.

"I need to remove only the font part of wp_head()"

Finding and removing the the part that adds the css using the wp_head hook is more complicated.

You will need to locate the the action hook that is using wp_head() to insert the CSS rules in the page and then comment out, or remove that portion of the code. The first place to look would be in the functions.php file.

Answer 3

After some research i found that wp_head logic is in wp-includes/script-loader.php.

Note that this is raw change and you could break your entire WP, so be very cautious when change there.