- This topic has 33 replies, 5 voices, and was last updated 8 years, 1 month ago by Andrew Misplon.
Tagged: custom css fonts
- AuthorPosts
- April 12, 2016 at 1:16 pm #3374
Matt TurkParticipantHi!
I was hoping you could help me understand how to change the fonts used in the theme currently.
I understand I need to do this via Appearance > Custom CSS
I don’t know code and would love your help.
I would love to use Good Dog (for display text) and Roboto Medium and Regular for Body Copy.Thanks in advance!
Matt
April 12, 2016 at 1:32 pm #3375
Andrew MisplonKeymasterHi 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.
April 12, 2016 at 3:03 pm #3376
Matt TurkParticipantHi 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
April 12, 2016 at 3:03 pm #3377
Andrew MisplonKeymasterFor sure 🙂 Earlier you said you wanted to use Good Dog for display text. Can you let me know which text that is? Thanks.
April 13, 2016 at 2:17 am #3388
Matt TurkParticipantThis reply has been marked as private.April 13, 2016 at 12:11 pm #3391
Andrew MisplonKeymasterSure 🙂 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 🙂
April 13, 2016 at 12:48 pm #3392
Matt TurkParticipantAndrew! 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?
MApril 13, 2016 at 12:54 pm #3393
Andrew MisplonKeymasterFor 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.
April 13, 2016 at 1:15 pm #3394
Matt TurkParticipantThis reply has been marked as private.April 13, 2016 at 4:56 pm #3395
Andrew MisplonKeymasterSuper 🙂 Glad to hear that helped. If anything further comes up, please, let me know.
April 14, 2016 at 8:47 am #3396
Matt TurkParticipantThis reply has been marked as private.April 15, 2016 at 9:12 am #3398
Andrew MisplonKeymasterSure 🙂 Please, try:
/* Footer */ .site-footer { font-family: 'Roboto', sans-serif; }
May 11, 2016 at 9:45 pm #3470
TriciaParticipantHi 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,
TriciaMay 12, 2016 at 6:15 pm #3477
TriciaParticipantHi 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.
May 12, 2016 at 6:34 pm #3478
Andrew MisplonKeymasterHi 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 ofTheme 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
. - AuthorPosts
You must be logged in to reply to this topic.