Web Creation on Squarespace: Moorheart Site Transfer | Part 1

Are you ready to harness the full power of Squarespace and give your website a standout edge? Dive into our hands-on series where we transform a custom-built website into a sleek Squarespace masterpiece. From hidden tricks to essential skills, I'm here to guide you through every click and code.

In this kickoff session, Part 1, we delve into the art of typography and design. You'll learn how to integrate a custom Google font that's not on Squarespace's standard list, fine-tune your font sizing for perfect readability, and inject some flair into your pages with CSS magic to create stunning gradient backgrounds.

So, whether you're looking to refresh your current site or build a new digital space from scratch, these insider insights are your ticket to a beautifully bespoke website that captures your unique brand voice. Let's get started!

Step 1: Incorporating a Custom Google Font

The right font can speak volumes about your brand before a single word is read. Squarespace offers a variety of fonts, but sometimes you need that special typeface to capture your brand's personality. Here's how we introduce a custom Google Font into the Squarespace ecosystem:

1. Find and Download Your Desired Google Font: Head to Google Fonts and download the font files for the style you’ve chosen.

2. Upload the Font to Squarespace: In your Squarespace editor, navigate to 'Custom CSS' under 'Design' and use the 'Manage Custom Files' button to upload your font file.

3. Write the CSS: With the font uploaded, you'll need to write some CSS to implement it. Here’s a basic template you can modify:

@font-face {
    font-family: 'YourFontName';
    src: url('YourFontFile.woff2');
}

body {
    font-family: 'YourFontName';
}

Replace 'YourFontName' with the name of the font you’ve uploaded and 'YourFontFile.woff2' with the actual file path provided by Squarespace after upload.

---

Step 2: Designing the Homepage Banner

The homepage banner is the first thing visitors see, and we want it to pop! A gradient background is an eye-catching way to add depth and dimension. Here's how you can create a gradient background for any shape:

1. Create Your Shape: Add a 'Shape' block to your banner where you want the gradient to appear.

2. Add the CSS for Gradient: Navigate again to 'Custom CSS' under the 'Design' section and input your gradient code. Here’s an example that you can tweak to fit your design:

// Gradient block
#block-yui_3_17_2_1_1697808084722_8478 .sqs-shape{
  background:linear-gradient(140deg, #F4679B 1%, #F7B49A);
}

Make sure to replace #block-yui_3_17_2_1_1612124279456_12345 with the actual ID of your shape block. You can find this by inspecting the element on your Squarespace page.

---

Hopefully you have learned a bit more about Squarespace and CSS from this, in the next part I add SVG’s icons, and use Squarespace built in layout to create overlay in sections to really help make a website pop.