"Syne" font not appearing, replaced by standard font?

Hi,

I'm uploading custom fonts to my Custom CSS and I'm having trouble with a specific font - Syne (https://fonts.google.com/specimen/Syne).

When I try to add it to my custom files, it doesn't show the correct font but what seems like a standard one?

It doesn't seem to recognize the font.

I'm sending attached what Syne actually looks like and how it's appearing in Custom Files.

I already tried using another custom font and it successfully recognizes it immediately, it's only happening with Syne.

Do any of you know why this might be happening?

Thanks!

@AnaBruma Hi! Did you set up the custom font with custom code after uploading it? You can refer to this tutorial: https://squaremuse.com/blog/how-to-upload-custom-fonts-squarespace

Hi @Lesum!
I did, I used this code:

@font-face {
    font-family: 'Syne-ExtraBold' !important;
    src: url(https://static1.squarespace.com/static/65f0aae358b34640d8d2a934/t/667b124ac321271b5bc48046/1719341642600/Syne-ExtraBold.woff2);
}
#yui_3_17_2_1_1719340807295_588, #yui_3_17_2_1_1719340807295_582 {
    font-family: 'Syne-ExtraBold' !important;
}


I'm sharing the url of my website so it's easier to see:
https://sailfish-elephant-gna7.squarespace.com/film-production-home

@AnaBruma It's not showing up on your site as you mentioned. Targeting these IDs #yui_3_17_2_1_1719340807295_588 and #yui_3_17_2_1_1719340807295_582 won't apply the font.

You need to set it up as the following. For instance, if you want to set your headings to 'Syne-ExtraBold' site-wide, you first need to add this code:

h1, h2, h3, h4 {
font-family: 'Syne-ExtraBold' !important;
}

If you want to apply it to only specific section or block, your code should look like this:

section[data-section-id="666c62ad4f5b4a0a32ceebe6"] h1 {
  font-family: 'Syne-ExtraBold' !important;
}
#block-yui_3_17_2_1_1718360440326_21471 h1 {
  font-family: 'Syne-ExtraBold' !important;
}
  

@Lesum oh I didn't know it worked with the section + h1. Thanks!
But the issue remains. The code does work but the font is still not recognized.

It appears as shown in the image below, not what Syne ExtraBold looks like.

I'm just wondering why Squarespace doesn't recognize this font.

@AnaBruma Syne fonts work on Squarespace. I've used them on a website before and just confirmed again by testing on a website. Try uploading the font in a different format, such as .ttf or .otf. If it still doesn't work, there might be something missing in your font setup.

@Lesum just tried .ttf, .otf, .woff and .woff2 and none of them work.

I'm leaning towards some kind of issue somewhere else but I have no idea what it might be 😞