Jump to content

Custom Font - Help required adding a different custom font please

Recommended Posts

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';
}

Link to comment
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 🙂 

Please give this a 👍 if it helps

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.