Jump to content

Font family Modesto does not show up in Custom CSS

By BradleyK, in Other

Go to solution Solved by paul2009,

Recommended Posts

BradleyK Level 5

BradleyK

Posted
Posted

Hello-

This is the "Custom CSS" code I'm attempting to apply to an image block in "Poster" mode.

 

.sqs-block-image .design-layout-poster .image-title p {

font-size: 95px;

font-family: modesto-poster;

font-weight: normal;

color: #ffffff !important;

}

 

I'm trying to change the font to Adobe Modesto-Poster, or even just Adobe Modesto; however, this family does not display. Other Adobe fonts are displaying. I could be imagining things, but I believe I was able to change this the other day in Custom CSS — now it's not working.

Unfortunately, this part of my site is not live, I'm curious if others are having the same issue, and how I could solve this with Custom CSS.

Thanks for your help.

 

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

BradleyK
BradleyK

Thank you so much for the very thorough explanation. I am planning to upgrade to SS 7.1, so this information is most helpful. Thanks again. Brad

Web_Solutions Level 10

Web_Solutions

Posted
Posted
23 minutes ago, BradleyK said:

Hello-

This is the "Custom CSS" code I'm attempting to apply to an image block in "Poster" mode.

 

.sqs-block-image .design-layout-poster .image-title p {

font-size: 95px;

font-family: modesto-poster;

font-weight: normal;

color: #ffffff !important;

}

 

I'm trying to change the font to Adobe Modesto-Poster, or even just Adobe Modesto; however, this family does not display. Other Adobe fonts are displaying. I could be imagining things, but I believe I was able to change this the other day in Custom CSS — now it's not working.

Unfortunately, this part of my site is not live, I'm curious if others are having the same issue, and how I could solve this with Custom CSS.

Thanks for your help.

 

Can you share your website URL?

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer
☕Am I helpful? Want to offer me a coffee?
✉ Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
Vigasan Level 6

Vigasan

Posted
Posted

The font has to be selected somewhere in Site Styles in order for Squarespace to load the font to your website, otherwise it won't work since Squarespace doesn't load up all fonts to every website to avoid an excessive website size. You could go to Adobe FontKit and set it up manually if have an Adobe subscription and don't want to declare the font through Squarespace.

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 Trainer, Squarespace 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 Plugins | Book Live Help | Squarespace Video Tutorials | Buy Me a Coffee

Link to comment
  • Solution
paul2009 Level 17

paul2009

Posted
  • Solution
Posted
7 hours ago, BradleyK said:

Why is it other fonts I don't have loaded in Site Styles appear in the image block, poster mode while inputting the font names in the Custom CSS panel?

Without having access to your site and your device, it's impossible for us to confirm the reason. However, I suspect your browser may be loading the font from your computer (see 4 below). 

To explain why, it may help if I describe (in a simplified way) how a web browser typically loads fonts.

A browser can usually load fonts from four locations:

  1. Ideally, the fonts are loaded by Squarespace. When you add fonts to the website, by selecting them in the Site Styles panel, Squarespace loads these fonts with your website. You can select them in any of the Styles panels and you can also refer to them using CSS. However, as @Vigasan said above, you can only refer to them if they have been have added using the Site Styles panel. 
  2. If you want to load additional custom fonts, for example fonts that are not built-in to Squarespace, you can do this with code. There are a number of methods but the most popular method is with CSS and a @font-face statement.
  3. There are fonts that come bundled with every device, generally known as "web safe fonts (Arial, Tahoma, Times New Roman, Verdana and so on).
  4. You may have custom fonts installed on your device/computer, some of which may have been supplied with your operating system (Windows, MacOS and so on) and others may have been installed manually, for example Adobe Fonts.

I suspect that you are loading some of these fonts using method 4. This means they are available to you - but only you - when you view the website. However, it is not "safe" to use these fonts for your web design because other users are unlikely to have the fonts installed on their device, and they will see an alternative font instead, such as Times New Roman as a serif replacement. 

If the font is a custom font (such as an Adobe font that isn't licensed by Squarespace) then you'll need to use method 2.

Did this help? Please give feedback by clicking an icon below  ⬇️

About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign Up / Login
Go to topic listing
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources