Support/Ultra Theme/Changing Fonts via Custom CSS

[Resolved] Changing Fonts via Custom CSS

Tagged: 

  • Author
    Posts
  • May 17, 2016 at 3:42 am #3512

    Tricia
    Participant

    Hi 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 Form

    I’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,
    Tricia

    May 17, 2016 at 3:30 pm #3515

    Andrew Misplon
    Keymaster

    Thanks 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

    Tricia
    Participant
    This reply has been marked as private.
    May 25, 2016 at 6:57 pm #3530

    Andrew Misplon
    Keymaster

    Certainly 🙂 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

    Tricia
    Participant
    This reply has been marked as private.
    July 19, 2016 at 11:59 am #4177

    efficad
    Participant

    Hi 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
    Leonor

    July 19, 2016 at 12:02 pm #4178

    Andrew Misplon
    Keymaster

    Hi 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

    efficad
    Participant

    Opus! What’s a web license ?

    July 19, 2016 at 4:32 pm #4233

    Andrew Misplon
    Keymaster

    It’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

    efficad
    Participant

    Thank you very much for your help!

    July 19, 2016 at 5:44 pm #4237

    Andrew Misplon
    Keymaster

    For 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

    efficad
    Participant

    Thank you for your useful tips 😉

    July 19, 2016 at 6:00 pm #4242

    Andrew Misplon
    Keymaster

    For sure 🙂

    July 20, 2016 at 6:46 pm #4268

    Tricia
    Participant

    Hi 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!
    Tricia

    July 20, 2016 at 8:19 pm #4272

    Andrew Misplon
    Keymaster

    Hi 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.

  • Author
    Posts
Viewing 15 posts - 16 through 30 (of 34 total)
1 2 3

You must be logged in to reply to this topic.

Scroll to top