Changing font

[aliknightspsych]

Hi – absolutely loving your Barely Corporate WP theme. Have a question: Would like to change the font on a couple of places: In the logo area – it defaults but I would like to use Apple Chancery as well as on the Slogan area in the builder layout – can you advise how to do this? thanks

Topic

[dizajn]

Theme options -> Styles > Special font… This is for slogan.

[Jason Bobich]

Hello,

As @dizajn pointed out, I’d start by applying your font to the “Special Font” option to the font you want. This will apply it to the slogan area and a couple other small places. Then, anywhere else you want to add it would just involve you making your own simple, CSS customizations.

For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme or in the “Custom CSS” option on your theme options page.

#branding .header_logo .tb-text-logo { font-family: Apple Chancery; }

Also, here’s a helpful tutorial on how to use Firebug – http://vimeo.com/20917974. The only thing I’d suggest not doing is actually making edits to the theme’s CSS files, as it shows at the end of that video. However, the video serves as a good introduction to Firebug and how it can be used to find what CSS is effecting certain areas of your site without ever digging around in any files.

[aliknightspsych]

Just wondering if you could give me more specific details and I am not that advanced in HTML etc
Thanks

[Jason Bobich]

Step 1: Set the special font option at Appearance > Theme Options > Styles > Typography to be the font you want: Apple Chancery

Step 2: Go to Appearance > Theme Options > Styles > Theme Options > Custom CSS and paste in your CSS snippet:

#branding .header_logo .tb-text-logo { font-family: Apple Chancery; }

Step 3: Save the theme options page.

[aliknightspsych]

Thank you Jason – that works great for the headings.
MaryJo

[haike]

Hello, I would like to something very similar: Change the font for the logo (site title + tag line) and writing one word in bold, the other in normal typo, very similar to the Barely Corporate logo. What do I have to put in the CSS then? Thank you in advance for your help!

[Jason Bobich]

@haike Apologies, but I don’t know of a way you could do that simply with CSS. You’d have to get in there and actually edit the function that controls the menu and add some more HTML markup around the text that you could then style different words.

[Author]

Replies