Font Type, Size and Hierarchy

Hello Support!

After considerable research, I have established a great Font Type, Size and Hierarchy that works well on websites:

Arial Heading (H1) 36

Subheading Arial 28

Helvetica Body Text 16

Body Heading Bold Arial (H2) 24

Helvetica Body Text 16

Body Heading Bold Arial (H3) 18

Helvetica Body Text 16

The challenge is that Arial and Helvetica are not part of Google Fonts.

How do I install these fonts to work with Sydney Pro?

And, offering a solution where I didn’t have to buy these fonts would be cool too?!?!

Thank you for your help, Bo

Hello there,

From your site’s dashboard, visit Appearance > Customize > Fonts. Leave empty the font family options under body and heading fonts section.

22

Then add this CSS code to Appearance > Customize > Additional CSS:

/** 
 * Body font 
 */
body, #mainnav ul ul a {
  font-family: Helvetica, sans-serif !important; 
}

/** 
 * Heading 
 */
h1, h2, h3, h4, h5, h6, #mainnav ul li a, .portfolio-info, .roll-testimonials .name, .roll-team .team-content .name, .roll-team .team-item .team-pop .name, .roll-tabs .menu-tab li a, .roll-testimonials .name, .roll-project .project-filter li a, #secondary .widget_recent_entries li a, .roll-button, button, input[type="button"], input[type="reset"], input[type="submit"] {
  font-family: Arial, sans-serif !important;
}

Regards,
Kharis

Thank you, Kharis.

Installed the fonts fine. Though, when I adjust the font size for the Slide Title Size, it doesn’t change, whereas the other fields appear to be!?

Actually, H1 isn’t working either.

Hello there,

The main slide’s title tag is H2 that’s covered in the code I suggested. Probably you’d need to flush applied site caching?

If possible, please share a link to your site, so I can inspect and find the correct selector.

Are you referring to the site’s name at the top left?

Regards,
Kharis

I figured out the reason that the Slider Text wasn’t adjusting. It was due to CSS code being installed, which I did before. So I’m good with the Slider text, main and subtitle. Thanks!

The only remaining question (for this post) is why the H1 isn’t adjusting its height? I didn’t see any CSS code overwriting that. And, no, I’m not referring the site’s name at the top left. And I continually purge my cache after entering new code (you taught me that!).

The H1 I am referring to, may not be H1, though I am assuming that it is.

I am building my site using Page Builder, in which the title for the section is really large, and I am trying to reduce it. I have H1 set at 36, and H2 at 24. Though, the title (which I am assuming is H1) is way larger then 36, and the second title is H2 set at 24. Please refer to the attached screenshot.

Another thing that may be complicating matters is that you CSS code to use Arial and Helvetica fonts on my site, rather than Google fonts. If my memory is correct, I thought I could change the H1 size and it would change, and this was prior to entering the code for Arial and Helvetic. Not sure if this is so.

Anyway, here is a link to my site: https://bolockwood.com

Thanks much! Bo

14

The web browser’s inspector showing it loads Arial font family already.

To change the size of page builder widget’s title, you’ll need the below additional CSS code:

    .panel-grid-cell .widget-title {
      font-size: 34px;
    }

    @media only screen and (max-width: 1024px) {
      .panel-grid-cell .widget-title {
        font-size: 26px;
      }
    }

Add it to Appearance > Customize > Additional CSS from dashboard.

Regards,
Kharis

AFAIK, Arial font family is unavailable in Google Fonts’ repository.

The code I suggested is quite safe on all browsers and operating systems. They’re mentioned in this list at W3S.

Regards,
Kharis

Hi again Kharis,

I entered the code into the Additional CSS, flushed cache, and the font size remained the same.

What do you suggest to do now?

Thanks much, Bo

Hello again,

Just a quick follow up on this. May have gotten buried. Please see above. I am almost done. This seems to be one of my remaining challenges.

Thanks!

Hello Support,

I am still having challenges getting the page builder title to change the font size.

Will you please help me resolve this?

Thanks! Bo

Hello Bo,

Please try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .panel-layout .panel-grid-cell .widget-title {
      font-size: 24px;
      padding-bottom: 20px;
    }

Regards,
Kharis

That totally worked! Thanks so much, Kharis.

Bo

You’re welcome Bo!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis