Different font for menu and body

[desgaus]

Hi!

I just want to ask if it’s possible to use a different font for the menu and the body text, because I think that now the theme is using the same font for both cases,right? I would like to use a more “creative” font for the menu, but for the body I prefer a more readable one…. Is this possible?

Thanks!

[livemesh]

Yes certainly possible. Pls insert the following CSS into Custom CSS tab in the Theme Options panel or the /custom/custom.css file –

/* To change the font for the navigation menu */
#primary-menu > ul.menu > li > a { font-family: Arial /* or whatever */ }

/* To change the font of the menu items you see in the dropdown */
.dropdown-menu-wrap ul.sub-menu li a { font-family: Arial /* or whatever */ }

Pls follow the instructions for import of the fonts as provided by your font source like Google fonts site. Hope this helps.

[cliftoncreate]

Hi, I’d like to change my fonts over also. I’ve uploaded the fonts i require via filezilla with the font squirrel web font generator to my child theme. Whats the best way of now activating these? Is there some CSS code anyone can recommend to switch over from the default Arvo family or do i need to go about it in a different way? Thanks in advance

[Nexus]

You can find the code inside the child theme’s css file (style.css). We have put the code that uses the Weston Font for our demo site there. Here is the code for your reference. Just change the urls accordingly

/* Download Weston font from http://fontfabric.com/weston-free-font/
* and generate web fonts from http://www.fontsquirrel.com/tools/webfont-generator
* and include URL for the generated web font elements here . */
@font-face {
font-family: 'Weston';
src: url('https://www.livemeshthemes.com/extinct/wp-content/fonts/Weston/weston_free-webfont.eot');
src: url('https://www.livemeshthemes.com/extinct/wp-content/fonts/Weston/weston_free-webfont.eot?#iefix') format('embedded-opentype'),
url('https://www.livemeshthemes.com/extinct/wp-content/fonts/Weston/weston_free-webfont.woff') format('woff'),
url('https://www.livemeshthemes.com/extinct/wp-content/fonts/Weston/weston_free-webfont.ttf') format('truetype'),
url('https://www.livemeshthemes.com/extinct/wp-content/fonts/Weston/weston_free-webfont.svg#weston_freeregular') format('svg');
font-weight: normal;
font-style: normal;

}

Once you are done with setting up the font you can use it in your custom styling. For example

h1, h2, h3, h4, h5, h6 {
font-family: 'Weston' !important;
}

Hope that helps. Thanks!

[Author]

Posts