Navigation
This is archived content. Visit our new forum.
  • Author
    Posts
  • #639517
    Rob
    Participant

    Hi,

    Fira Sans is a google font, I would like to use it across my website. However it does not display in the Customizer when selecting fonts. How do I resolve this?

    Thanks!

    #639526
    Lely
    Moderator

    Hello Rob,

    You can add this line in Appearance > Customize > Custom > CSS:
    @import url(https://fonts.googleapis.com/css?family=Fira+Sans:400,300,300italic,400italic,500,500italic,700,700italic);

    Then to use it, please add this line below to element CSS declaration:
    font-family: 'Fira Sans', sans-serif;

    Like for headings:

    h1, .h1{
    font-family: 'Fira Sans', sans-serif;
    }

    Hope this helps.

    #639581
    Rob
    Participant

    Great that works. But how do I select it for all of my content, headings, body content, etc. ?

    Cheers

    #639593
    Christopher
    Moderator

    Hi there,

    Please update your code to :

    body,h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,a,p{
    font-family: 'Fira Sans', sans-serif;
    }

    Thanks.

    #639630
    Rob
    Participant

    Great that works perfectly. Cheers.

    #639637
    Christopher
    Moderator

    Glad it works for you.

    #677374
    Aboutx
    Participant

    Thanks this works, but is it right that the Fonts set in the Theme are loaded too, right? Will you implement Fira Sans in the Future in the Customizer? Would be really great. I am looking forward to it 😉

    #677394
    Christopher
    Moderator

    We certainly appreciate the feedback! This is something we can add to our list of feature requests. This way it can be taken into consideration for future development. All of these items are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive. Thanks!

  • <script> jQuery(function($){ $("#no-reply-639517 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>