Category Archives: Resources

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

 

 

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

 

stamp-logo.pngsubmark-stamp-logo-cherry.png

 

 

 

 

 

 

 

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.

smoke-house-logo.pnggold-logo-stamp.png

 

 

 

 

 

 

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

monogram-logo-m-gd-c-monogram

 

 

 

 

 

 

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?

m-k-mongramk-a-monogram-logo

 

 

 

 

 

 

 

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!

 

Popular Posts