CSS Code for Customizing Text on Your Squarespace Website

 

Squarespace is the platform I always recommend to clients, designers, and business owners who want to save a little money by building their own website. Squarespace is intuitive, robust, thoughtfully-designed, and the easiest website builder to work with. However, what makes Squarespace a no-brainer recommendation is also what makes some websites look generic: templates.

Don’t get my wrong, I love a template. But if you want a Squarespace website that looks custom, you’re going to have to either hire a designer (AKA me!) or add code to your site. My website is built 100% on Squarespace, but I also have over 5,000 lines of CSS code that allow me to tailor my website to my brand.

CSS may sound or seem intimidating, but it’s just as intuitive and easy to work with as the Squarespace platform itself. Here’s some basic CSS code that can transform your Squarespace site.

BEFORE WE GET INTO THE CODE, MAKE SURE YOU KNOW WHERE TO GO TO ADD CODE TO YOUR SITE. GO TO WEBSITE > PAGES > SCROLL DOWN TO WEBSITE UTILITIES > CSS.

Add Custom Fonts to Your Website:

  1. Upload your font file to your Squarespace site on the CSS page by clicking “Manage Custom Files”.

  2. Copy/Paste this code:
    @font-face {
    font-family: 'ADD YOUR FONT NAME HERE';
    src: url('ADD A LINK TO YOUR .WOFF FONT FILE HERE');
    }

  3. Add your font’s name to font-family name

  4. Highlight the src:url placeholder between the ‘‘quote’ marks, with the placeholder highlighted, click the file you uploaded to your Squarespace site on the CSS page.

Example of the code in use:

@font-face {
font-family: 'Times New Roman Bold';
src: url('//static1.squarespace.com/static/56662344c647add04882df22/t/63c98f8d6369295b220c977c/1674153869426/TimesNew-RomanBold.woff');
}

Assign Type Styles to Your Custom Fonts:

  1. Copy/Paste this code:
    h1, h2, h3, p {
    font-family: 'ADD YOUR FONT NAME HERE';
    }

  2. Set the font family for each type style

Example of the code in use:

p{

font-family:Times New Bold;

}

Change the Case of Type:

Text transform is a property that allows you to change the case of any type styles.

  1. Define which type selector you want to transform (H1, H2, H3, H4, p, a, etc)

  2. Copy/Paste one of these codes:
    text-transform: uppercase;
    text-transform: lowercase;
    text-transform: capitalize;

Code in Use:

h1{

text-transform:uppercase;

}

Remove Hyphens from all Type:

If you’re someone who hates auto hyphens like me, this is a code snippet you can copy/paste that will remove them from all type styles. No need to change anything!

p, h1, h2, h3 {
-webkit-hyphens: none !important;
-moz-hyphens: none !important;
-ms-hyphens: none !important;
hyphens: none !important;
}

 
Temi DesignsComment