How to change post heading size/font and main title size/font independently?

  • Unknown's avatar
    johannebutenschon · Member ·

    I am using the Hemingway Rewritten theme. I try to change the size and font of my post headings, but then the main heading of the site is changed as well. I want to change these independently of each other. For example: I want the main heading of the site to be “Anonymous Pro” size 0, but the headings of each post to be “Calluna” size -2. Can anyone help me?

    The site is http://www.jungeltelegraf.com

    Thanks!!!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, the post headings have a CSS class of .entry-title and the current size is 4.5rem, so if you change the .post-title rule you already have to the following, you can adjust as desired. 

    .entry-title {
    font-size: 4.5rem;
}

    For the site title, it would be this 

    .site-title {
    font-size: 3rem;
}

    and for the site description it would be this 

    .site-description {
    font-size: 1.8rem;
}

    I used the web inspector built into my browser to find the relevant CSS. If you are not familiar with the web inspector in your browser, take a look at our support page on How to Find Your Theme’s CSS where you will find some brief screencasts to get you started with it. I find it an invaluable tool when working with CSS.

  • Unknown's avatar
    johannebutenschon · Member ·

    Wow, thank you so much! It worked!
    And what is the code for changing the font? I tried “font-family” without success.

    Thanks!

  • Unknown's avatar
    designsimply · Member ·

    For example: I want the main heading of the site to be “Anonymous Pro” size 0, but the headings of each post to be “Calluna” size -2.

    The only web fonts available to use in CSS will be the ones that area selected in the Appearance > Customize > Fonts panel. I checked http://jungeltelegraf.com/ just now, and I see that you are currently using LFT Etica Display for the headings and the default theme font for the body text.

    If you would like to change just the site title “JUNGELTELEGRAF” to a different font, you can use a font stack to specify a list of preferred fonts and the visitor’s computer will display the first font their computer has available. To learn more about how a font stack works, see http://web.archive.org/web/20131010010610/http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/

    Here is an example of using a monospace font for the site title in the Hemingway Rewritten theme:

    .site-title a {
	font-family:'Courier New',Courier,monospace;
}
  • The topic ‘How to change post heading size/font and main title size/font independently?’ is closed to new replies.