/// Adding Custom Fonts to Squarespace (without Typekit)

So you’ve just been given a beautiful new branding package from your designer full of brand new fonts and everything else. But now you’re stumped as to how to add these custom branded fonts to your Squarespace site. But I’ve gotcher back with a Squarespace hack for you that will bring those branded fonts to life online!

This little Squarespace hack took me a long time to discover (*covers eyes in shame*)… which is crazy because it’s actually pretty simple! It just takes a few simple steps and a little custom code. But anyone can do it! I promise.

Read on for the full tutorial.

custom fonts in squarespace-01
HERE ARE THE STEPS:

  • In the main Squarespace menu, click DESIGN. Then CUSTOM CSS.
  • Below the CSS editor, click MANAGE CUSTOM FILES. 
  • Then upload your font file (this is a file with an extension of .ttf or .otf)

upload custom fonts CSS squarespace

 

 

 

 

 

 

 

 

 

 

 

 

 

Copy and paste the following code into the CSS editor:

@font-face {
font-family: ‘FONT NAME‘;
src: url(‘FONT GOES HERE‘);
}

 

  • Change the text that says FONT NAME to the name of your custom font
  • Highlight the text that says FONT GOES HERE. Then click MANAGE CUSTOM FILES and click on the font you uploaded in the steps above. FONT GOES HERE should now be replaced with a url.

upload custom fonts squarespace

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  • Repeat this step with all of your custom fonts.
  • Once you have all of your fonts uploaded and added to the CSS code, it’s time to make them replace the default Squarespace fonts. To do this, copy and paste the code below into the CSS editor:

h1{
font-family: ‘FONT NAME‘ !important;
}

h2{
font-family: ‘FONT NAME‘ !important;
}

h3{
font-family: ‘FONT NAME‘ !important;
}

p{
font-family: ‘FONT NAME‘ !important;
}

 

You can still adjust the settings of each font in the regular style editor (ie: font size, letter spacing, etc). Make sure to click Save at the top of the Custom CSS page.

 

And that’s it!! Easy peasy. 

 

 

similar-squarespace-hacks-10

sqaurespace-hacks-code-snippets-for-squarespace-image-filters-08-08sqaurespace-hacks-code-snippets-for-squarespace-faq-01sqaurespace-hacks-code-snippets-for-squarespace-custom-pin-it-button-02sqaurespace-hacks-code-snippets-for-squarespace-image-filters-03

 

 

/// Adding borders and boxed text in Squarespace

Another day, another Squarespace hack! This hack helps you add a cool border to your text to create a boxed text. This is great for when you want to call attention to certain text. Perfect for sales pages or even for testimonials or quotes!

Read on for the full tutorial.

BORDERS, TEXT BOXES & CUSTOM OUTLINES IN SQUARESPACE-01-01
HERE ARE THE STEPS:

 

  • In the main Squarespace menu, click DESIGN. Then CUSTOM CSS.
  • Copy and paste the following code:

 .fancyborder {
border: 4px solid #EEE1E1;
padding: 10px;
}

The pink highlighted text is where you can change your colors and width of the border. Do not edit the grey text. (You can also add this code to an individual page if you only want to see the effects on one page of your Squarespace site).

  • Then on the page you’re adding the boxed text to, insert a MARKDOWN block.
  • Add this code:

<div class=”fancyBorder”>

All of your awesome text can go here! You can write as much or as little as you want! It’s totally up to you, but no matter what you write, it will look super cool with your custom border! Boom.

</div>

MARKDOWN Border boxed text squarespace

 

 

 

 

 

 

 

 

  • Replace the pink text with your own. Click SAVE.

 

And that’s it!! Easy peasy. 

 

PS – If you want to get really fancy with your borders, check out the #squarespacehack shop to add dotted borders, inset borders, rounded borders and more!!

 

/// Custom Block Quotes for Squarespace Testimonials

What’s that? You want more #squarespacehacks? Ya?

Well you are in luck my frand. I’ve got a really cool one today that I’m pumped to share: Custom Block Quotes! This is so perfect for featured testimonials or important tidbits you want to call attention to on a sales page. So let’s fancy up those boring old Squarespace quotes, shall we?

customize-quote-block-testimonial-squarespace-05

 

HERE ARE THE STEPS:

  • In the main Squarespace menu, click DESIGN. Then CUSTOM CSS.
  • Copy and paste the following code:

 

.newblockquote {
background: #fff;
border-top: 5px solid #F2CBCB;
border-bottom: 5px solid #F2CBCB;
margin: 1.5em 0px;
padding: 0.5em 10px;
quotes: “\201C””\201D””\2018″”\2019”;
color: #F2CBCB;
font-size: 25px;
padding-top: 35px;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 35px;
}

.newblockquote:before {
color: #F2CBCB;
content: open-quote;
font-size: 4em;
line-height: 0.1em;
margin-right: 0.1em;
vertical-align: -0.4em;
font-family: Volkhov, Georgia, Serif;
}

.newblockquote:after {
display: none !important;
color: #F2CBCB;
content: close-quote;
font-size: 4em;
line-height: 0.1em;
margin-left: 0.1em;
vertical-align: -0.6em;
font-family:Volkhov, Georgia, Serif;
}

.newblockquote p {
display: inline;
}

The pink highlighted text is where you can change your colors. Do not edit the grey text. (You can also add this code to an individual page if you only want to see the effects on one page of your Squarespace site).

 

  • On the Squarespace page you’d like to add a quote block to, insert a CODE content block.
  • Paste the following code, replace the text with your own and then click save:

<p class=”newblockquote”> This is an awesome quote from a previous client who just adores you and your work. They have nothing but glowing reviews and kind words to share with you, and so, being the savvy biz owner that you are, you share it on your website for future clients to see! How nice.
</p>

The pink highlighted text is where you can change your text and add your quote. Do not edit the grey text.

And that’s it!! Easy peasy. 

 

 

similar-squarespace-hacks-10

sqaurespace-hacks-code-snippets-for-squarespace-image-filters-08-08sqaurespace-hacks-code-snippets-for-squarespace-faq-01sqaurespace-hacks-code-snippets-for-squarespace-custom-pin-it-button-02sqaurespace-hacks-code-snippets-for-squarespace-image-filters-03