Jump to content

Referencing font styles in CSS

Recommended Posts

Hi! 

I'm wondering if instead of changing a font size/style in CSS you can tell it to reference one of the already set heading / paragraph styles?

Eg. let's say your H1 is already set to 5rem in the built-in font size selection, but you want to make an element that doesn't have the ability to be changed in those settings reference that style.

Eg. instead of doing this:

.form-submission-text
{font size: 5rem;} 

You can just tell the .form-submission-text to use H1.

I know you could simply match the details of the style, but I've noticed that it then doesn't have the flexible / responsive properties that text set with in-built styles does.

If there's not a way to reference the style, perhaps there's a way to tell that text to scale like the built-in styles?

Hope I'm making sense — I come from a design background so i'm a little out of my depth.

Thanks in advance! 😀

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

10 minutes ago, awd113 said:

I'm wondering if instead of changing a font size/style in CSS you can tell it to reference one of the already set heading / paragraph styles?

Sadly not.

CSS doesn't work this way.

You'll need to specify the class of the element you want to style and then apply the styles to it, as shown in your example. If you are not achieving the responsive style that you require, you may have omitted some of the styles (Squarespace may be applying the default styles with different levels of specificity) or may be using JavaScript to add/remove classes in different situations.

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

About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!
If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.
Improve your online store with our extensions.

Link to comment

Hi Paul. Thanks so much for your comment and advice.

Would you (or anyone else that is reading this) have any idea what kind of scaling Squarespace is applying to their font styles? 

I've tried using various units (em, rem, vh, vw etc.), but doesn't seem to match.

I managed to find this:

font-size: calc((4.5 - 1) * 1.2vw + 1rem);

Which made me hopeful, but even that seems to change when you resize the browser, so I figure their must be something else going on?

Any further advice or ideas would be greatly appreciated.

Thanks!

Edited by awd113
typo
Link to comment
36 minutes ago, awd113 said:

Would you (or anyone else that is reading this) have any idea what kind of scaling Squarespace is applying to their font styles? 

Different templates and different elements use different methods so it’s difficult to provide an answer without more information, including a link to the page on the site. Perhaps you can explain the issue? What isn’t working without custom code? What are you trying to achieve?

About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!
If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.
Improve your online store with our extensions.

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.