Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Douwe

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

Question

Posted (edited)

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

Edited by Douwe

Share this post


Link to post

4 answers to this question

Recommended Posts

  • 1

First question. This list is non-existent. I once intended to write it, but then gave up.

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


COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

 

Share this post


Link to post
  • 0
Posted (edited)
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.

Edited by paul2009

World-class Squarespace Developer and Squarespace Circle Leader with a strong reputation on the Squarespace Forum.
I'm trusted by hundreds of Squarespace users worldwide, including designers, freelancers, business owners and big agencies.

I can tackle anything from small tweaks to full websites and I'm available for short and long bookings (min. 1 hour).
Book via my website giving as much notice as possible. Note that I'm currently booked until the end of May 2020.
Prebuilt Squarespace Extensions for Squarespace 7.0 and 7.1: Enquiry Form ExtensionDate Picker Extension and Age Verification Extension 
Custom Squarespace Extensions: Tell me about the functionality you need

**NEW** Our popular Wishlist extension is now Squarespace 7.1 compatible.

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0
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. 

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...