How to change the headline to a custom font?

[Collin_S]

Hello,

How do I change the Headline to a custom font? I am able to change the titles and paragraph text with this code below. How do I specifically target the Headline and Subheadline though? Link to site is below also. 

http://preview.rytechllc.com/9d6igc.e482c1db99c2835605cdc6c53c7cfd55

Thanks in advance!

@font-face{
    font-family: 'Averta-Black';
    src: url('fonts/Averta-Black.otf');
   
}

@font-face{
    font-family: 'Averta-Bold';
    src: url('fonts/Averta-Bold.otf');
    
}

@font-face{
    font-family: 'Averta-Regular';
    src: url('fonts/Averta-Regular.otf');
    
}

h2{
	font-family: 'Averta-Bold';	
}

p{
	font-family: 'Averta-Regular';
}

[Collin_S]

Also, that code was added to main.less

[Bernadette3 · Accepted solution]

The Headline font is the same as Title font, except it is in the header section instead of the body or footer. It might be easier to just use the Embed Code element and type out the headline with the style you want to use. Let me see if I can find out where you would change that, though.

@MTpockets perhaps may know? 

[Collin_S]

Yep, that's where it was! I Just had to go to global.less and change the font family to my custom font. I think my problem was when I was trying to change the sections h2 I must have accidentally put the wrong font family in the headers h2.

/* Header Section */

h2 {
    color: inherit;
    font-family: 'Averta-Black';
    font-size: 80px;
    font-weight: 100;
    line-height: 1.25;
    letter-spacing: 0.05em;
    margin: 0px auto;
  }

  p {
    color: inherit;
    font-family: 'Averta-Bold';
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin: 0px auto;
     a {
      border-bottom: 1px solid fade(@bg, 50);
    }
  }
}

[Bernadette3]

Awesome!