Community Forums › Forums › Archived Forums › Design Tips and Tricks › How to get different font in sidebar content
- This topic has 12 replies, 4 voices, and was last updated 11 years, 7 months ago by alanaburton.
-
AuthorPosts
-
March 20, 2013 at 12:45 pm #29753alanaburtonMember
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
March 20, 2013 at 12:51 pm #29754Brad DaltonParticipantMarch 20, 2013 at 12:51 pm #29755AnitaCKeymasterLook 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;
Need help with customization or troubleshooting? Reach out to me.
March 20, 2013 at 12:53 pm #29756AnitaCKeymasterI 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.
Need help with customization or troubleshooting? Reach out to me.
March 20, 2013 at 12:57 pm #29758alanaburtonMemberThank 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,
March 21, 2013 at 6:44 am #29915alanaburtonMemberHi, 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!
March 21, 2013 at 10:45 am #29977alanaburtonMemberp.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??
March 22, 2013 at 5:43 am #30410alanaburtonMemberI'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
March 22, 2013 at 7:14 am #30423carlos183Memberfor 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;
}March 22, 2013 at 7:41 am #30425alanaburtonMemberHi 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 π
March 22, 2013 at 7:55 am #30427alanaburtonMemberAh!
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,
March 22, 2013 at 8:19 am #30430carlos183Memberfor 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.
March 22, 2013 at 9:30 am #30446alanaburtonMemberIt wasn't immediate but yes, it's worked now!
All 3 browsers, font showing up in desired places.
Thanks so much!!! π
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.