Four CSS Tricks to Customize Any Squarespace 7.1 Website

Squarespace is a popular website builder and a honey favorite that provides an easy-to-use platform for creating beautiful websites. While Squarespace offers a variety of customization options, sometimes you need a little extra CSS to get the look you want and stand out from the crowd. In this blog post, we’ll share six CSS tricks you can use to customize Squarespace 7.1 website. For each of these adjustments, copy and paste the code  into your Design settings under Custom CSS.

1. Custom Squarespace Fonts

Difficulty: Easy

    One way to add a unique touch to your Squarespace site is by using custom fonts. To add custom fonts, first, upload the font files to your site’s file manager, under Design > Custom CSS > Manage Custom Files. Then, use the @font-face rule in your CSS to reference the font and swap out the URL link. For example:

    @font-face {

      font-family: ‘YourCustomFontName‘;

      src: url(‘uploaded-font-file-link.oft‘);


    Be sure to swap out YourCustomFontName and the uploaded URL with your own.

    To upload a custom font of your own, navigate to the Design tab, then click into Custom CSS. From here, click Manage Custom Files and upload or drag and drop your font file. To view the URL for that file, click the file name and Squarespace will add the URL link into the Custom CSS dialog box.

    2. Changing Specific Squarespace Header Fonts

    Difficulty: Easy

    Want different font families for different heading sizes? You got it! To customize and target each header or the body copy use the following code snippet (p is the body copy, h1, h2, h3, h4, h5 are headlines):

    p {

      font-family: ‘YourCustomFontName‘, sans-serif;


    h2 {

      font-family: ‘YourCustomFontName‘, sans-serif;


    3. Further Stylize Your Fonts

    Difficulty: Easy-ish

    Want a little more control over each heading style? We got you covered! Use text-transform to make all your letters uppercase or lowercase. Change out the color using the HSL or Hex code value. Increase or decrease the font size. And finally, increase or decrease the letter spacing or kerning for each word. Check out our favorite CSS code snippets below to further customize your look:

    h4 {

    font-family: ‘YourCustomFontName‘; 

      text-transform: uppercase; 

      color: hsl(38, 100%, 61%);

      font-size: 20px;

      letter-spacing: 1px;


    Once your font family has been imported (see Trick #1), you can further stylize by copy and pasting the above CSS code and adjusting the color, letter spacing, case preferences, etc. to your liking.

    4. Removing Link Underlining

    Difficulty: Super duper easy

    This is a personal preference but those pesky, not very nice link underlines can be distracting to an overall design. Especially, if you’re wanting to style your links through color variation instead. Use this code to get rid of the text underline:

    a {

    text-decoration: none !important;


    In Conclusion

    These are a few small but impactful changes you can make to customize your Squarespace 7.1 site. We use these four on just about every simple website design project we produce at Honey Creative. Need some extra inspiration or help? Let us know! Honey Creative is a branding and website design studio that specializes in rebranding and start-up logos and simple websites using Squarespace.

    bee on a yellow flower close up


    Stay updated with the latest buzz worthy blog posts and get free bees right in your inbox?