How to get different font in sidebar content

[alanaburton]

Hi,

My site is: http://www.50shadesofmum.co.uk/

I have downloaded a font to create the top writing logo and would like to use it to replace the font of the sidebar titles. Can someone please tell me how to do it?

Thanks,

Alana

[Brad Dalton]

You mean the left sidebar using Dancing Script?

---

Tutorials for StudioPress Themes & WooCommerce.

[Anita]

Look for this in your style.css file:

.sidebar {
    color: #FFFFFF;
    display: inline;
    float: right;
    font-size: 13px;
    width: 270px;
}

Add in your font-family. Here is a sample -

    font-family: arial;

---

Love coffee, chocolate and my Bella!

[Anita]

I initial had another CSS in there. I just changed it. So make sure you re-read what I wrote above. My apologies if it confused you.

---

Love coffee, chocolate and my Bella!

[alanaburton]

Thank you both -

I now know where to change the content box itself, thanks Anitac

But yes, I would like to change the Dancing Script font for the titles braddalton. It would be for both the left and right sidebars.

Thanks,

[alanaburton]

Hi, I have managed to replace the Dancing Script with a font I found on the Google web fonts page with "Mountains of Christmas" that I quite like.

First I downloaded the font, uploaded to Windows and created an image using that font that I could use as the header >> all good.

Second I added the following code to be able to use this font and another on the site and put this code into the CSS file, following the structure of the other 2 lines there in Import Fonts:

@import url(http://fonts.googleapis.com/css?family=Mountains+of+Christmas|Fredericka+the+Great);

I then went through the CSS to change the font from regular and/or the Dancing Script to the Mountains of Christmas font.

This was going well until I got stuck with some areas of text. I have managed to change the font for the menu items as well as the blog titles that are seen from the home page.

I can't get/find the relevant code to change the font and add in  my: font-family: 'Mountains of Christmas', cursive; of the following;

a) the blog title on the individual specific blog page, e.g. http://www.50shadesofmum.co.uk/mummy-blogger/great-minds-think-alike/ (the words "great minds think alike")

b) the page title on the actual individual page: e.g. http://www.50shadesofmum.co.uk/about/ (the words "About Me")

c) all of the titles in the sidebar widgets in the right hand sidebar, i.e. "the mum", "my 50 shades", "from the blog"

NB, I want to keep the actual bulk of content in the plain font (blog post actual content, sidebar widget actual content) and just change the font for the titles.

I did try separating the initial code in the CSS into 2 groups so I went from:

/* Defaults
------------------------------------------------------------ */

body,
p,
h1,
h2,
h2 a,
h2 a:visited,
h3,
h4,
h5,

h6,
select,
textarea {
color: #342822;
font-family: 'Droid Serif', serif;
font-size: 15px;
line-height: 1.6;
margin: 0;
padding: 0;
text-decoration: none;
}

TO:

/* Defaults
------------------------------------------------------------ */

body,
p,
select,
textarea {
color: #342822;
font-family: 'Droid Serif', serif;
font-size: 15px;
line-height: 1.6;
margin: 0;
padding: 0;
text-decoration: none;
}

AND:
/* Defaults
------------------------------------------------------------ */

h1,
h2,
h2 a,
h2 a:visited,
h3,
h4,
h5,
h6, {
color: #342822;
font-family: 'Mountains of Christmas', cursive;
font-size: 15px;
line-height: 1.6;
margin: 0;
padding: 0;
text-decoration: none;
}

>> But that did nothing!

Any input would be fab!

Thanks again!

[alanaburton]

p.s. Interestingly, now the "old" font that I first changed it to: 'Roughage' is now showing in IE but all traces of that have now been updated to the Mountains of Christmas font but neither font shows up in Google Chrome or Firefox and it's the Mountains font that is supposedly a Google web font that will show up in most browsers... maybe it all takes time??

[alanaburton]

I've found some other code in another post and I've tried adding it to the bottom of the CSS file to see if I could also change the blog post title font on the inner pages.

This hasn't worked 🙁

.entry-title {
font-family: 'Mountains of Christmas', cursive;
}

I also tried making up something new:

#sidebar .widget-title {
font-family: "Mountains of Christmas";
}

.page-title {
font-family: "Mountains of Christmas";
}

This didn't work either.

Any help please!?

Thank you

[carlos183]

for your widget titles on the side bar you have this:
.sidebar h4 {
color: #fff;
font-family: "Mountains of Christmas", cursive;
font-size: 36px;
margin: 0 0 10px;
text-shadow: -1px -1px #7c2c2c;
}
try this:
.sidebar h4 {
color: #fff;
font-family: "Mountains of Christmas", cursive !important;
font-size: 36px;
margin: 0 0 10px;
text-shadow: -1px -1px #7c2c2c;
}

[alanaburton]

Hi Carlos,

Thanks for that, it does change something!

At the moment there are different things showing on Firefox (which I use most), IE and Chrome.

In IE the desired font now shows up in the sidebar titles - BRILL! 🙂

But - the page title still shows up in a font called Roughage I used before Mountains of Christmas but have since removed all traces of. Caching issue? I am CTRL+F5 though, no change or update and the change to the sidebar font was immediate, can I use the !important; elsewhere to get the page titles showing in that font too? (I've tried adding a few !important here and there to try!!?

In both Firefox & Chrome the font does change in the sidebars - but not to the correct one, not sure which one is coming up - I thought this was a Google web font - i.e. supposedly cross-browser friendly (?!)

Thanks again 🙂

[alanaburton]

Ah!

I have just added the magic !important to the code I had not long added to the bottom of the CSS which now reads:

/* I HAVE ADDED THIS BIT FOR ENTRY TITLE*/

.entry-title {
font-family: "Mountains of Christmas", cursive !important;
}

(so I remember in the future which bit needs to be added to get this) so another BRILL! 🙂 In IE now the font shows up in all the desired places, header, page title and sidebar. Result! Firefox and Chrome now have the font on the page titles too and the last thing missing is the font for the sidebars in Chrome and Firefox to show up. If the change makes it universal across browsers for the pages, surely it should follow the same pattern for the sidebar?? Leads me to think it's a cache/browser compatibility issue rather than anything else? Although that's pure speculation as in reality I have no idea! 🙂

Cheers again,

[carlos183]

for the sidebar h4, you probably copied and pasted what I put here. Try deleting the  " " (quotes) from “Mountains of Christmas” and type them in again.

[alanaburton]

It wasn't immediate but yes, it's worked now!

All 3 browsers, font showing up in desired places.

Thanks so much!!! 🙂

[Author]

Posts