Different font for menu and body

Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2198
    Desgausdesgaus
    Member

    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!

    #2227
    Livemeshlivemesh
    Keymaster

    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.

    #3872

    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

    #3888
    NexusNexus
    Moderator

    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!

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.