Jump to content

Font family Modesto does not show up in Custom CSS

Go to solution Solved by paul2009,

Recommended Posts

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
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

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 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
  • Solution
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 me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

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.