Changing Fonts via Custom CSS

Hi Matt

Thanks for reaching out.

Ultra Premium offers font settings in the Customizer at Appearance > Customize > Theme Design. If you’d like to stick with Ultra Free you can head over to Appearance > Custom CSS and insert the following:

/* Body Font */
#primary label, #primary button, #primary input, #primary select, #primary textarea, #primary p, #primary > ul, #primary > ol, #primary > table, #primary > dl, #primary address, #primary pre, .paging-navigation, .page-links, .site-main .comment-navigation, .site-main .post-navigation, #secondary label, #secondary button, #secondary input, #secondary select, #secondary textarea, #secondary p, #secondary > ul, #secondary > ol, #secondary > table, #secondary > dl, #secondary address, #secondary pre {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
}

Good Dog doesn’t look to be a Google Hosted font. This means you’d need to use a site like Font Squirrel to create a usable web font and then store those files on your server somewhere other than the theme folder. Do you have those files ready? If you’re not totally set on Good Dog then it’s a lot easier to choose a font from Google’s offering.

Hi Andrew

Thanks so much for your help!
RE: Roboto – I will try that.

RE: Good Dog. I’m not adverse to using Gochi Hand instead – and that is a google font.
Are you able to help me with that CSS for that?

Thanks again!

M

For sure 🙂 Earlier you said you wanted to use Good Dog for display text. Can you let me know which text that is? Thanks.

This reply has been marked as private.

Sure 🙂 For that you’d add to Custom CSS:

/* Headings */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
	font-family: 'Gochi Hand', cursive;
}

Then, right at the top of our Custom CSS, above everything else, insert the following:

@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
@import url(https://fonts.googleapis.com/css?family=Gochi+Hand);

Let me know how that goes 🙂

Andrew! you are a champion. Thanks mate.
Am I pushing the friendship if I ask…how do I get the nav text to change to Roboto and be all caps?
They are retaining the original theme fonts for some reason?
M

For sure, no problem. That requires a little extra CSS. Let’s try:

/* Main Menu */
.main-navigation {
    font-family: 'Roboto',sans-serif;
    text-transform: uppercase;
}

Let me know how that goes.

This reply has been marked as private.

Super 🙂 Glad to hear that helped. If anything further comes up, please, let me know.

This reply has been marked as private.

Sure 🙂 Please, try:

/* Footer */
.site-footer {
  font-family: 'Roboto', sans-serif;
}

Hi Andrew,

Could you help me change the title font in the Site Origin Hero widget? Is there something I need to do in the custom CSS? I’m trying to use Montserrat 700.

Thanks,
Tricia

Hi Andrew,

You can probably ignore my previous post as it’s more specific than my overall question. I’m wondering how fonts work overall for this theme. I have two more specific areas that I’m curious about:

1. I’d like to customize more of the fonts on the static homepage, using the SiteOrigin Widgets Bundle to build this page. Can I customize those fonts using “Attributes” within each of these widgets? Do I need to find the corresponding code in the CSS style sheet and customize it in my CSS stylesheet?

2. I’d like to use two Typekit fonts (Museo and Proxima). I’ve added the Typekits for WordPress plug-in, but I’m not sure how that works alongside the SiteOrigin Widgets Bundle and the Ultra Premium Theme. Can you offer some insight here?

Thanks for your help.

Hi Tricia

Sorry for missing your previous post. A quick reminder that I send out all the time, please, don’t edit your theme’s style.css file. All themes overwrite their entire folder during theme updates so any changes made here will be lost if we release a theme update and you run that update. Rather use a plugin like Simple Custom CSS.

Ultra Premium has font settings in the Customizer at Appearance > Customize > Theme Design, the font settings are provided in each section of Theme Design.

1. Sure, please, let me know which widgets you’re using and what you’d like to change the fonts to and I’ll take a look at the best way to proceed.

For the Hero widget, scroll down to the Design and Layout section, see the Heading Font setting, change it from Use Theme Font to the font of your choice, that is a Google Font list. As long as your content in the Hero is using h tags like h1, h2, h3 etc, the font setting will work.

2. Unless a SiteOrigin widget has its own font family settings it’ll be using Ultra’s font settings. Add to those all depends on the cascading nature of CSS, if we add new font styles after the existing styles then they’ll be used OR we can just be more specific with our addon CSS rules. Summary: we can tell the theme what fonts to use over and above the provided settings in the premium Customizer.

How do you want your new custom fonts to be applied? To headings, to the body font etc. Once we know that I’ll send you the Custom CSS to add to Settings > TypeKit Fonts > Custom CSS Rules.

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