[Resolved] How to change font in Page Headers?

[MC]

Hello, I am trying to change the size (and font) of my Page Header text. After some trial and errors – Through Google searches because I clearly have no idea what I’m doing – I was able to change them to a certain point before it stopped working. So anyways, here is my “content” tab, pieced together from various places.

<h1 class="av-special-heading-tag  av-medium-font-size-overwrite av-medium-font-size-50 av-small-font-size-overwrite av-small-font-size-35 av-mini-font-size-overwrite av-mini-font-size-35" itemprop="headline">Catch phrase<br><strong>important word</strong></h1>
<div class="av-subheading av-subheading_below av_custom_color " style="font-size:25px;"><p>GROW REVENUE | DRIVE LEADS | BUILD AWARENESS</p>
</div>

Thanks a lot!

[David]

Hi MC,

if you want to style the H1 and body differently to the styles set in the customiser then we are going to have to add some Custom CSS. So you could use this mark-up instead:

<h1 class="ph-heading">Catch phrase<br><strong>important words</strong></h1>
<p class="ph-body">GROW REVENUE | DRIVE LEADS | BUILD AWARENESS</p>

Then its a case of giving our new classes some CSS styles:

.ph-heading  {
    font-family: HelveticaNeue;
    font-size: 72px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

.ph-body {
    font-family: Open Sans;
    font-size: 25px;
    text-align: center;
}

Heres a how to on adding CSS:

https://docs.generatepress.com/article/adding-css/

[MC]

Thanks, it works great! You’re the man!

[David]

Glad we could help!

[Author]

Posts