Multiple custom fonts not showing up; and help with mobile!

Hi there. I have two questions!

Question 1: I am using GrandSlang, a custom font that has multiple styles - GrandSlang Roman and GrandSlang Italic. I want to implement both throughout the website (h1-h3), so that by default I am using GrandSlang Roman, and when I italicise words, it pulls from the GrandSlang Italic font (and not simply italicize GrandSlang Roman.

I have both of the fonts  uploaded into Squarespace, I'm just not sure how to write the code so that it does not apply one style for all

Here's the website with the header that has both Roman and Italic styles: https://www.arcanastudio.co/

Here's my code

Quote

@font-face {
    font-family: 'Grandslang';
    src: url(https://static1.squarespace.com/static/61ecba7a4fad86641f4faffc/t/61ecbacdcc0eeb42ab7244e0/1642904269271/GrandSlang-Roman.otf);
  
}
h1, h2, .image-title.sqs-dynamic-text h4 {
    font-family: 'Grandslang',sans-serif !important;
}

Question 2: My custom fonts are not showing up on mobile! Any ideas?

1 hour ago, josieng said:

Hi there. I have two questions!

Question 1: I am using GrandSlang, a custom font that has multiple styles - GrandSlang Roman and GrandSlang Italic. I want to implement both throughout the website (h1-h3), so that by default I am using GrandSlang Roman, and when I italicise words, it pulls from the GrandSlang Italic font (and not simply italicize GrandSlang Roman.

I have both of the fonts  uploaded into Squarespace, I'm just not sure how to write the code so that it does not apply one style for all

Here's the website with the header that has both Roman and Italic styles: https://www.arcanastudio.co/

Here's my code

Question 2: My custom fonts are not showing up on mobile! Any ideas?

I check that this font works properly

Have you figured it out?

Thanks @Beyondspace for checking. That's weird, I just checked on my mobile, and this is the first time I've seen it successfully appear on my phone... 

Wondering if you can answer my first question 🙂 You'll see the italic is indeed, italic. However, the font has a specific italic font, which it should look different. But I don't know how to apply the code to tell the font to use the italic font when it is italicised.

Here's a screenshot if the font were the italic font (and not just italic styling)

3 minutes ago, josieng said:

Thanks @Beyondspace for checking. That's weird, I just checked on my mobile, and this is the first time I've seen it successfully appear on my phone... 

Wondering if you can answer my first question 🙂 You'll see the italic is indeed, italic. However, the font has a specific italic font, which it should look different. But I don't know how to apply the code to tell the font to use the italic font when it is italicised.

Here's a screenshot if the font were the italic font (and not just italic styling)

You can try

h1 em, h2 em, h3 em, h4 em {
  font-family: 'your custom font for italic' !important;
}

Hmm, that's not quite working. Here's my code and a screenshot of what I'm trying to achieve. Thanks for helping 🙂 @Beyondspace

Quote

@font-face {
  font-family: 'Grandslang';
  src: url('https://static1.squarespace.com/static/61ecba7a4fad86641f4faffc/t/61ecbacdcc0eeb42ab7244e0/1642904269271/GrandSlang-Roman.otf');

    font-family: 'Grandslangitalic';
  src: url('https://static1.squarespace.com/static/61ecba7a4fad86641f4faffc/t/61ecbac43ad0a2796cf167a9/1642904261107/GrandSlang-Italic.otf');
  
  
  }

h1, h2, .image-title.sqs-dynamic-text h4 {
    font-family: 'Grandslang', !important;
}

14 hours ago, josieng said:

Hmm, that's not quite working. Here's my code and a screenshot of what I'm trying to achieve. Thanks for helping 🙂 @Beyondspace

 

 

Here is my testing

Have you tried adding this custom Css code?

Hm, but now the first line is not picking up using GrandSlang Roman. 

I tried the font Grandslangitalic for other normal text

But it does not show the font as you describe?

May be the reason is the installation of Grandslangitalic font. Can you check the font file again?

18 hours ago, Beyondspace said:

h1 em, h2 em, h3 em, h4 em {
  font-family: 'your custom font for italic' !important;
}

Ok, I added the above (with 'grandslangitalic') - Can you see on your computer how it looks? As I have the font installed on my computer, so of course it shows up correctly. It also works now on mobile, but now the Italic is TOO italicized 😅

18 hours ago, Beyondspace said:

h1 em, h2 em, h3 em, h4 em {
  font-family: 'your custom font for italic' !important;
}

Ok, I added the above (with 'grandslangitalic') - Can you see on your computer how it looks? As I have the font installed on my computer, so of course it shows up correctly. It also works now on mobile, but now the Italic is TOO italicized 😅

Brilliant, thank you for checking and QAing for me 🙂 @Beyondspace