How to get different font in sidebar content

Community Forums Forums Design Tips and Tricks How to get different font in sidebar content

This topic is: resolved

Tagged: ,

This topic contains 12 replies, has 4 voices, and was last updated by  alanaburton 1 year, 4 months ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #29753

    alanaburton
    Participant
    Post count: 38

    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

    #29754

    braddalton
    Participant
    Post count: 8873

    You mean the left sidebar using Dancing Script?


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #29755

    anitac
    Participant
    Post count: 7027

    Look for this in your style.css file:

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

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

    [css] font-family: arial;[/css]


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #29756

    anitac
    Participant
    Post count: 7027

    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.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #29758

    alanaburton
    Participant
    Post count: 38

    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,

    #29915

    alanaburton
    Participant
    Post count: 38

    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!

    #29977

    alanaburton
    Participant
    Post count: 38

    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??

    #30410

    alanaburton
    Participant
    Post count: 38

    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

    #30423

    carlos183
    Participant
    Post count: 11

    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;
    }

    #30425

    alanaburton
    Participant
    Post count: 38

    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 :-)

    #30427

    alanaburton
    Participant
    Post count: 38

    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,

    #30430

    carlos183
    Participant
    Post count: 11

    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.

    #30446

    alanaburton
    Participant
    Post count: 38

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

    All 3 browsers, font showing up in desired places.

    Thanks so much!!! :-)

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.