How to add custom fonts to Squarespace
In the world of website design, typography plays a crucial role in creating a visually appealing and cohesive user experience. While Squarespace offers a wide range of font options, there may come a time when you need to add a custom font to your website. Whether it's to align with your branding or achieve a specific aesthetic effect, having the ability to upload and use custom fonts in Squarespace can greatly enhance the overall look and feel of your site.
In this blog post, we will guide you through the process of adding custom fonts to Squarespace. We will cover both Squarespace 7.0 and 7.1 versions, ensuring that you have the necessary knowledge to implement custom fonts regardless of the version you are using. By following our step-by-step instructions, you'll be able to upload your own font files, apply them to specific headings and body text, and even further customize the styling of your custom fonts using CSS code.
So, if you're ready to take your Squarespace website to the next level and create a unique visual identity with custom fonts, let's dive in and learn how to add custom fonts to Squarespace.
Step 1: Uploading the custom font
Before you can start using a custom font in Squarespace, you need to upload the font file to your website. Here's a detailed guide on how to do it:
A. Finding and preparing the font file
1. Locate the font file that you want to upload. It should be in either .ttf, .otf, or .woff format.
2. Ensure that you have the necessary rights and permissions to use the font. If you don't have a custom font, you can find free fonts on websites like Font Squirrel or Google Fonts, or purchase custom fonts from platforms like Creative Market.
B. Accessing the Squarespace dashboard and Custom CSS section
1. Log in to your Squarespace account and navigate to your website's dashboard.
2. In the dashboard, click on "Design" in the top menu.
C. Uploading the font file to Squarespace
1. In the Design menu, select "Custom CSS" from the dropdown options.
2. Scroll down to the bottom of the Custom CSS page and click on "Manage Custom Files."
3. A window will appear where you can upload your font file. Click on "Add Images or Fonts" and select the font file from your computer.
4. Once the font file is uploaded, it will appear in the list of custom files.
Now that you have successfully uploaded the font file to Squarespace, you can proceed to the next step of adding the font to your CSS code.
Step 2: Adding the font to CSS code
Now that you have uploaded the custom font file to Squarespace, it's time to add the font to your CSS code. This will allow you to specify where the font should be used on your website. Follow these detailed steps to add the font to your CSS code:
A. Creating a test styling page
1. It's recommended to create a test page on your Squarespace website where you can apply the font styles and see the changes in real-time. This will help you visualize how the font looks on different headings and body text.
B. Accessing the Custom CSS section and adding the code snippet
1. In your Squarespace dashboard, go to "Design" and select "Custom CSS" from the dropdown options.
2. Scroll down to the Custom CSS box. If you already have existing CSS code, paste the following code snippet at the bottom. Otherwise, you can paste it at the top.
@font-face {
font-family: 'FontTitle';
src: url('FontURL');
}
h1 {
font-family: 'FontTitle';
}C. Editing the CSS code to specify the font family and URL
1. Replace `'FontTitle'` with the name you want to assign to your custom font. Make sure to keep the single quotes around the font name.
2. To find the URL of your uploaded font, click on "Manage Custom Files" at the bottom of the Custom CSS page. Click on your font file, and the URL will automatically be populated in the Custom CSS box. Replace `'FontURL'` with the URL of your font file.
D. Applying the font to specific headings and body text
1. In the CSS code snippet, the `h1` selector is used as an example. You can modify it to target other headings such as `h2`, `h3`, or even paragraphs using the `p` selector.
2. To apply the font to a specific heading or paragraph, replace `'FontTitle'` with the name you assigned to your custom font in the previous step.
Once you have made the necessary changes to the CSS code, click "Save" to apply the custom font to your Squarespace website. You should now see the specified headings or paragraphs using your custom font.
Step 3: Further stylizing the custom font
After adding the custom font to your Squarespace website, you may want to further customize its appearance. While Squarespace's Site Styles panel allows you to adjust some font properties, there are cases where additional CSS code is needed to achieve the desired styling. Follow these steps to stylize your custom font:
A. Exploring the limitations of Squarespace's Site Styles panel
1. Squarespace's Site Styles panel provides options to adjust font size, weight, and other basic properties for headings and paragraphs.
2. However, some custom fonts may not support certain stylization options through the Site Styles panel.
B. Using CSS code to customize font properties
1. Identify the specific font properties you want to customize, such as font size, font weight, letter spacing, text-transform, line height, etc.
2. Open the Custom CSS section in your Squarespace dashboard and locate the CSS code snippet you added in Step 2.
C. Providing a CSS code snippet for font stylization
1. Here is an example CSS code snippet that you can use to stylize your custom font:
h1 {
font-family: 'FontTitle';
font-weight: 700;
font-style: italic;
font-size: 16px;
letter-spacing: 0.1em;
text-transform: uppercase;
line-height: 1em;
}2. Modify the CSS properties within the curly braces (`{}`) to achieve the desired stylization for your custom font.
3. You can adjust properties like `font-weight`, `font-style`, `font-size`, `letter-spacing`, `text-transform`, and `line-height` to match your design preferences.
By applying CSS code to stylize your custom font, you can achieve a more unique and personalized look for your Squarespace website. Remember to save your changes in the Custom CSS section to see the updated stylization of your custom font.
Adding custom fonts in Squarespace 7.1
If you are using Squarespace 7.1, the process of adding and applying custom fonts is slightly different. Here's a step-by-step guide on how to add custom fonts in Squarespace 7.1:
A. Uploading the font file
1. Access your Squarespace dashboard and navigate to the Design section.
2. Click on "Custom CSS" to open the Custom CSS editor.
3. Scroll down to the bottom and click on "Manage Custom Files".
4. Upload your font file by clicking on "Add Images or Fonts" and selecting the font file from your computer.
B. Adding the font to CSS code
1. In the Custom CSS editor, add the following code snippet:
@font-face {
font-family: 'FontTitle';
src: url('FontURL');
}2. Replace `'FontTitle'` with the name you want to assign to your custom font.
3. To find the URL of your uploaded font, click on "Manage Custom Files" and select your font file. The URL will be automatically populated in the Custom CSS editor. Replace `'FontURL'` with the URL of your font file.
C. Applying the custom font to different headings and paragraphs
1. Squarespace 7.1 offers more options for headings and paragraphs. Here are the selectors you can use to apply the custom font:
- Heading One: `h1`
- Heading Two: `h2`
- Heading Three: `h3`
- Heading Four: `h4`
- Paragraph One: `.sqsrte-large`
- Paragraph Two: `p`
- Paragraph Three: `.sqsrte-small`
2. To apply the custom font to a specific heading or paragraph, add the following CSS code snippet:
h1 {
font-family: 'FontTitle';
}3. Replace `'FontTitle'` with the name you assigned to your custom font.
D. Further customization of font styles
1. To customize font properties like size, weight, letter spacing, etc., you can use CSS code similar to what was mentioned in Step 3.
2. Modify the CSS properties within the curly braces (`{}`) to achieve the desired stylization for your custom font.
Remember to save your changes in the Custom CSS editor to apply the custom font styles to your Squarespace 7.1 website.
Styling custom fonts in other areas of Squarespace
In addition to applying custom fonts to headings and paragraphs, you may also want to customize the fonts in other areas of your Squarespace website. Here are some examples of how you can change the fonts in different elements:
A. Customizing fonts in the site header
1. To change the font of the site title, use the following CSS code:
.header-title-text a {
font-family: 'FontTitle';
}2. Replace `'FontTitle'` with the name of your custom font.
B. Changing button fonts
1. Squarespace offers different button styles, such as small, medium, and large. Use the appropriate CSS code snippet to change the font for each button style:
/* Small or Tertiary Button */
.sqs-block-button-element--small, .sqs-button-element--tertiary {
font-family: 'FontTitle';
}
/* Medium or Primary Button */
.sqs-block-button-element--medium, .sqs-button-element--primary {
font-family: 'FontTitle';
}
/* Large or Secondary Button */
.sqs-block-button-element--large, .sqs-button-element--secondary {
font-family: 'FontTitle';
}2. Replace `'FontTitle'` with the name of your custom font.
C. Modifying fonts in the newsletter block
1. If you have a newsletter block on your Squarespace website, you can customize the fonts within it using the following CSS code:
/* Newsletter Form Title */
.newsletter-form-header-title {
font-family: 'FontTitle';
}
/* Newsletter Form Description */
.newsletter-form-header-description p {
font-family: 'FontTitle';
}
/* Newsletter Form Fields */
.newsletter-form-field-element {
font-family: 'FontTitle';
}
/* Newsletter Form Button */
.newsletter-form-button {
font-family: 'FontTitle';
}
/* Newsletter Form Footnote */
.newsletter-form-footnote {
font-family: 'FontTitle';
}2. Replace `'FontTitle'` with the name of your custom font.
D. Adjusting fonts in blog posts
1. If you have a blog on your Squarespace website, you can customize the fonts in various blog post elements using the following CSS code:
/* Blog Page Post Title */
.blog-title {
font-family: 'FontTitle';
}
/* Blog Page Post Descriptions */
.blog-excerpt p {
font-family: 'FontTitle';
}
/* Blog Page Read More Link */
.blog-more-link {
font-family: 'FontTitle';
}
/* Blog Post Entry Titles */
.blog-item-title h1.entry-title {
font-family: 'FontTitle';
}2. Replace `'FontTitle'` with the name of your custom font.
E. Styling fonts in the quote block
1. If you use the quote block on your Squarespace website, you can customize the fonts for the quote text and source using the following CSS code:
/* Quote Text */
.sqs-block-quote blockquote {
font-family: 'FontTitle';
}
/* Quote Source */
.sqs-block-quote .source {
font-family: 'FontTitle';
}2. Replace `'FontTitle'` with the name of your custom font.
By applying CSS code to these different elements, you can ensure that your custom fonts are consistently used throughout your Squarespace website, creating a cohesive and visually appealing design. Remember to save your changes in the Custom CSS editor to see the updated font styles in these areas.
