How to Add Custom Font to Squarespace

Tired of your Squarespace site looking like everyone else’s? Want to inject some personality with a gorgeous custom font? Buckle up, because you’re about to learn how to add Custom Font to Squarespace!

Elevate your Squarespace website to new heights by incorporating custom fonts. Often overlooked, fonts play a pivotal role in shaping your site’s identity and leaving a lasting impression on visitors. In this guide, we’ll break down the process into simple steps, ensuring you can effortlessly customize your Squarespace site with fonts that speak volumes about your brand.

Why Customize Fonts on Squarespace?

Customizing fonts on Squarespace is essential for several reasons:

• Brand Identity: Define your unique brand personality through font choices.
• Visual Aesthetics: Enhance your site’s appeal with fonts that suit its style.
• Stand Out: Differentiate your site from others with a distinctive font.
• Professionalism: Convey professionalism and trustworthiness with the right font.
• User Experience: Improve readability and create a positive user experience.
• Emotional Connection: Evoke emotions and connect with your audience through font selection.
• Flexibility and Creativity: Experiment with styles, sizes, and colors for a creative touch.
• Consistency Across Platforms: Maintain brand consistency across various platforms.
• Adaptability to Trends: Stay visually relevant by adapting to design trends.
• Differentiation in Sections: Apply custom fonts selectively to highlight different sections of your website.

How to Add Custom Font to Squarespace?

Custom fonts empower you to craft a visually appealing, unique, and engaging Squarespace site that aligns with your brand and captivates your audience. Here is how to add a custom font to your site.

Step 1: Upload Your Custom Font File

• Log in to your Squarespace account.
• Open your website from the Dashboard.
• Navigate to the Website Tools section and find the Custom CSS tab.
• Click on the Manage Custom File button to upload your chosen font file.

Alternative Method – Using CDN:

• Obtain a CDN import link (e.g., Google Fonts).
• Paste the link into the Custom CSS tab for instant access to your custom font.

Step 2: Integrate Your Custom Font with the Site

• Insert a simple CSS code in the Custom CSS tab to link your custom font.

  @font-face {
  font-family: YOURFONTNAME !important;
  src: url();}

• Replace ‘YOURFONTNAME’ with a memorable name.
• Paste the font’s URL within the brackets.

Pro Tip: Squarespace automatically generates the source link when you add a custom file. Find it by clicking between the brackets and selecting your font through the Manage Custom File button.

Step 3: Apply Your Custom Font Throughout the Site

• Identify your Squarespace version (7.0 or 7.1).
• Use the appropriate HTML tags to apply the custom font to headings, paragraphs, etc.
  

  Squarespace 7.0 HTML tags	Squarespace 7.1 HTML tags
  Heading One (h1)	Heading One (h1)
  Heading Two (h2)	Heading Two (h2)
  Heading Three (h3)	Heading Three (h3)
  Paragraph (p)	Heading Four (h4)
  Paragraph One (.sqsrte-large)	–
  Paragraph Two (p)	–
  Paragraph Three (.sqsrte-small)	–

• Copy and paste the provided CSS code into the Custom CSS tab.

  h1 {
  font-family: 'YOURFONTNAME' !important;}
  
  h2 {
  font-family: 'YOURFONTNAME' !important;}
  
  h3 {
  font-family: 'YOURFONTNAME' !important;}
  
  h4 {
  font-family: 'YOURFONTNAME' !important;}
  
  .sqsrte-large {
  font-family: 'YOURFONTNAME' !important;}
  
  p {
  font-family: 'YOURFONTNAME' !important;}
  
  .sqsrte-small {
  font-family: 'YOURFONTNAME' !important;}

Step 4: Further Customize Your Custom Font

• Fine-tune your font’s appearance with additional CSS code in the Custom CSS tab.

  .Any-CSS-rule {
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1em;
    text-transform: uppercase;
  }

