Jump to content

Where can I find a full list / cheat sheet of Squarespace html tags regarding fonts?

Recommended Posts

Hey all!

I got two closely related questions actually. Google wasn't much use so far, guess I'm not sure what it's called what I'm actually looking for.

First question: where can I find a full list of all the standard tags I can use on Squarespace? I got h1 to h4 as well as body, but I was wondering where I could find the full list, like what's the tag for buttons?

Second question: why are my fonts not implemented in my site header?

I've successfully installed two fonts on my site. I've applied them to headers and body, but I can't find a way to updated my header as well. It just doesn't update.

Here's what I did:

h1 {font-family: 'Circular';}
h2 {font-family: 'Circular';}
h3 {font-family: 'Circular';}
h4 {font-family: 'Circular';}
body {font-family: 'Archer';} 

//the ones above work just fine, but the ones below don't update//

.Header-nav--primary 
{font-family:Archer;}
.Header-nav-item 
{font-family:Archer;}
.Header-nav--secondary
{font-family:Archer;}
.Header
{font-family:Archer;}
.Cart
{font-family:Archer;}

What am I doing wrong? I wish I could simply replace the default fonts with custom ones without having to dive into all of the CSS

Link to comment
  • Replies 4
  • Views 6.2k
  • Created
  • Last Reply
22 hours ago, Douwe said:

where can I find a full list of all the standard tags I can use on Squarespace?

As tuanphan said, you are unlikely to find a free list of selectors online.

CSS uses something called "specificity hierarchy".  It sounds complicated but it just means that the browser follows rules to determine which CSS rule is most specific and therefore applies. It isn't possible to provide a list because it would be different for every template. It would also change according to the tweaks that you changed in Site Styles. That's the bad news.

The good news is that you can work out the correct selectors by opening the browser developer tools and using the inspector. I've written some Squarespace-specific short guides about this but you'll also find videos that demonstrate this in much more detail. 

If you get stuck on a specific one, post a working link to your page and explain which element you want to change and how you want to modify it. One of us can then jump in to provide specific selector advice.

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to 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 is optional.

Link to comment

Hi @Douwe, @inside_the_square has some amazing CSS cheat sheets and tutorials that may have the info you are looking for: https://insidethesquare.co/guides

christyprice.com  🇺🇸 Austin, TX US 

 Get my 100+ item Client Process Checklist for $17.
📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts
🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz)
🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023

Link to comment
On 3/20/2020 at 10:51 PM, tuanphan said:

Second question. Can you share link to your site? I guess class name is incorrect

Yes, here ya go: http://douwe.works password is 'ok' — so in a number of places other fonts remain. I want to use Circular for big fonts and Archer for body, but I don't know how to adjust the header navigation, buttons, the text next to the e-mail sing-up in the footer, the blog etcetera. The fonts come through in some places but not in others and I'm not pro enough to figure it out through Google. 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.