- This topic has 7 replies, 2 voices, and was last updated 7 years, 11 months ago by
.
- Posts
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!
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;andfont-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.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!
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
@importstatement from Google Fonts and insert it at the top of your Custom CSS.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!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-classAnd then in Custom CSS target it:
.my-class { font-family: Verdana; }Not where my periods are.
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!
You must be logged in to reply to this topic.