Custom Font - Help required adding a different custom font please

Site URL: https://www.careerspace.co.nz/

Hi there, I need help with custom css please as my code currently only refers to Kiona Light for all headings font (which is correct for headings 2,3,4 and there is no heading 5 in my site), but for heading 1 this needs to be Kiona (rather than kiona light). Please can someone help me with what I need to change in my font to have Heading 1 as Kiona and Headings 2,3,4 as Kiona LIght? I have copied my current code below. Also, many thanks to @Web_Solutions and @Jia for their help with my original question, huge amounts of gratitude to you both! Worth noting all paragraph font is Poppins per site styles font.  

CURRENT CODE:

@font-face {
  font-family: 'kiona-light';
  src: url(https://static1.squarespace.com/static/61636f178ba836289e08a2d5/t/616394b321324671f8c2283e/1633916083358/FontsFree-Net-Kiona-Light.ttf);
}

h1, h2, h3, h4, h5 {
  font-family:'kiona-light';
}

1 minute ago, HollyR said:

Site URL: https://www.careerspace.co.nz/

Hi there, I need help with custom css please as my code currently only refers to Kiona Light for all headings font (which is correct for headings 2,3,4 and there is no heading 5 in my site), but for heading 1 this needs to be Kiona (rather than kiona light). Please can someone help me with what I need to change in my font to have Heading 1 as Kiona and Headings 2,3,4 as Kiona LIght? I have copied my current code below. Also, many thanks to @Web_Solutions and @Jia for their help with my original question, huge amounts of gratitude to you both! Worth noting all paragraph font is Poppins per site styles font.  

CURRENT CODE:

@font-face {
  font-family: 'kiona-light';
  src: url(https://static1.squarespace.com/static/61636f178ba836289e08a2d5/t/616394b321324671f8c2283e/1633916083358/FontsFree-Net-Kiona-Light.ttf);
}

h1, h2, h3, h4, h5 {
  font-family:'kiona-light';
}

On 4/18/2022 at 10:14 PM, HollyR said:

Hi there, apologies I have realised since that I have missed out some important information in my question. Heading 1 needs to be Kiona and Headings 2, 3 & 4 need to be Kiona Light. Heading 5 doesnt appear to feature in my site. The other important piece of information is that all paragraph font (paragraph 1, 2 & 3) is a different font: Poppins font. Poppins is listed as the font under site styles. So the custom font needs to be such that it doesnt over-ride the current paragraph Poppins font. Hope that makes sense and many thanks in advance, I really appreciate the help on this!

Hi, if that's the case, you'll need to import the files for both Kiona and Kiona Light and name them as such. Your codes will look like:

@font-face {
  font-family: 'Kiona-Light';
  src: url('https://static1.squarespace.com/static/61636f178ba836289e08a2d5/t/616394b321324671f8c2283e/1633916083358/FontsFree-Net-Kiona-Light.ttf')  format('truetype');
}

@font-face {
  font-family: 'Kiona';
  src: url('URL FOR KIONA')  format('truetype');
}

Then, to style the headings, add these codes:

h1 {
  font-family:'Kiona';
}

h2, h3, h4 {
  font-family:'Kiona-Light';
}

If you've already selected Poppins as the paragraph font on Site Styles, there's no need to add anything to css for it.

Let me know how it goes 🙂 

Thank you @Jia that is looking much better! You have helped me immensely and I am so grateful to you for your time and help! 🙂