There are two ways to change the font of a button in Squarespace. The first is to use the Fonts Library in the Site Styles Editor. The second is to use custom CSS.
To change the font using the Fonts Library, follow these steps:
1. Log in to your Squarespace account and open the Site Editor by clicking on the Edit button at the top of the Preview panel.
2. Go to the button that you want to change the font of and click on it, then select the pen icon from the options that will appear.
3. In the window that will appear, open the Design tab and click on the dropdown arrow.
4. Then, click on “Edit Button Styles” from the menu that will appear.
5. This will open the Site Styles panel. From there, you can adjust the text, shape, and outline of your buttons. To change the font style of your button, select the “Text” option.
6. Then, select the option corresponding to the font style settings of the button.
7. On the next page, click on “Browse All Fonts” to see all the available fonts in the Fonts Library.
8. In the Fonts Library, browse for the font style that you want to use for the button and select it. You can also use the search bar if you have a specific font style name in mind that you want to apply.
9. You will then see a preview of the changed button font style on your website. To save your changes, simply click on the “Save” button in the upper left corner of the screen.
To change the font using custom CSS, follow these steps:
1. Go to the Main Navigation section of the Pages panel, then hover your cursor over the page where the button that you want to edit is located, and click on the gear icon to open up the Page Settings window.
2. In the Page Settings window, select the “Advanced” option to open the Advanced Settings panel, where you can add your custom CSS. To do this, simply type in your custom CSS code in the Page Header Code Injection field.
3. For your reference, given below is the CSS code that you can use to change the font style of your button in Squarespace. Simply change “[Your Font Name]” into your preferred font style. Once done, click on the “Save” button to save your changes.
<style>
.sqs-block-button-element {font-family:[Your Font Name]!important;}
</style>
4. Refresh the page to see if the font change is already reflected in your button. And that’s it!
Conclusion
Changing the button font in Squarespace can be done in various ways, with custom CSS offering a precise and flexible method. Such customizations enhance the overall design and aesthetics of a website. However, it’s essential to ensure that these modifications remain user-friendly and consistent across all devices.
