Jump to content

Rye font-family not appearing when custom CSS is applied

Go to solution Solved by KevinInChicago,

Recommended Posts

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!

Screen Shot 2024-01-08 at 14.58.57 PM.png

Link to comment
  • Replies 7
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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

Edited by melody495

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Customisation help <- send me your design
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (may contain affiliate links)


 

Link to comment

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

 

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (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.