Changing Font Style and Size for Post and Page Titles

Community Forums Forums Design Tips and Tricks Changing Font Style and Size for Post and Page Titles

This topic is: not resolved

This topic contains 5 replies, has 2 voices, and was last updated by  LORFca 1 year, 2 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #20919

    LORFca
    Participant
    Post count: 4

    I have the Mocha theme.  I’d like to change the blog post titles and page titles font to match the same font used in the site name and widget titles.  Is this all done in the style.css file?  I’m a beginner at CSS.  Any suggestions would be greatly appreciated!  Thanks!

    http://www.carriesheart.com

    #21049

    braddalton
    Participant
    Post count: 7473

    Add this to the end of your child themes style.css file:

    .entry-title {
    font-family: 'Dancing Script',cursive;
    }
    

    WordPress Developer & Consultant
    Brad Dalton400+ StudioPress Tutorials & 1200+ Code snippets

    #21145

    LORFca
    Participant
    Post count: 4

    This worked wonderfully!  Thank you!  Is there anyway I can include the ‘Dancing Script’ font to show on the main page as well as the post excerpt titles on the main page?  The font only shows as ‘Dancing Script’ when I click on the post.

    #21162

    LORFca
    Participant
    Post count: 4

    Just realized that my above request to use ‘Dancing Script’ site wide may not be the smartest choice.  If other readers can’t see that specific font, why bother?  If it’s wiser to keep the ‘Droid Serif ‘, can I at least make the font size smaller on the blog post / page titles?  The original titles per the theme is huge – it looks a little ridiculous!  … and I tend to have longer blog titles.

    Thanks!

    #21200

    braddalton
    Participant
    Post count: 7473

    I suggest you install the Firebug addon for Firefox and inspect the elemnet to find the classes which you need to target for this.

    Then you can change the values for font-size and font-family in real time on your site by adding a new CSS rule before you make the changes permanent in your child themes style.css file.

    .entry-title {
    font-family: 'Dancing Script',cursive;
    font-size: 26px;
    }
    

    You’ll need to find the CSS rules for the home page in your style.css file or by using Firebug.

    You’ll see them under the Headlines section of your style.css file


    WordPress Developer & Consultant
    Brad Dalton400+ StudioPress Tutorials & 1200+ Code snippets

    #21316

    LORFca
    Participant
    Post count: 4

    Don’t laugh, but I have Firebug and didn’t realize I could actually change CSS in real time!  Thank you for the valuable tip.  I know exactly where to make the font style change now!  I desperately want to like Genesis and since I don’t know a lot of CSS, I sincerely appreciate this forum and your time and patience.  Thanks again!

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

You must be logged in to reply to this topic.