[Resolved] Changing H1, H2, H3 color and font individually

This topic contains 7 replies, has 2 voices, and was last updated by  Andrew Misplon 11 months, 2 weeks ago.

  • Author
    Posts
  • #5595

    me1980
    Participant

    Hello,
    Tried to search and see if this has been asked specifically before, but didn’t find the exact answer– tried a few things with ideas on here– but wasn’t able to solve my issue, sorry if I missed it.

    I am using Puro Premium and I see how to change the all H1, H2 size, font, and color through the ‘Customize’ options, but not each one individually. So, I am wondering if there is a way to use CSS to just change the H1 color and font and not all the headings. I tried– doesn’t seem like it should be difficult, but no luck. (Specifically I am trying to use Quicksand font and the color black for H1 and just the default font and a pink color for H2– I have a custom CSS plugin). Thank you for your time!

    #5596

    Andrew Misplon
    Keymaster

    Hi 🙂

    Thanks for your support.

    In your Custom CSS you can try:

    .entry-content h1 {
    
    }
    
    .entry-content h2 {
    
    }

    Within those rules you can use font-size: 20px; and font-family: Arial; etc. as required. Does that help get you started?

    If Quicksand isn’t set as a font somewhere in the Customizer, you’ll need to import yourself. To do that, you’d insert the following at the very top of your Custom CSS:

    @import url('https://fonts.googleapis.com/css?family=Quicksand:400,700');

    If you don’t need the regular weight you can remove the 400.

    #5597

    me1980
    Participant

    Hi,
    I tried that and it does not work in my particular situation– but now I know why. I was wrong that I need to change the H1 etc in order to achieve what I want. (oops sorry! thank you for your response though!)

    I am using the site origin page builder on my homepage where I want to change the font. So, my question now is what fonts are available to me to use in a text area of the site builder (using the attributes area to add css- I was able to change the size, but I am confused as to which font-families I can use for this– or do I need to import like you mentioned above? I don’t have to use Quicksand exactly, just looking for something similar, with round edges). Thank you for your help!

    #5598

    Andrew Misplon
    Keymaster

    Glad to hear you’ve made progress. If a font is being set in the Customizer then that font will be available to you with Custom CSS because the theme is importing it. In addition, some SiteOrigin widgets will offer a font selection for certain items. For all other fonts, you’ll need to copy the @import statement from Google Fonts and insert it at the top of your Custom CSS.

    #5599

    me1980
    Participant

    Is there a way to get the import statement to apply to the SiteOrigin widget– like the text widget or the editor widget? I can change the size of the font and I can use a font-family like ‘Verdana’ by using the css style box in the “attributes” area of the widget, but are there other options if there isn’t an actual “font selection” for those widgets? I tried putting the statement in the custom css and then putting the name in the font-family in the css style box for the widget, but that didn’t work (it may be my lack of understanding of how that works! sorry!)
    Thank you again for your time!

    #5600

    Andrew Misplon
    Keymaster

    No problem 🙂

    There aren’t specific font settings for the Editor widget. It’s a widget version of the regular Visual WordPress editor which doesn’t have those settings either.

    It’s easiest to do everything with Custom CSS. So if you want to target a specific text widget, edit it, click Attributes, enter a class name like:

    my-class

    And then in Custom CSS target it:

    .my-class {
    	font-family: Verdana;
    }

    Not where my periods are.

    #5601

    me1980
    Participant

    Ah, yes. I got it! I had a typo in my import statement for a minute— no good! Quicksand is now working in the widget. Thank you so much!

    #5602

    Andrew Misplon
    Keymaster

    Awesome 🙂 Great to hear you’ve made progress.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

Scroll to top