Squarespace Help: How to Add A Custom Font to Your Squarespace 7.1 Site
Squarespace 7.1 already offers you a wide range of beautiful fonts to choose from when creating your website. At Spaceworks Studio, we understand, however, that you may have a brand font or some other font that seems like a better fit for your site that Squarespace doesn’t have listed. When this happens, what you need to do is to upload a custom font to your Squarespace 7.1 site. Luckily, it is not as difficult as it sounds. This guide takes you through everything you will need; from where to find custom fonts, how to choose one, how to style those font, and how to apply them across your site.
Prefer a Video Tutorial?
In this video, our Founder covers how to upload and use a custom font in your Squarespace 7.1 website. Whether you've got a brand-specific font or are just looking for more variety than what Squarespace offers, we run through: how to convert a font to a web-safe format, uploading your font to Squarespace and basic implementation via CSS code.
Code Snippet
@font-face {
font-family: "Custom Font";
src: url("{YOUR-FONT-URL}.woff2") format("woff2"),
url("{YOUR-FONT-URL}.woff") format("woff");
}Prefer to read instead?
Some Preliminary Info
Finding A Font: What to Consider
Before you upload a font to Squarespace, you must have chosen one. This choice is as important as every other choice you make for your website because it either decides or fits into the tone of your brand. It is also a huge determinant of how long customers will spend on your site, whether they'll enjoy their time there, and if they'll come back.
Here are a few things to consider when choosing a font for your website:
Your Brand: This is first and most important because choosing things like style and colour for your brand website is like solving a puzzle and everything has to slip perfectly into place. Consider the colour, logo, style, and message of your brand before choosing a font. When you do, make sure it's a perfect fit with every other element on your site.
Readability: Style is one thing, functionality is another thing. However, when it comes to choosing a font for your site, both of these factors must come hand in hand. If you choose a stylish font that is not readable, you are doing your users and—as a consequence—your brand, a great disservice. Make sure the font you pick is readable across your target devices. This cannot be overemphasized.
Complement Fonts: Unless you plan to use one font throughout your site, which isn't always advisable, you must consider how your custom font fits with other fonts on your site. Beware that too many fonts can become overwhelming for your visitors.
Where to Find Unique Fonts
To purchase a font, you need to license it from a type foundry. There are many of these foundries worldwide and it is impossible to list them all but below is a list of five foundries you can start with.
You can also get custom font files from global marketplaces like Etsy and Envato.
Licensing A Font
This is a fancy way of saying you are purchasing the rights to use a font type, usually from an independent type design studio. There is often a formal agreement which details the rights of use, period of license, and number of users, among other terms. These terms vary depending on the studio and the font.
If you plan to only use the font for your Squarespace site, a Web License is enough. However, if you intend to make it your brand's official font, it is best to purchase both a Web and Desktop License.
You must also remember to collect the right font file. Squarespace 7.1, for instance, only allows font files that end with the type OTF, .TFF, or .WOFF.
WOFF (Web Open Font Format) is a modern format used specifically for the web. It is usually smaller in size and thus faster to load than TrueType (.ttf) and OpenType (.otf) of which it is a compressed version.
The type of web browser you use will determine the type of file that you will upload. Modern web browsers like Chrome naturally support modern formats like WOFF while traditional browsers do the same for traditional formats. To be safe, get both files. Alternatively, you can convert the WOFF type into another format using a conversion tool.
How to Add Your Custom Font to Squarespace 7.1
Once you have the perfect font for your brand in a suitable format for Squarespace 7.1, you are ready to follow these easy steps to add the font to your website.
Step 1: Upload
To upload, open the Squarespace dashboard in your browser and navigate to your site. Click Pages, then scroll down to Website Tools, and finally click Custom CSS.
In your Custom CSS tab, you will find ‘Custom Files’ which give you options to Add Images or Fonts. This is where you will upload your font file.
Remember to always get your fonts from a legal site and to have them licensed. Also, ensure that your font files end with .OTF, .TFF, or .WOFF, otherwise, it will not work. Lastly, don't try to upload the font files in bulk as this won't work either, you can only add them one after the other.
Step 2: Add CSS
This step alerts Squarespace of the new addition and allows you to use the font on your site. For this, you will have to input the following code in the custom CSS editor:
@font-face {
font-family: FONTNAME;
src: url();
}
The font name doesn't have to be the name of the file you uploaded but it is advisable to use it for easy recall. The font name is the name you want to refer to the custom font by. So, replace FONTNAME with your desired name and ensure it's a name you won't forget because you will need it for the remaining steps.
You will then add a URL. Whenever you upload a file onto Squarespace, it automatically generates a URL for it, and this is what you want to add in. You can easily do this by clicking in between the brackets and then choosing your font from the Manage Custom File option. This automatically adds the URL into the bracket.
By the time you're done typing in your code for step 2, you should have something that looks like this:
@font-face {
font-family: Times;
src: url(https://sugar.squarespace.com/393jfk.ett);
}
Step 3: Where to Use Font
This step involves telling Squarespace where you want to apply your new font. Squarespace 7.1 offers seven Headings and Paragraphs you can apply your custom font to. These are:
Heading 1: h1
Heading 2: h2
Heading 3: h3
Heading 4: h4
Paragraph 1: .sqsrte-large
Paragraph 2: p
Paragraph 3: .sqsrte-small
To apply this, input the following code in your CSS box:
WHEREYOUWANTTOUSEFONT {
font-family: 'FONTNAME';
}
You will then replace WHEREYOUWANTTOUSEFONT with any of the headings or paragraphs above.
When you are done, it should look like this:
h1 {
font-family: 'Times';
}
If you want to apply the font to more than one heading or paragraph, separate the headings by commas as in h1, h2, h3.
After this step, you have successfully added and applied a custom font to Squarespace 7.1.
Styling Your Custom Font
What if you want to style your font? There are several ways you can make your custom font unique. Some of them are listed below:
Animation: As the name suggests, this makes your fonts more lively and fun for visitors to your website. Fonts that move one way or the other are bound to captivate your audience. Just remember not to overdo it.
Text Reveal: This is almost like an animation except that the text doesn't appear until your user hovers over it. It is another exciting way of engaging your visitors. It keeps them intrigued and willing to come back.
Rotation: This is an interesting way of making your site unconventional. A vertical text, for instance, if used with the right front will introduce your visitors to a new dimension and carve out your site as different from the rest.
Opacity: This can be used to achieve elegance, minimalism, subtlety, or hierarchy. Display your uniqueness by using texts that are very bold to those with more subtle levels of opacity. This highlights the importance of various texts or emphasizes the order in which they should be attended to.
Highlight: A line of text marked with a different color as though highlighted in a notebook can bring a level of casualness that makes your visitors feel at home. It can also be used for a playful touch or emphasis.
Gradient: This is all about colour. If applied with tact, it is a creative and attractive way of adding sparkle to your website.
Many of these text effects and more can be achieved with advanced code customizations. As official Squarespace Developers in the United States, Spaceworks Studio will be happy to have a chat with you about what you have in mind.
Typography Tips and How to Style
This section guides you through the creation of different effects using Squarespace font settings to give your text more flair.
Colour
To change the colour of a text group as in a paragraph or heading, take the following steps:
Open Site Styles and go to Colors.
Open the colour theme for the heading or paragraph you want to edit.
Click the colour tweak for that text group and select a new colour.
To change the colour of a text block:
Open the page with the text block and click edit, then click inside the block.
Next, highlight the text you want to alter, this may be a group of words, a single word, or a single letter.
You can then choose a new colour from the colour icon in the text toolbar.
Click Save to keep your changes or exit and click Save to close the editor.
Line Height
To change the line height:
Open the page you want to edit; click Paintbrush then click Fonts
Under Global Font Styles, select the text type you want to edit i.e. Headings, Paragraphs, Buttons, or Miscellaneous
You can either use the Line Height Slider to change the height or simply input a new em value if you have a specific height in mind.
Click Save to keep your changes or exit and click Save to close the editor.
Size
To change the size of a text:
Go to the fonts panel and click a font pack.
Select a base size relative to which all other fonts will be scaled.
Alternatively, click Assign Styles to change the font size for a particular text area.
Weight
Text weight is often important as a form of delineation of hierarchy. To change your text weight:
Open the page you want to edit, click Paintbrush, then click Font.
After that, you will find Global Font Styles under which you will select which text type you want to change i.e. Headings, Paragraphs, Buttons, or Miscellaneous.
You will find a drop-down menu from which you can choose a weight option.
Click Save to keep your changes or exit and click Save to close the editor.
In Conclusion
Importing a custom font to Squarespace 7.1 can be a little yet important bit that contributes to your site’s success. Thankfully, using this step-by-step guide, you can now do that without breaking a sweat. You are, also, privy to sites where you can license fonts and styling tips that can help you make the best of your website. Hopefully, with some more practice and experimentation, you are can be better equipped to create unique typography that will keep your customers coming back to your website!
