Jump to content

Custom Font - Where Do I Find It?

Recommended Posts

So I uploaded a custom font and then did the CSS code for custom fonts.
Here it is below:
 

@font-face {
  font-family: 'Nexa-extra-light';
  src: url('https://static1.squarespace.com/static/65425d16b7fc5a251e0faf1a/t/65492c395bb98c660cfeeab1/1699294265092/nexa-extralight-webfont.woff2') format('woff2'),    url('https://static1.squarespace.com/static/65425d16b7fc5a251e0faf1a/t/65492c39aa303b246f30fd2e/1699294265271/nexa-extralight-webfont.woff') format('woff');
}
@font-face {
  font-family: 'Nexa-heavy';
  src: url('https://static1.squarespace.com/static/65425d16b7fc5a251e0faf1a/t/65492c386469a413cae44663/1699294265153/nexa-heavy-webfont.woff2') format('woff2'),    url('https://static1.squarespace.com/static/65425d16b7fc5a251e0faf1a/t/65492c39e7f70d00d0695715/1699294265177/nexa-heavy-webfont.woff') format('woff');
}
/* Custom Heading Fonts */
h1, h2, h3, h4 {
  font-family:'Nexa-heavy' !important;
}

/* Custom Paragraph Fonts */
p {
  font-family:'Nexa-extra-light' !important;
}

 

I see the changes from the client side of things, but I ca't actually find it as an option on the backend of font options. Any idea why?

 

Thanks for any help.

Link to comment

When you add custom fonts with code, it won't show up in places where you select fonts, you have to use CSS to assign the font manually (like the last line of your code).

If an answer I provide helps you, please mark it as the answer so others can easily access it as well.

I'm a Squarespace Authorized TrainerSquarespace Expert, and Circle Member and I've been helping my clients as well as those here in the forum and in various Squarespace groups with custom coding and support for Squarespace websites. I would love to help you in any way I can.

Squarespace PluginsBook Live Help | Squarespace Video Tutorials | Buy Me a Coffee

Link to comment
2 minutes ago, Josh-KJM said:

@Vigasan thanks for that reply. So am I correct in assuming there isn't a way to add a new font that will show up in places you normally select fonts? Thank you for your kindness in your response. Stepping into some new territory with this. Got kind of assigned a job outside my current skillset.

Yes, that's correct, there was a way on Squarespace 7 (not 7.1) with a lot of code, but it wasn't worth the hassle in my opinion. So for custom fonts, you'll have to right click the text you want to assign a font too, find a class name, and then use CSS to target that class and assign it the font you want.

Edited by Vigasan

If an answer I provide helps you, please mark it as the answer so others can easily access it as well.

I'm a Squarespace Authorized TrainerSquarespace Expert, and Circle Member and I've been helping my clients as well as those here in the forum and in various Squarespace groups with custom coding and support for Squarespace websites. I would love to help you in any way I can.

Squarespace PluginsBook Live Help | Squarespace Video Tutorials | Buy Me a Coffee

Link to comment

@Vigasan is that difficult code to implement to get it to recognize a programed font as something else? Or should I not really worry about being able to choose a font to change since the CSS code is already doing all the work? I'm just thinking through usability for some of my team that will be working the site as well and that if somethign got changed by accident or something it woud be easy for them to click the font back that they want.

Any thoughts on that?

Link to comment
28 minutes ago, Josh-KJM said:

@Vigasan is that difficult code to implement to get it to recognize a programed font as something else? Or should I not really worry about being able to choose a font to change since the CSS code is already doing all the work? I'm just thinking through usability for some of my team that will be working the site as well and that if somethign got changed by accident or something it woud be easy for them to click the font back that they want.

Any thoughts on that?

When you pick a font, it doesn't add any unique identifiers to classes, so it would be difficult to target elements that have specific fonts assigned.

I'm fairly sure this won't work on 7.1, but you can give it a shot (I haven't tried yet).
https://www.squarewebsites.org/blog/how-to-add-custom-fonts-to-squarespace-site

Edited by Vigasan

If an answer I provide helps you, please mark it as the answer so others can easily access it as well.

I'm a Squarespace Authorized TrainerSquarespace Expert, and Circle Member and I've been helping my clients as well as those here in the forum and in various Squarespace groups with custom coding and support for Squarespace websites. I would love to help you in any way I can.

Squarespace PluginsBook Live Help | Squarespace Video Tutorials | Buy Me a Coffee

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.