- This topic has 33 replies, 5 voices, and was last updated 8 years, 1 month ago by Andrew Misplon.
Tagged: custom css fonts
- AuthorPosts
- May 17, 2016 at 3:42 am #3512
TriciaParticipantHi Andrew,
I really appreciate how responsive you are. Thank you.
1. I am using these widgets on the home page:
SiteOrigin Image
SiteOrigin Hero
SiteOrigin Headline
SiteOrigin Editor
SiteOrigin Button
SiteOrigin Contact FormI’d like to use Proxima Nova and Museo as the sole fonts throughout the website. If you can provide the basic code to change the items in these widgets (which I know is a lot to ask) to, let’s say, Proxima Nova, I think I should be able to tweak the code to fit my exact needs by changing it to Museo where necessary and adding in specific criteria for weight, font size, etc.
Regarding your note about the Hero widget, the font I’d like to use is not listed within the widget or the premium customizer, since it is not a Google Font. Can I use a TypeKit font here? If I use a Typekit font, do I control the Hero widget font settings in the Custom CSS rules, Typekit Custom CSS, Hero widget, or the premium customizer? (I’d like to use Proxima Nova.)
2. As I said, I’d like to use Proxima Nova and Museo as the sole fonts throughout the website, both on the home page and other pages, for headings, body font, etc. As I understand it, this means that I will need to use add-on CSS rules to dictate headings, body font, SiteOrigin fonts, etc. How do I customize the <h1> tags, etc, for the SiteOrigin widgets, using Typekit fonts, and how do I get what I put in CSS rules to override the theme fonts?
I know this is very specific; I really appreciate your help.
Thanks,
TriciaMay 17, 2016 at 3:30 pm #3515
Andrew MisplonKeymasterThanks for your feedback 🙂
Try heading over to
Settings > TypeKit Fonts > Custom CSS Rules
and insert:body, button, input, select, textarea { font-family: "proxima-nova", arial, sans-serif; } .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 { font-family: "proxima-nova", arial, sans-serif; }
That’ll make everything Proxima Nova. With these rules you can leave SiteOrigin widget’s font settings on the theme font setting.
Do you have any general use case for Museo? If you can perhaps send a link to your site and give me a use case of Museo on that page I’ll try narrow this down. You can use the
Set as private reply
checkbox below if you want to keep your site private.May 25, 2016 at 6:33 pm #3529
TriciaParticipantThis reply has been marked as private.May 25, 2016 at 6:57 pm #3530
Andrew MisplonKeymasterCertainly 🙂 If you have any follow-up questions, please, let us know. Chat further once your site is live. Cheers for now 🙂
June 28, 2016 at 9:09 pm #3992
TriciaParticipantThis reply has been marked as private.July 19, 2016 at 11:59 am #4177
efficadParticipantHi Matt
I’m Leonor a beginner in wordpress (learned through tutorials). I’m using Ultra Premium theme. Could you please help me with my Font problem? I’d like to use everywhere in my site the Avenir book font. 1) How can I add it to the theme design and 2) in a way that it won’t be affected by updates?
Thank you in advanced
LeonorJuly 19, 2016 at 12:02 pm #4178
Andrew MisplonKeymasterHi Leonor
Thanks for reaching out. Avenir Book is a premium Adobe font. When I check MyFonts.com now I can only see a Desktop purchase option, I could be missing the web purchase option though. Do you have a web ready license for this font?
July 19, 2016 at 2:39 pm #4201
efficadParticipantOpus! What’s a web license ?
July 19, 2016 at 4:32 pm #4233
Andrew MisplonKeymasterIt’s a commercial font so even to use it on your desktop it needs to purchased. In addition there is usually another license for fonts to be used online, I’m not sure this font can be used online. An easier solution would be to use the closest Google font such as Muli or Museo Sans.
July 19, 2016 at 5:42 pm #4236
efficadParticipantThank you very much for your help!
July 19, 2016 at 5:44 pm #4237
Andrew MisplonKeymasterFor sure 🙂 If you Google avenir book google font similar you’ll find various forum discussions where users suggest different alternatives that might work for you.
July 19, 2016 at 6:00 pm #4241
efficadParticipantThank you for your useful tips 😉
July 19, 2016 at 6:00 pm #4242
Andrew MisplonKeymasterFor sure 🙂
July 20, 2016 at 6:46 pm #4268
TriciaParticipantHi Andrew,
I need to adjust the fonts for two pieces on my homepage: http://dev.cwpd.org
– Change the font for the five items in the Plan Your Park Experience panel (with the blue cloud background) to Montserrat (rather than Montserrat 700). (I created this using the SiteOrigin Features widget.)
– Change the font in the “Submit” button at the bottom of the page to Montserrat 700, to match the other buttons on the page. (I created this section using the SiteOrigin Contact Form.)
Do you have any suggestions on how to do this? Can I do it using Custom CSS?
Thanks!
TriciaJuly 20, 2016 at 8:19 pm #4272
Andrew MisplonKeymasterHi Tricia
Thanks for your continued support. Sure, let’s try:
1. Please, try in Custom CSS:
/* Features Widget */ .sow-features-list .sow-features-feature .textwidget > h5 { font-weight: 400 !important; }
2. Custom CSS:
/* Forms */ input[type="submit"] { font-family: Montserrat !important; font-weight: 700 !important; }
Please, let me know how this goes. Thanks.
- AuthorPosts
You must be logged in to reply to this topic.