How to add Custom Fonts Squarespace

Using custom fonts is very important for branding, as well as for User Experience, so in this post, I am going to show you how to add Custom Fonts Squarespace.

So, if you ever wondered how to do this, then this is probably for you.

Here are the 5 steps to adding custom font to your Squarespace!

1. Select Font for your website

Choosing a proper font is definitely a creative work to find the best font for your website, 

Few things to make sure of whenever choosing a font for your website.

• The font you select should embody the character and spirit of your brand. Try to match the font style to your brand’s character.
• Avoid using fancy fonts or uppercase text in large bodies of text as it forces strain on the reader’s eye. It’s better to use decorative typefaces only for titles and headlines
• Avoid using more than 2–3 fonts in your design. Each time when you think you need a new font, play with different font sizes for existing fonts.

One last legal tip I want to give you is:

• Make sure you have proper licensing have rights to use that font.

2. Convert Font file to Web Font file

After selecting and downloading the font locally on your computer,
Check what is the extension of your font,

Actually, we need these three font extensions:

1. .ttf or .otf (anyone)
2. .woff
3. .woff2

If you have all these three files skip this step.
But if you do not have any of these files, follow the below steps:

1. Open Web Font Generator
2. Upload your font by clicking the ‘Add Fonts’ button
3. Select, TTF, WOFF, WOFF2 as Formates.
4. Now, click on the Convert button to convert your fonts
5. Then click on Download.

This will download a zip folder, extract the zip folder as usual.

3. Upload Web Font file

In order to use fonts, you must have to store them somewhere on the internet and your websites’ server is the best place for this work.
In order to upload file to the Squarespace website, follow the following steps

1. Open your Squarespace’s Admin page (http://your-account.squarespace.com/config)
2. Click on the ‘Design’ option from the left menu

1. Then click on the ‘Custom CSS’ option from the left menu
2. Here click on the ‘Manage Custom Files’ button from the left menu
3. Click the Add images or fonts upload button and add your three font files.

4. Load this Web Font on your website

1. On the ‘Custom CSS’ box enter the following CSS to load this font

@font-face {
       font-family: ’here_your_cusotm_font_name’;
       src: url( [ENTER_YOUR_TTF_URL] ), 
       url( [ENTER_YOUR_TTF_WOFF] ), 
       url( [ENTER_YOUR_TTF_WOFF2] );
}

2. Here  replace URLs with your real URLs

If you do not know the URL, click on the file one by one it will automatically print the URL of the file in the Custom CSS box.

5. Use this Web Font

Mainly, there are two different ways to use fonts:

• All Heading styles or Paragraph
• Specific site elements (like newsletter blocks, summary blocks, buttons, etc.)

Use this Web Font for all Heading styles or Paragraph

1. Open the ‘Custom CSS’ box
2. (Heading) Add the following code to the style heading

/* For heading 1 (h1) */

h1 {
      font-family: ‘here_your_cusotm_font_name’;
}

/* For heading 2 (h2) */
h2 {
      font-family: ‘here_your_cusotm_font_name’;
}

/* For heading 3 (h3) */
h3 {
      font-family: ‘here_your_cusotm_font_name’;
}

3. (Paragraph) Add the following code to the style paragraph

/* For paragraph (p) */
p {
      font-family: ‘here_your_cusotm_font_name’;
}

Use this Web Font for Specific site elements

1. Open the ‘Custom CSS’ box
2. Add the following code

[ENTER_YOUR_CSS_SELECTOR_HERE] {
      font-family: ‘here_your_cusotm_font_name’;
}

E.g:

/* Example 1 */
header#header {
      font-family: ‘here_your_cusotm_font_name’;
}

/* Example 2 */
.grid-title {
      font-family: ‘here_your_cusotm_font_name’;
}

3. Find a CSS selector for the element you want to use the font.

Below I share CSS sectors for the most common elements of any website,

The list is divided into multiple sections for better navigation,

The list item has two parts the left side (before the colon) is a human-friendly readable version of what the CSS sector is for and on the Right side (after the colon) is the actual CSS selector.

CSS selector list for Squarespace

Announcement Bar

• Announcement bar: .sqs-announcement-bar-dropzone
• Announcement bar text: .sqs-announcement-bar-dropzone p
• Announcement bar link: .sqs-announcement-bar-dropzone a

Header

• Header: header#header
• Sticky Header: header.shrink
• Header (not include sticky header): header#header:not(.shrink)
• Site Title: a#site-title
• Site Title (when overlay menu open): .header–menu-open a#site-title
• Site Title (when overlay menu close) body:not(.header–menu-open) a#site-title
• Navigation: .header-nav
• Navigation Items: .header-nav-item a
• Navigation Dropdown: .header-nav-folder-content
• Navigation Dropdown Items: .header-nav-folder-item a
• Mobile Navigation Items: .header-menu-nav-item a
• Mobile Menu Icon: .header-burger
• Mobile Burger 3 lines: .burger-inner>div
• Mobile Menu X icon: .burger–active
• Header Social Icons: .header-actions .icon
• Cart Icon: header#header span.Cart-inner
• Cart quantity: header#header .icon-cart-quantity

