Imagine spending days or even weeks searching for fonts to complete the image of your brand, only to arrive at Squarespace and realize they don’t exist within its Style Editor.
Add custom fonts to your Squarespace site with just a bit of CSS! It’s super straightforward.
Uploading Your Font
If you want to add fonts that aren’t already included with Squarespace’s built-in font options, it can be done through CSS magic. First you will need to license the font if applicable and download it into an appropriate format before uploading it using Squarespace’s Custom CSS feature.
To do this, head to the Design panel on your Squarespace site and scroll down to Custom CSS. When you click this, a pop-up window will open that allows you to upload custom font files one at a time; once uploaded, they’ll populate a list at the bottom of your window and can then be used throughout your site by entering their corresponding CSS codes.
We will use Veneer, which can be downloaded for free from Font Squirrel and licensed for commercial use – it provides an ideal alternative to paying premium license fees for fonts.
The code below will apply your new font to all text on your site, including headings, quotes and other identifiers. Simply replace “YOURFONT” with its name; be sure to leave all brackets intact as these provide links directly to it.
Change the font-size, font-weight and other attributes of your custom font by editing this code. Make sure to experiment with different sizes and weights until you see what effect they have on your website before finalizing any changes.
Once your custom fonts are in place, simply consult your Squarespace theme or Design Kit documentation and locate any CSS that applies each styling element – such as changing Font Family names to URLs of custom fonts you uploaded – this should allow you to fully stylize them and incorporate them into your brand’s visual identity.
Adding It To Your CSS
As is true for many online business owners, font selection can take time and energy – hours, days or even weeks- to perfect for both brand identity and website appearance. After investing time and money getting them licensed from designers and installed onto Squarespace sites, when it comes time to use them they might not appear in Style Editor causing frustration and uncertainty.
Good news is, almost any font you desire can be added to your site through CSS code. While it might sound daunting at first, once you become more adept it becomes much simpler!
Head into your dashboard and navigate to Design > Custom CSS, where you’ll see an option for uploading font files (.otf,.ttf or.woff files should suffice). To upload them successfully.
Once uploaded, a URL will automatically appear in the Custom CSS box – this is what needs to be referenced in your CSS code snippet; replace FontTitle with your font’s name while leaving its quotes around it.
Replace FontURL with your actual font URL – this can be found by right-clicking any font file in your Squarespace dashboard and then clicking “Manage Custom Files” link at the bottom of window.
Finally, replace FontSize with the size you’d like your font to be. Typically this value should fall between 1-100; however you are free to alter this according to your own tastes.
Your custom font can now be utilized throughout your site, from header to body text and post titles on article pages to other blocks like our Quote Block or Form Block.
As soon as your fonts are added via CSS, they’ll apply to any text on your site with formatting enabled – making it wiser to apply them only where they will be needed and avoid overriding any existing site styles. If necessary, when applying new fonts elsewhere we advise using a tool that eliminates extra formatting (Ctrl + Shift + V for Windows; Command + Shift + V on Mac). That way your customized fonts will display correctly!
Adding It To Your Site Header
Font selection on a website can make a huge impact in how visitors perceive you and your brand or business, adding personality and character. Yet for most people it can be difficult to find one that complements both branding and aesthetic needs.
Squarespace provides a selection of beautiful and contemporary fonts designed specifically for the web. If you’re searching for something specific, however, creating your own font with CSS magic may be easier. To begin this process, have all of your font files ready before beginning this project.
If you purchased fonts, they should come complete with web font files (.ttf or.otf +.woff and.woff2). If not, a free Web Font Generator can convert them online. Once complete, upload the files using Squarespace’s Design panel under Custom CSS > Manage Custom Files by clicking “Upload Files.”
Once your files have been uploaded, enter some CSS code into the Custom CSS section on your site to inform Squarespace where to look for fonts. It also provides you with more control than what’s possible with Site Styles panel; such as altering properties such as font-weight, font-style, font-size, letter spacing spacing transform transform and line height to achieve exactly the look and style that fits with your website’s theme.
Use the important tag to make sure that your new font will appear wherever Squarespace uses its defaults; for instance, in heading/> tags for homepage headings and paragraphs.
Before publishing any text, be sure to thoroughly inspect its formatting for special characters or errors. Copy-pasting from word processors or other software may introduce formatting that conflicts with Squarespace’s default CSS; to prevent this, consider copying and pasting into a notepad application first to remove extra formatting, or using Ctrl+Shift+V as you paste to remove unwanted formatting.
Adding It To Your Body Text
Now that your font has been uploaded, it can be implemented throughout your site. Start by adding it to the header – where your logo, website name, navigation bar and any other text that needs displaying is found – using Squarespace backend’s Design > Custom CSS page and scroll down to “Manage Custom Files.” Here, drag-and-drop your new font file(s) one by one into “Manage Custom Files,” remembering only three fonts can be uploaded at a time – make sure that enough are available before proceeding!
Once this step is complete, scroll to the bottom of your page and add this CSS snippet, taking care to replace YOURFONTNAME with its actual name – don’t forget to save by clicking Save in the upper right corner!
Once your font has been uploaded, the next step should be applying it to the body text of your website. To do this, navigate back into your Custom CSS and copy and paste this snippet – be sure to replace YOURFONTNAME with its true name for best results!
If you are experiencing problems with your fonts, please be sure to review our troubleshooting guide for additional assistance! If any further issues remain, feel free to reach out – we would be more than happy to assist.
By the end of this tutorial, you’ll know exactly how to add any font you desire to your Squarespace site quickly and easily. From adding primary heading fonts quickly and efficiently through creating additional options for h1 tags (depending on which version of Squarespace you use) h2-h4 tag heading fonts with minimal coding knowledge required! Finally, custom fonts can also be integrated seamlessly into your site design using this process!
Squarespace Custom Font Not Working
As most people will understand, font hunting can take hours – sometimes days! Once you find what seems like the ideal font for your brand or business, the excitement of adding it to your website may quickly fade if your Squarespace template doesn’t support custom fonts (or you upload files with incorrect formats) will prevent its proper display.
To resolve this, you’ll require some knowledge of CSS. First, ensure your custom font is in the appropriate format – if it isn’t you may be able to convert it. After doing that you’ll need to add it using @font-face snippet on your Custom CSS page by using Chrome Developer Tools or Firebug to inspect any elements where your font should be applied.
Once your font has been uploaded to Custom CSS, the next step is telling Squarespace where to find it. To do this, navigate to Design panel > Custom CSS and scroll to the bottom where it says “Manage Custom Files”. Upload either an OTF or TTF font file format before replacing text between brackets with this code:
Your font choices depend on your needs; depending on them, you could apply it to elements such as your website header or quote blocks — such as client testimonials on a blog post — where the following code would apply.
Custom Font to a Squarespace Button
If you’re using Squarespace and are searching for a font you would like to use on a button but can’t seem to locate in their font options, there is still an easy way of adding it with CSS. All that’s required to make it happen is having access to a font licensed for web use (usually a.ttf or otf file with.woff2 files attached) as well as some knowledge about editing CSS code.
Start by opening up your Squarespace website and going to Design Custom CSS. This will take you to a page that allows you to upload images and fonts; click “Add images or fonts”, select your files, then scroll down until it says Manage custom files at the bottom.
Once your files are uploaded to Squarespace, the next step should be creating a line of code in Custom CSS page that replaces YOURFONTFAMILY with the name of font you uploaded – this will indicate to Squarespace that this font should be used in button font.
Once this decision has been made, you’ll need to select which headings and paragraph styles will benefit from using your font – depending on which version of Squarespace you’re using, this may include headings such as h1, h2, or paragraph styles like p or combination thereof. Finally, create a line of code which applies it directly.
