Category Archives: Tips & Tricks

/// 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

  • 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:

font-family: ‘FONT NAME‘ !important;

font-family: ‘FONT NAME‘ !important;

font-family: ‘FONT NAME‘ !important;

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. 







/// Making Design Trends Unique to Your Brand – PART 1

Can we just have some real talk right now? Ya? Ok, the thing is, there’s a lot of design trends that are just being recycled. Over and over and over.

The problem with this (besides being boring), is that the logos aren’t actually making their brands standout. You deserve to be on trend AND have a logo that won’t be seen anywhere else.

So how can you take these design trends you’re crushing on and make them unique to your brand? I have a few examples below to help you do just that.


Design trend #1:  Circular Stamps / Submarks










Logos by Yossi Belkin

These work so well for businesses who literally need a stamp created for their business. They’re succinct, versatile and sophisticated. So now let’s make it more unique to your brand.








A: Change the shape! This could be a simplified shape of the brand’s distinctive identity, like the logo by Yossi Belkin above, or something as simple as a hexagon, triangle, or scalloped edge. 

B: Break the rules! I am a big fan of breaking design rules. It just makes things a bit more interesting, like this logo by Salted Ink. So bust the design elements out of the circular text or make your circle wrap around only 3/4 of the way closed. Just shake shit up a little bit and see what you can come up with.


Design trend #2:  Monograms








Logos by Logo Luxe & Dave Crow

A classic design, monograms are created by overlapped 2-3 letters to form one single symbol. This is a great go-to, especially for branding a personal brand. But, they can be a bit boring, so how can you up-level this classic motif?









A: Combine letters! Simplify, simplify, simplify. That’s my #1 rule of thumb for design. When it comes to monograms, using the strokes of each letter and combining them can help you create a totally unique mark. 

B: Sneak in the second letter! Using negative space and the natural lines of the letters, you can ‘imply’ where the second letter is. In the logo for web dev Kyle Acker above, the K is prominent, but the A is inferred. It makes you take a second look, which if you ask me, is the mark of a strong logo. 



These are just a few ways you can take something that’s ay-ok and up-level it to be something really cool and unique to your brand! I’ll have more on this and other common design trend in Part 2 of this series. So stay tuned!


/// How To Create Multiple Links On A Single Image with SquareSpace


I’ve recently discovered a new SquareSpace hack and it has me super excited! I’ve always wanted a way to create multiple links on one image, and now I’ve figured out a way. And the best part is that it’s super easy – no custom code needed! I’ve outlined the steps below so that you can get in on this SquareSpace hack, too because I like you.


Step 1:  Start with the full image of what you would like the final image to look like on the site. We will break the image up into sections in the next step.



Step 2:  Separate the image into sections (You can crop the original image, or if you’re using Illustrator, I just create new artboards on top of the full image – one artboard for each section). Each section should be associated with one link. For example, mine will be broken into 4 sections linking to Pinterest, Facebook, Instagram and my website.

individual-how-to-create-multiple-links-on-a-single-image-with-squarespace-04-05 individual-how-to-create-multiple-links-on-a-single-image-with-squarespace-04-05 individual-how-to-create-multiple-links-on-a-single-image-with-squarespace-04-05










Step 3:  Insert a content block and select the Carousel gallery.





Step 4:  Upload your sectioned-off images into the Carousel gallery block.

Step 5:  After each image is uploaded, hover your mouse over the first image and click the gear icon.




Step 6:  Add the website, page or file you would like to link the first section to and click save. Repeat for each additional section.





Step 7:  Now that everything is linked, it’s time to make sure the sections look like one cohesive image. You can adjust the Carousel block up or down until the sections are all showing up (not cropped) and everything looks good.


Step 7:  Click save and that’s it!


This little trick opens up so many possibilities from a design + layout standpoint. Another way that I use it is to add two images right next to each other without any space (like this). Or you could create a really cool collage with images/products that all link to each individual service or product page. Oh man, I could go on and on!!

Did you find this helpful or use this on your own site? Let me know in the comments, I’d love to see. Have questions or just want to chat? Holla at me. 




Popular Posts