A better way to install custom fonts on Squarespace
A Comprehensive Guide: Installing Custom Fonts on Squarespace
Introduction
When it comes to personalizing your Squarespace website, choosing the right font is crucial. Many fonts are available within Squarespace, but sometimes, you just need to use more custom fonts for your client. The right typeface does more than enhance aesthetics—it can profoundly influence user engagement and shape brand perception.
Recently, I've delved into a more effective method for installing custom fonts on Squarespace. This approach ensures that each font variation, such as Italic, Bold, and Bold-Italic, uses its specific original file. This is a significant improvement over the common practice of having the browser attempt to simulate these styles from a single regular font file, often leading to inconsistent and suboptimal rendering.
With the advent of web-compatible font formats like WOFF and WOFF2, integrating custom typography into your site is more accessible than ever. This guide will walk you through the nuances of font installation on Squarespace, ensuring that your text not only looks good but also performs optimally across various devices and browsers.
Before and After
Below is what your fonts will look like :
Before — with only one (regular text) font file uploaded
After — with all four font files (regular, oblique/italic, bold, bold-italic) uploaded and configured for each variation.
Check out the before-and-after images to see the big difference when you install font files for each style—bold, Italic, and Bold-Italic. By using the actual font files, your text looks exactly how the font designer intended it, not the often wonky versions that browsers try to create and emulate on their own.
Content of Tutorial
There are three main steps we’ll cover in this tutorial, as well as a few FAQ’ss:
Preparation
Upload and declare your fonts on Squarespace
Applying your fonts
FAQ: Installing and Using Custom Fonts on Squarespace
Preparation
Understanding Font Formats
Fonts come in several formats, each with its own strengths. While OTF (OpenType Font) and TTF (TrueType Font) are common for desktop applications, WOFF (Web Open Font Format) and its successor, WOFF2, are designed for the web. These formats offer compression and performance benefits critical for fast loading times, making them the ideal choice for online platforms like Squarespace.
Conversion Process
To begin, ensure you have the original font files for all necessary variations—regular, italic, bold, and bold italic. You'll need to convert each of these OTF or TTF files into WOFF and WOFF2 formats for web use. This can be achieved through free online conversion tools like Font Squirrel's Webfont Generator. Simply upload each font variant, adjust settings for optimal web performance, and download your web-ready font files.
Preparing Your Font Variations
Example of font files prepared for upload to Squarespace.
Variety in font weights and styles, like regular, italic, bold, and bold italic, allows for a dynamic range of expression. Before uploading to Squarespace, organize your font files, clearly labelling each variation (if they aren’t already) to avoid confusion during the CSS implementation phase.
Uploading and declaring your fonts
Uploading Fonts to Squarespace
Squarespace's custom file uploader makes adding your WOFF and WOFF2 files straightforward. Navigate to the 'Custom Files' section of your site settings and upload each font variation. Once uploaded, Squarespace will provide a unique URL for each file, which you will reference in your CSS.
CSS Declaration template for Custom Fonts
With your fonts uploaded, it's time to integrate them into your site using CSS. Here's a template for your custom font-face declarations:
@font-face {
font-family: 'YourCustomFontName';
src: url('URL_FOR_WOFF2') format('woff2'),
url('URL_FOR_WOFF') format('woff');
font-weight: FONT_WEIGHT;
font-style: FONT_STYLE;
}
Replace 'YourCustomFontName' with a name for your font, 'URL_FOR_WOFF2' and 'URL_FOR_WOFF' with the Squarespace-provided URLs, and specify the correct font-weight and style for each variation.
A complete example of this implementation
To integrate your fonts into your Squarespace site, you will use CSS `@font-face` rules. This allows you to declare each font variation, ensuring that browsers understand when to use each specific style and weight.
You will need to create four font declarations, one for each variation. The name of the font family is the same for all four declarations. Replace “CustomFont" with the family name of your font and copy this to all four declarations. Then, replace the URL with the correct URL for your uploaded font file.
Below is an example of how to set up regular, italic, bold, and bold italic variations:
@font-face {
font-family: 'CustomFont';
src: url('path/to/CustomFont-Regular.woff2') format('woff2'),
url('path/to/CustomFont-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'CustomFont';
src: url('path/to/CustomFont-Italic.woff2') format('woff2'),
url('path/to/CustomFont-Italic.woff') format('woff');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'CustomFont';
src: url('path/to/CustomFont-Bold.woff2') format('woff2'),
url('path/to/CustomFont-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'CustomFont';
src: url('path/to/CustomFont-BoldItalic.woff2') format('woff2'),
url('path/to/CustomFont-BoldItalic.woff') format('woff');
font-weight: bold;
font-style: italic;
}
Note: In CSS, the order of font formats matters because the browser will use the first format it recognizes. Placing WOFF2 before WOFF is strategic; WOFF2 offers better compression and efficiency, which improves load times and uses less bandwidth. Most modern browsers support WOFF2, ensuring optimal performance for the majority of users. If a browser doesn't support WOFF2, WOFF serves as a reliable fallback, maintaining compatibility across a wider range of browsers. This ordering ensures the use of the best available technology while providing support for older technologies where needed.
-
@font-face {
font-family: 'Salina Trial';
src: url('https://static1.squarespace.com/static/6569c18f12756f5e328bfe92/t/66184e0cf8a2306ba6be5a10/1712868876972/salina-trial-normal-webfont.woff2') format('woff2'),
url('https://static1.squarespace.com/static/6569c18f12756f5e328bfe92/t/66184e0c37f7fb75ba03f5bd/1712868876981/salina-trial-normal-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Salina Trial';
src: url('https://static1.squarespace.com/static/6569c18f12756f5e328bfe92/t/66184e0cf8a2306ba6be5a10/1712868876971/salina-trial-bold-webfont.woff2') format('woff2'),
url('https://static1.squarespace.com/static/6569c18f12756f5e328bfe92/t/66184e0c37f7fb75ba03f5bd/1712868876981/salina-trial-bold-webfont.woff') format('woff');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Salina Trial';
src: url('https://static1.squarespace.com/static/6569c18f12756f5e328bfe92/t/66184e0cca87c470165869d8/1712868876986/salina-trial-bolditalic-webfont.woff2') format('woff2'),
url('https://static1.squarespace.com/static/6569c18f12756f5e328bfe92/t/66184e0c6a7bba1b9858ee3b/1712868876987/salina-trial-bolditalic-webfont.woff') format('woff');
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: 'Salina Trial';
src: url('https://static1.squarespace.com/static/6569c18f12756f5e328bfe92/t/6618504ced5ece79e3ec2b82/1712869452251/salina-trial-regularitalic-webfont.woff2') format('woff2'),
url('https://static1.squarespace.com/static/6569c18f12756f5e328bfe92/t/6618504c47b6a96f101a19af/1712869452310/salina-trial-regularitalic-webfont.woff') format('woff');
font-weight: normal;
font-style: italic;
}
Applying your fonts
Applying the Fonts in Your CSS
Once the fonts are declared, you can apply them to specific elements or throughout your site using CSS. Here’s how you can specify different weights and styles in your CSS:
body {
font-family: 'CustomFont', sans-serif;
}
h1, h2, h3 {
font-family: 'CustomFont', sans-serif;
font-weight: bold; /* Applies the bold font */
}
p, .sqsrte-large, .sqsrte-small{
font-family: 'CustomFont', sans-serif;
}
i, em {
font-style: italic; /* Applies the italic font */
}
b, strong {
font-weight: bold; /* Ensures bold text is rendered with the bold font */
}
b i, strong em {
font-weight: bold;
font-style: italic; /* Ensures bold italic text is rendered correctly */
}
Note: don’t forget to replace ‘CustomFont’ with the actual name of your font. The first three tell it where to apply you custom font while the last three are there to ensure the correct style is applied and should be included as is regardless of any design choices. This is only an example and you can alter this to your design requirements.
Supporting Deprecated HTML Tags
While modern HTML and CSS practices favor the use of `<em>` for italicized text and `<strong>` for bold, some older websites or content might still use the deprecated `<i>` and `<b>` tags. It's a good idea to ensure these are styled correctly to maintain consistency across your site. You can add CSS rules specifically for these tags, as I have done in the code above.
With these rules in place, even if your content uses older HTML tags, your fonts will render with the correct styles:
<!-- Example HTML Code -->
<p>This is <em>italic</em> and <i>also italic</i>.</p>
<p>This is <strong>bold</strong> and <b>also bold</b>.</p>
<p>This is <strong><em>bold italic</em></strong> and <b><i>also bold italic</i></b>.</p>
This is italic and also italic.
This is bold and also bold.
This is bold italic and also bold italic.
This ensures that all text, regardless of how it's marked up, will display consistently, enhancing the visual harmony and readability of your site. Including these modifications ensures that your code caters to a broader range of scenarios that users might encounter, especially when dealing with legacy content or transitioning from older templates to new ones.
Testing and Troubleshooting
After implementing your fonts, thoroughly test them across different browsers and devices to ensure they load correctly. If you encounter any issues, double-check your CSS declarations and file URLs. Font rendering issues can also be attributed to browser-specific quirks, so consider consulting browser documentation for additional workarounds.
Best Practices and Tips
While custom fonts are exciting, they must be used judiciously. Always prioritize readability and accessibility, and be mindful of load times, especially if using multiple font variations. Select fonts that align with your brand identity and are legible across all devices.
Conclusion
Installing custom fonts can transform your Squarespace site from good to great, reflecting your unique brand voice and enhancing user experience. With this guide, you have all the tools to do it efficiently and effectively.
FAQ: Installing and Using Custom Fonts on Squarespace
-
WOFF (Web Open Font Format) and WOFF2 are web font formats that are compressed and optimized for use on the web. WOFF2 offers improved compression and faster load times compared to WOFF, making it the preferred choice for enhancing website performance. Using these formats ensures that your website loads quickly while maintaining the visual quality of your fonts.
-
To convert OTF (OpenType Font) or TTF (TrueType Font) files to WOFF or WOFF2, you can use online tools like FontSquirrel's Webfont Generator, which allows for easy conversion and provides settings to adjust for optimal web performance. Once converted, these fonts can be uploaded to Squarespace for use on your website.
-
To ensure proper use of bold and italic styles in Squarespace, define separate @font-face rules for each style and weight of your font. This involves specifying the font-family, src (source files for WOFF and WOFF2), font-weight, and font-style in your CSS. This setup prevents browsers from synthetically generating these styles, which can lead to inconsistencies and lower quality.
-
If your custom font isn't displaying correctly across all browsers, check if you've correctly set up the @font-face rules and included all necessary font formats (WOFF2 and WOFF) to cover various browser compatibilities. Also, ensure that the font files are correctly uploaded to your site and referenced in your CSS. Browser cache issues can also affect how fonts are displayed, so clearing the cache might resolve some issues.
Transform Your Digital Identity with Contigo Studio:
Dennis Pal
Web Desinger
Have you tried installing custom fonts on your Squarespace site?
Interested in customizing your Squarespace site with unique fonts? If you have questions or need personalized Squarespace design services, don’t hesitate to contact us. I am eager to help you bring your vision to life. Explore our portfolio to see what we can do!