Footer

• Footer: footer#footer-sections
• Footer Social Icons:  footer#footer-sections  .sqs-svg-icon–outer
• Footer Links: footer#footer-sections a

Product List

• Product List: .collection-type-products.view-list
• Product Name: .grid-title
• Product Price: .grid-prices
• Product Image: figure.grid-image
• Product Currency: body.native-currency-code-usd .sqs-money-native:before
• Sold Out Text: .product-mark.sold-out

Product Detail

• Product Detail: .collection-type-products.view-item
• Product Breadcrumb: .ProductItem-nav-breadcrumb
• Product Pagination (Previous/Next): .ProductItem-nav-pagination
• Gallery: figure.ProductItem-gallery
• Thumbnails: .ProductItem-gallery-thumbnails
• Big Image: .ProductItem-gallery-slides
• Product Name: h1.ProductItem-details-title
• Price: .ProductItem-product-price
• Currency: body.native-currency-code-usd .sqs-money-native:before
• Excerpt: .ProductItem-details-excerpt
• Add to Cart Button: .sqs-add-to-cart-button-wrapper
• Add to Cart Text: .sqs-add-to-cart-button-inner
• Variant Dropdown: .variant-option
• Variant Title: .variant-option-title
• Variant Options: .variant-select-wrapper option
• Quantity Text: .quantity-label
• Quantity Input: .product-quantity-input

Cart Page

• Cart Page: body#cart
• Cart Title: .cart-title
• Item: .CartTable-itemLabel-3zzV1
• QTY. .CartTable-itemLabel-3zzV1 span
• Price Name: .CartTable-itemPrice-XgjsO span
• X icon: .item-remove div
• Product Thumbnail: .item-image
• Product Name: .CartTableRow-itemTitle-1MDgZ a
• Quantity input: .CartTableRow-itemQuantity-LwuRx.item-quantity
• Price: .CartTableRow-itemPrice-26eXS.item-price
• Subtotal: .CartTable-subtotal-2nJjm
• Subtotal Price: span.CartTable-subtotalPrice-2JFeD
• Checkout: .CartFooter-checkout-28MW2.checkout
• Checkout Text: .CartFooter-checkout-28MW2.checkout span
• Variant Text: .CartTableRow-variant-1ihcF.variant

Blog List

• Blog List: .collection-type-blog.view-list
• Thumbnails: article.blog-item img
• Date: time.blog-date
• Category: span.blog-categories-list
• Title: h1.blog-title
• Excerpt: .blog-excerpt
• Read more: a.blog-more-link

Blog Posts

• Blog Posts Page: .collection-type-blog.view-item
• Blog Items: .blog-item-entry
• Categories: .blog-meta-item–categories
• Date: time.dt-published.blog-meta-item.blog-meta-item–date
• Author: .blog-meta-item.blog-meta-item–author.p-author.author
• Title: .blog-item-title
• Content: .blog-item-content-wrapper
• Pagination: .item-pagination
• Pagination Arrows: .item-pagination-link .item-pagination-icon
• Pagination Title: h2.item-pagination-title
• Author Box: .blog-item-author-profile-wrapper
• Author Image: a.author-avatar.content-fill
• Author Name: .author-name
• Author Site: a.author-website
• Post Comment: .squarespace-comments
• Post Comment Button: .comment.btn
• Comment Input: .squarespace-comments .new-comment-area
• Preview: span.btn-text.preview-comment.top-level-preview-btn
• Subscribe via email text: span.subscribe.subscribe-control

Event List Page

• Event List Page: .collection-type-events.view-list
• Event Thumbnail: a.eventlist-column-thumbnail.content-fill
• Event Time: .eventlist-datetag
• Event Date: .eventlist-datetag-startdate.eventlist-datetag-startdate–day
• Event Month: .eventlist-datetag-startdate.eventlist-datetag-startdate–month
• Event Title: h1.eventlist-title
• Event Hour: li.eventlist-meta-item.eventlist-meta-time.event-meta-item
• Event Description: .eventlist-description

Event Detail Page

• Event Detail Page: .collection-type-events.view-item
• Event Title: h1.eventitem-title
• Event Date: time.event-date
• Event Hour: li.eventitem-meta-item.eventitem-meta-time.event-meta-item
• Event Description: .eventitem-column-content
• Event Pagination: section.item-pagination.item-pagination–prev-next
• Previous/Next: .item-pagination-link .item-pagination-prev-next
• Event Pagination Title: h2.item-pagination-title

Portfolio

• title: h3.portfolio-title
• item: .portfolio-grid-basic
• portfolio image: .portfolio-grid-basic .grid-image
• pagination: [data-collection-type=“portfolio-grid-basic”].item-pagination
• pagination text: h2.item-pagination-title
• pre text: .item-pagination-link–prev .item-pagination-prev-next
• next text: .item-pagination-link–next .item-pagination-prev-next

There are also other CSS sectors as well, but I think it’s enough for most of you.