Jump to content

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

Go to solution Solved by Beyondspace,

Recommended Posts

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?

Link to comment
  • Replies 11
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

image.thumb.png.897ab6341a3f1318e99c192b2d461cd6.png

Have you figured it out?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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)

Screenshot 2022-12-08 at 1.47.57 PM.png

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

Screenshot 2022-12-08 at 1.47.57 PM.png

You can try

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

 

Edited by Beyondspace

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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

 

 

Screenshot 2022-12-08 at 4.58.21 PM.png

Edited by josieng
Link to comment
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

 

 

Screenshot 2022-12-08 at 4.58.21 PM.png

Here is my testing

image.thumb.png.b5ad1991e350cce6ac7380c4b5f05a3b.png

Have you tried adding this custom Css code?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

I tried the font Grandslangitalic for other normal text

image.thumb.png.20076b566f31a19e25e6c7b70727a995.png

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?

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

image.png

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

Link to comment
  • Solution

It looks different on my end

image.thumb.png.16a07a85f79a47aa1216422526f2a694.png

 

image.thumb.png.34043076460a2c2d2941085944a512f6.png

Now the normal heading and the italic text have the right font. I think the font is fine now

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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.