How to customize the font of the headings?

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.

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

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.

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.

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

Thank you very much!!

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.

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?

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.

https://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;}

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

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?

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

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?

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

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: https://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;
}