• Adjust font-weight, letter-spacing, line height, and text transform for the desired look.

Custom Font for Specific Site Sections:

You can apply your custom font to buttons, headers, footers, blog posts, newsletters, and more. Here is how to do it:

Buttons:

• Use the code given for primary, secondary, and tertiary buttons.

// Squarespace Primary Button //
.sqs-block-button-element--medium, .sqs-button-element--primary {
  font-family: YOURFONTNAME !important;
}

// Squarespace Secondary Button //
.sqs-block-button-element--large, .sqs-button-element--secondary {
  font-family: YOURFONTNAME !important;
}

// Squarespace Tertiary Button //
.sqs-block-button-element--small,  .sqs-button-element--tertiary {
  font-family: YOURFONTNAME !important;
}

Header and Footer:

• Use the code given for titles, links, buttons, and the announcement bar.

// Your Site Title font //
.header-title-text a {
  font-family: YOURFONTNAME !important;}

// Your Site Navigation link font //
.header-nav-item a {
  font-family: YOURFONTNAME !important;}

// Your site Navigation Button font //
.header-actions-action .btn {
  font-family: YOURFONTNAME !important;}

// site Announcement Bar font //
.sqs-announcement-bar-url a {
  font-family: YOURFONTNAME !important;}
 
// Your site footer link font //
#footer-sections .sqs-block-html a{
  font-family: YOURFONTNAME !important;}

// Your site footer button font //
#footer-sections .sqs-block-html .btn{
  font-family: YOURFONTNAME !important;}

Blog Posts:

• Use the code given for titles, descriptions, read more links, and headings.

// Blog Page Post Title //
.blog-title {
  font-family: YOURFONTNAME !important;}

// Blog Page Post Descriptions //
.blog-excerpt p {
  font-family: YOURFONTNAME !important;}

// Blog Page Read More Link //
.blog-more-link {
  font-family: YOURFONTNAME !important;}

// Blog Post Entry Titles //
 .blog-item-title h1.entry-title {
  font-family: YOURFONTNAME !important;}

// Blog Post Heading 2 Titles //
 .blog-item-title h2 {
  font-family: YOURFONTNAME  !important;}

// Blog Post Heading 3 Titles //
 .blog-item-title h3 {
  font-family: YOURFONTNAME !important;}

// Blog Post Heading 4 Titles //
 .blog-item-title h4 {
  font-family: YOURFONTNAME !important;}

Newsletter:

• Use the code given for titles, descriptions, fields, buttons, and footnotes.

// Newsletter Form Title Font //
.newsletter-form-header-title  {
  font-family: YOURFONTNAME !important;
}

// Newsletter Form Description Font  //
.newsletter-form-header-description p {
  font-family: YOURFONTNAME !important;
}

// Newsletter Form Fields Font  //
.newsletter-form-field-element {
  font-family: YOURFONTNAME !important;
}

// Newsletter Form Button Font  //
.newsletter-form-button {
  font-family: YOURFONTNAME !important;
}

// Newsletter Form Footnote Font  //
.newsletter-form-footnote {
  font-family: YOURFONTNAME !important;
}

Quote Block:

• Use the code given for text and source.

// Quote Text Font //
.sqs-block-quote blockquote {
  font-family: YOURFONTNAME !important;
}

// Quote Source Font //
.sqs-block-quote .source {
  font-family: YOURFONTNAME !important;
}

Extra Tips:

• Choose fonts that are easy to read, match your site’s style, and are web-safe.
• Squarespace offers a variety of built-in fonts if you don’t have a custom one.

Remember:

• Always use the Custom CSS option to add fonts.
• Make sure your font is web-safe and available for online use.

Congratulations on giving your Squarespace site a personalized touch with a custom font! Your website now exudes a unique identity that resonates with your brand. If you have questions or need clarification, comment or reach out through our Contact page.

How to Use WordPress Recovery Mode

How to add a social share image to Squarespace

FAQs