- This topic has 7 replies, 2 voices, and was last updated 7 years, 10 months ago by Andrew Misplon.
- AuthorPosts
- December 2, 2016 at 6:00 pm #5595
me1980ParticipantHello,
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!
December 2, 2016 at 6:09 pm #5596
Andrew MisplonKeymasterHi 🙂
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
.December 2, 2016 at 7:58 pm #5597
me1980ParticipantHi,
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!
December 2, 2016 at 9:16 pm #5598
Andrew MisplonKeymasterGlad 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.December 2, 2016 at 10:00 pm #5599
me1980ParticipantIs 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!December 2, 2016 at 10:04 pm #5600
Andrew MisplonKeymasterNo 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.
December 2, 2016 at 10:31 pm #5601
me1980ParticipantAh, 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!
December 2, 2016 at 10:37 pm #5602
Andrew MisplonKeymasterAwesome 🙂 Great to hear you’ve made progress.
- AuthorPosts
You must be logged in to reply to this topic.