If you’re building a website using Squarespace, fonts may need to match other elements of its design and branding. Unfortunately, Squarespace lacks built-in options that enable this without extra CSS tweaks.
It won’t be difficult, but some basic coding will be necessary. Keep reading to discover how you can add your custom font to squarespace!
Uploading the Font
Custom fonts add a personal touch to any website, which is especially essential when relied upon typography to convey their brand and message. Unfortunately, custom font implementation can be challenging without professional designer help; luckily, Squarespace makes this easier by making adding customized fonts simple with some CSS tweaking.
This tutorial uses “Tahoma,” available through Creative Market. First, download the font file onto your computer before uploading it to Squarespace website – to do this, go into your dashboard and navigate to Design > Custom CSS; scroll down until you reach “Manage Custom Files,” select your custom font file from within your dashboard’s “Upload,” and click “Upload.”
Once your font has been uploaded, it needs to be added into your CSS code. To do so, open up the Custom CSS editor in your dashboard and replace FontTitle in the code with its name – once done save changes and the font will be visible across your website.
Once you’ve added the font to your CSS, the next step is to apply its style across header and paragraph text on your website using these CSS snippets below.
Note that these snippets are optimized for Squarespace websites running version 7.0 (Brine family templates) or later; to use them with earlier versions, use either FontSquirrel or MyFonts plugins instead.
To use these snippets, replace FontTitle with the name of your custom font and font-style with any desired stylization options, such as font weight, font size, letter-spacing options, text transform or line height settings.
Once you’ve added font styles to your header and paragraph text, you can also apply them to other elements of your website, like the Site Header or Quote Block. To do so, follow the relevant snippet below; be sure to save all changes using Custom CSS Editor when complete; as some fonts may require commercial-use licenses in order to ensure proper licensing rights for your website.
Adding the Font to Site Styles
Add your own fonts to your Squarespace site is an effective way of giving it an individualistic flair and adding your personal touch. Fonts you select can be used across header, paragraph, blog & button styles. In this tutorial we’ll walk through how to upload custom fonts and apply them directly onto the website.
Squarespace provides an incredible library of fonts to use on your website, but sometimes something elusive may not be available there. CSS makes this task simple; though not for those afraid of technicalities it provides an effective solution that makes their Squarespace website appear more individual and professional.
Locate and obtain the font file that you would like to use; this should be in either OTF, TTF, WOFF2 or WOFF3 format and possess a license that permits its usage on your site.
Locate this web project using “My Adobe Fonts,” followed by “Web Projects.” Once you find the web project containing the font you wish to embed on Squarespace, copy its project ID (a string of letters and numbers located above the embed code).
Step 2. Once in your Squarespace dashboard, navigate to your site and click “Design.” Scroll down until you find “Custom CSS,” then “Manage Custom Files,” this is where you can upload any custom font files.
Once in the “Manage Custom Files” window, drag and drop your font files into the “Custom Files” box before clicking on “Upload,” to upload them onto Squarespace.
Once your new custom font has been uploaded to Squarespace, it’s time to put it to use! One effective way of testing out a new font is adding it to the header – this ensures it will be used throughout your website, not just titles.
Adding the Font to Headings
Depending on the template you use, chances are your website already includes some built-in fonts. But if you need an alternative font that’s not part of Squarespace’s library, adding it can be more challenging – it requires additional CSS tweaks and special attention from you as the website administrator.
Before we get underway, you must ensure your custom font file is compatible with our system. It should either be an.otf,.ttf, woff2, or woff2 format file. To manage custom files on your website design panel, click “Manage Custom Files”, and a file drawer will open up allowing you to add one by one your custom font files.
Once your font has been uploaded successfully, Squarespace needs to know when and where it should be used for text types such as headings or paragraphs. In order to do this, it’s essential that you know which selectors are being used on your site – otherwise we will guide you through how to find them! If this sounds intimidating don’t worry! Our support staff are on hand to assist.
Log into your Squarespace dashboard in order to access the design panel and custom CSS menu, where you will click “Edit Stylesheet” then “Custom CSS”.
Remove the line that says “Squarespace default”. In its place, insert the URL for your font file while keeping quotation marks around it. Change “your-url-here” to be your font file’s path name (without double quotation marks) then edit “FONTNAME” accordingly.
Once you’ve made changes, save them to your website. Next, decide whether your new font should be used for headers or paragraphs; if it will serve both functions simultaneously then separate CSS codes may need to be created for both purposes.
Dependent upon how your font is set up, you may need to apply the custom font both h1 and p1, or h2 and p2 etc. If only using it for heading 1, however, then applying it as intended should suffice; otherwise it may result in inconsistent appearance between browsers.
Adding the Font to Body Text
Add a custom font to your Squarespace website is an effective way of making it more personal and original, but the process can be intimidating and time consuming. This guide will show you how you can add one quickly and effortlessly.
First, locate your font file on your computer – it should start with “OTF,” “TTF,” or “WOFF.” Once found, navigate down to the bottom of this page and click on “Manage Custom Files,” where a window will open that allows you to drag individual font files directly onto this list.
Once you’ve uploaded your font, it’s important to include it in your CSS code. To do this, click “Manage Custom Files” at the bottom of your Custom CSS window, copy and paste this code into its box that opens – replacing “Font_name>” with your font’s actual name, including any hyphens or underscores in its name as necessary.
Once your new font is set up, the next step is deciding where it should apply. Use the font-family> tag for any type of text on your website including headings, paragraphs, list blocks and summary blocks; alternatively you could also apply it specifically to specific sections (for instance using this tag in the footer of a blog to implement a custom font).
Step three is to add your custom fonts to your website. To do this, navigate to the CSS panel and search for “font-family”. Place your cursor over this tag and click its dropdown menu; once selected from there, remove and replace “font-family” with this CSS code snippet from below.
Once you’ve added custom fonts to your website, be sure to save the changes using the CSS panel. You can further personalize them by applying them individually across various elements on your page using this code snippet from our CSS code library.
