WordPress.org

Ready to get started?Download WordPress

Forums

Graphene
[resolved] How to customize the font of the headings? (17 posts)

  1. Greybox
    Member
    Posted 1 year ago #

    I love this skin and I feel like I can do a lot of things without the code modification. However I was not able to find a way to change the font for a particular headers only. For example, I want Heading 1 to be 14pt Arial Bold, Heading 2 to be just Arial 14pt and Heading 3 to be Courier Bold 12pt without affecting the size and style of any other header or paragraph text. What is the best way to do it?

    Thank you.

  2. kjodle
    Member
    Posted 1 year ago #

    Are you referring to the fonts in the header of each page? In that case, there are options to change this in Graphene Options >> Display Options >> Text Display Options. Just enter a font in "Site Title" and "Site Description".

    If you mean <h1>,<h2>, & <h3>` headings, just go to Graphene Options >> Display Options >> Custom CSS and enter this:

    h1 {font: bold 14px Arial,sans-serif;}
    h2 {font: 14px Arial,sans-serif;}
    h3 {font: 12px Courier,monospace;}

    Unless you are creating a print style sheet, you want to use px for screen, not pt.

  3. kjodle
    Member
    Posted 1 year ago #

    BTW, even though Arial and Courier are standard fonts on most computers, it's still a best-practice to specify a backup generic family like "sans-serif" or "monospace" just in case somebody's computer doesn't have those fonts. (Weird, and rare, but it happens.)

  4. Greybox
    Member
    Posted 1 year ago #

    Thank you.

    I was talking about headings (<h1>Heading1</h1>) (<h2>Heading1</h2>)(<h3>Heading1</h3>), so I tried your suggestion, and copied your text exactly into Graphene Theme Options >> Display >> Custom CSS and I see absolutely no difference after saving and refreshing the web page.

  5. kjodle
    Member
    Posted 1 year ago #

    Be sure to empty your browser and server caches.

    Also, Graphene adds any theme options after it loads a child theme stylesheet, so those may be overriding this. Try adding !important to the end of the declaration, before the semicolon, if you can't get these to work.

  6. Greybox
    Member
    Posted 1 year ago #

    I see, you have to add !important tag to make it working:

    h1 {font: bold 14px Arial,sans-serif !important;}
    h2 {font: 14px Arial,sans-serif !important;}
    h3 {font: 12px Courier,monospace !important;}
  7. Greybox
    Member
    Posted 1 year ago #

    Thank you very much!!

  8. Andrew
    Forum moderator
    Posted 1 year ago #

    Try not to do that. It makes it more difficult for people's custom stylesheets to override those styles, as "!important" rules usually take precedence over their styles.

    You can avoid using "!important" rules by just using more specific CSS selectors.

  9. Greybox
    Member
    Posted 1 year ago #

    Could you be more specific? How can I change the fonts for (<h1>Heading1</h1>) (<h2>Heading2</h2>)(<h3>Heading3</h3>) in Graphene theme without using !important rule?

  10. Andrew
    Forum moderator
    Posted 1 year ago #

    We can't be more specific, we have no idea which headings you're referring to. A link to your site & specific examples of elements you want to modify would suffice.

  11. Greybox
    Member
    Posted 1 year ago #

    http://www.nautilus-intl.com/wordpress/?page_id=1505

    I used:
    h1 {font: bold 20px Arial,sans-serif !important;}
    h2 {font: 20px Arial,sans-serif !important;}
    h3 {font: 20px Courier,monospace !important;}

  12. Andrew
    Forum moderator
    Posted 1 year ago #

    Put ".entry-content" before your heading selectors, e.g:

    .entry-content h1 {font: bold 20px Arial,sans-serif;}
    .entry-content h2 {font: 20px Arial,sans-serif;}
    .entry-content h3 {font: 20px Courier,monospace;}
  13. Greybox
    Member
    Posted 1 year ago #

    Thank you, it worked, but I noticed that the page title ("Test" in my case) has changed from Arial Bold to the skinny default font when I replaced
    h1 {font: bold 20px Arial,sans-serif !important;}
    with
    .entry-content h1 {font: bold 20px Arial,sans-serif;}

    This probably makes sense because the page title isn't really the h1 heading. But how do I change the page title to make it Arial Bold?

  14. Andrew
    Forum moderator
    Posted 1 year ago #

    Do you have Chrome or Firefox? Please specify which if you have either.

  15. Greybox
    Member
    Posted 1 year ago #

    You might be shocked, but I use Windows Explorer. ;-)
    The goal, of course, is to make the site look same for all major browsers.

    I actually tried the same page in Chrome or Firefox, same skinny font for the page title ("Test"). Like I said, this makes sense to me. I just wanted to know how I can control the page title font?

    http://www.nautilus-intl.com/wordpress/?page_id=1505

  16. Andrew
    Forum moderator
    Posted 1 year ago #

    Chrome has a built-in developer tool that lets you expose the underlying HTML and CSS of a webpage.

    Using that tool, you can find out what CSS is applying to the title and then override that.

    For example,
    I got the developer toolbar up after right clicking on your "Test" title and selecting "Inspect element". This is what I saw: http://snag.gy/xGSBy.jpg .

    From there you can identify that you need to target the ".post-title" class.

    That means in your CSS you can add:

    .post-title {
     font: bold 20px Arial,sans-serif;
    }

    Or, in your case, as your ".entry-content h1" has the same styling, you can just combine the two:

    .post-title,
    .entry-content h1  {
     font: bold 20px Arial,sans-serif;
    }
  17. Greybox
    Member
    Posted 1 year ago #

    Excellent, thank you!!!

    I would prefer your first suggestion because I could control the post title independently:

    .post-title {font: bold 20px Arial,sans-serif;}

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.