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:
.ttf or .otf (anyone)
.woff
.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:
Upload your font by clicking the ‘Add Fonts’ button
Select, TTF, WOFF, WOFF2 as Formates.
Now, click on the Convert button to convert your fonts
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
/* Example 1 */header#header {
font-family: ‘here_your_cusotm_font_name’;
}
/* Example 2 */.grid-title {
font-family: ‘here_your_cusotm_font_name’;
}
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
View Comments
Thanks for sharing this great information with us. It helps to increase our knowledge.