Rye font-family not appearing when custom CSS is applied

Here is my use case. I have a section for the home page of my website. There is a featured font for the event we want to advertise in this banner. We are using Rye (https://fonts.google.com/specimen/Rye?query=Rye) across other advertising channels. We want to update the font for two text blocks in my describing section. 

Here is my code block for CSS. Please note that I will just copy and paste this code for the second block and update the blockID.

#block-814739f676fa06738add {
font-family: 'Rye';
font-size: '3em';
}

I can see the change live if I update the font family to 'Arial'. When I set it to 'Rye' I get some sort of fallback font family (this is how I know the blockID is correct). This is a display font (that's how it's listed in the Styles > Fonts section of the style editor).

Here is a screenshot of the end result. I don't see Rye, just the fallback (see attached).

Thanks in advance for your help!

You have the word display after font-family in the CSS editor, can you update your Custom CSS with the code you shared:

#block-814739f676fa06738add {
  font-family: 'Rye';
  font-size: '3em';
}

Hi. Sorry about that. I had initially used the code you posted, but sadly, it's the fallback font. 

1 hour ago, KevinInChicago said:

This is a display font (that's how it's listed in the Styles > Fonts section of the style editor).

Hi @KevinInChicago responding to your DM, I believe SquareSpace only loads the 2 font family that you have selected as your heading and paragraphs. (Can you imagine, that is a lot of font files!)
So if you want to use a third font family, then you will have to treat it as a custom font.

The video you have linked is one way of using Google Font. This import method relies on the font file being hosted and served by Google.

The other method is to upload the font file to your SquareSpace Website. Via the usual method of @font-face etc. Here you can find my Beginner's Guide to Custom Font.

The pros and cons can be down to speed, although I haven't compared them myself! I prefer having control over my custom code, so I would normally upload my own font file even when it's a Google Font. But that's just my preference 🙂

Hope this helps.

@melody495 and @Ziggy

I can update my text blocks but for some reason, that technique didn't work for my tertiary button style.

Thoughts about what I need to do to make it apply to the button too?

New issue, for some reason, the Rye font appears in preview mode when the CSS editor is up but not on the live front end at embracewa.org

@import url('https://fonts.googleapis.com/css?family=Rye&display=swap');

#block-7ff5670405e4c801c2fa,
#block-6afaec43d023f245655c,
#block-c47804bd540c1a7b22a4,
#block-1b8e7264c616ddad531c
{
font-family: 'Rye';
}

On 1/9/2024 at 5:49 AM, KevinInChicago said:

New issue, for some reason, the Rye font appears in preview mode when the CSS editor is up but not on the live front end at embracewa.org

@import url('https://fonts.googleapis.com/css?family=Rye&display=swap');

#block-7ff5670405e4c801c2fa,
#block-6afaec43d023f245655c,
#block-c47804bd540c1a7b22a4,
#block-1b8e7264c616ddad531c
{
font-family: 'Rye';
}

 

Try adding this code to Website Tools > Code Injection > Header

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Rye&display=swap" rel="stylesheet">