[Resolved] 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.

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

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 🙂

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.

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

Sure 🙂 Please, try:

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

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.