How to Add a Custom Font to Your Buttons with Custom CSS
In the realm of web design, where first impressions are often made in mere seconds, every element of your online presence should reflect your brand's uniqueness and identity. From your logo to your color palette, consistency is key to establishing a memorable and impactful brand. One often underestimated element in this equation is typography – the fonts you choose play a significant role in conveying your brand's tone and personality.
Imagine the power of extending your brand identity to even the tiniest details, such as buttons on your website. In this article, we're going to explore the art of customization by walking you through the process of seamlessly integrating your custom brand font into the buttons on your Squarespace website with custom CSS.
The buttons on your website aren't just functional; they're the pathways to engagement, conversions, and meaningful interactions with your audience. By incorporating your unique brand font into these buttons, you weave a thread of familiarity and cohesiveness throughout your website. Each click becomes an extension of your brand's narrative, reinforcing the connection between your audience and your message.
Add Your Custom Font
Already added your custom font? Jump down to CSS for adding the font to your buttons
Before you dive into the technical aspects, you need to select the custom font you want to use. Make sure it aligns with your brand's personality and complements your overall website design. You can find custom fonts from various online font marketplaces or use a font that you've licensed for your brand.
Upload the Custom Font
Once you've chosen your font, you'll need to upload it to your Squarespace website. Follow these steps:
Log in to your Squarespace account and click the Website tab
Navigate to the Website Tools > Custom CSS
Click the "Custom Files" drop and select your font files.
Make sure to include 3 different font files for your font you can generate web font files on Font Squirrel. The file types you need are .otf, .woff, .woff2. You may notice that the code works with only one of the file types but to make sure your font loads on all devices and all browsers add all three!
Once you have uploaded the font files, add this code. Replace the URLs with the URL of your uploaded font files. To generate the URL just click the font files in the Custom Files.
@font-face {
font-family: 'Font Name';
src: url(https://REPLACE.fontfile.otf),
url(https://REPLACE.fontfile.woff),
url(https://REPLACE.fontfile.woff2);
}
Add Your Font to Your Buttons
After adding your Custom font, add another little line of CSS to apply the custom font to your site buttons. In the custom CSS editor where you added your custom font, enter the following code, replacing YourCustomFont with the name of your custom font. This will apply to each of the 3 main button styles, Primary, Secondary, and Tertiary. If you want a different font for one or each of the styles, you can separate the code and add a different font family value for each of the styles. Each style div is separated by a comma. So the div you need for one style is #siteWrapper.site-wrapper .sqs-button-element—primary
#siteWrapper.site-wrapper .sqs-button-element--primary,
#siteWrapper.site-wrapper .sqs-button-element--secondary,
#siteWrapper.site-wrapper .sqs-button-element--tertiary{
font-family: YourCustomFont !important;
}Click "Save" to apply the changes.
Adjust Font Size and Styling if needed. You can further customize the font's appearance using the regular style settings. For example, you can adjust the font size, letter spacing, and button color.
When all said and done this is what your CSS box should look like. In my example, I used the font “Florentino”.
By adding a custom font to your buttons in Squarespace, you can infuse your website with a unique style that aligns perfectly with your brand. Remember that customizing your website's design through CSS requires careful attention to detail, so make sure to back up your site and proceed with caution. With a well-chosen custom font, your buttons will stand out and contribute to a cohesive and visually appealing web design.
Want to chat about your website? Book a call! I’m here to help.
