Changing to a custom font in the header and footer

Site URL: https://www.sean-kirkpatrick.com/

Hello.

I've worked out how to change the font to a custom font using Custom CSS from this video https://www.youtube.com/watch?reload=9&v=4WsiwqQluZc

This does work. However, I'm not sure how to do the same and apply the custom font to the header and footer of the site? 

Any suggestions

Add to Home > Design > Custom CSS

header#header *, footer.sections * {
    font-family: HELVETICA-NEUE-ULTRA-LIGHT;
}

Amazing - thanks so much. It worked straight away!

Sorry - do you also know how to do it on the overlay of a portfolio grid? So when you hover over a project and it comes up with the title?

h3.portfolio-title {
    font-family: HELVETICA-NEUE-ULTRA-LIGH !important;
}

Amazing. Thanks so much. I've now got a custom font applied consistently all over my site. 

How did you work that out? Out of interest

Sorry - last one I promise. I've just realised the buttons at the bottom of each case study are in the old font. I tried to use that last bit of code and called them 'navigation buttons' - but it didn't really work

@tuanphan

h2.item-pagination-title {
    font-family: 'HELVETICA-NEUE-ULTRA-LIGHT' !important;
}

Thanks for all your help so far - so this is all the coding I have:

//---Custom Fonts---

h1, h2, h3, h4, h5, p, {font-family:HELVETICA-NEUE-ULTRA-LIGHT}

//---Font Upload---
@font-face {
    font-family: 'HELVETICA-NEUE-ULTRA-LIGHT';
       src: url('https://static1.squarespace.com/static/5ebc269b813e022c41f87bff/t/5f39053c62c23339b57450c4/1597572413829/FontsFree-Net-HelveticaNeueUltraLight+%281%29.ttf');
  }

header#header *, footer.sections * {
    font-family: HELVETICA-NEUE-ULTRA-LIGHT;
}

h3.portfolio-title {
    font-family: HELVETICA-NEUE-ULTRA-LIGHT !important;
}

h2.item-pagination-title {
    font-family: 'HELVETICA-NEUE-ULTRA-LIGHT' !important;
}

I just wanted to work out how I make sure this is Arial when Helvetica is not available - say someone who isn't on a Mac?

@tuanphan

font-family: font1, font2;

eg

font-family: monospace, Arial;

Hmmm, when I do it like this - it just changes the font back to how I had it before - the Squarespace one

//---Custom Fonts---

font-family: 'HELVETICA-NEUE-ULTRA-LIGHT', 'Arial';

h1, h2, h3, h4, h5, p, {font-family:HELVETICA-NEUE-ULTRA-LIGHT}

//---Font Upload---
@font-face {
    font-family: 'HELVETICA-NEUE-ULTRA-LIGHT';
       src: url('https://static1.squarespace.com/static/5ebc269b813e022c41f87bff/t/5f39053c62c23339b57450c4/1597572413829/FontsFree-Net-HelveticaNeueUltraLight+%281%29.ttf');
  }

header#header *, footer.sections * {
    font-family: HELVETICA-NEUE-ULTRA-LIGHT;
}

h1, h2, h3 {font-family: your-custom-font-name, Arial;}