There are two ways to change the header font in Squarespace. The first way is to use the Site Styles Editor. To do this, go to Design > Site Styles.
In the Site Styles Editor, you will see a list of options on the right side. Click on “Fonts.”
NOTE: The Site Styles Editor in Squarespace is a built-in tool that allows you to customize the visual appearance and style of your website. It provides a user-friendly interface where you can modify various design elements, such as fonts, colors, spacing, layout, and more, without the need for writing code.
In the Font Settings window, scroll down to the Global Text Styles section and select the “Assign Styles” option.
In the Assign Styles window, go to the Header section and select the part of the header that you want to change the font style.
From here, you can change the font, size, and other properties of your header text. Make sure that the Style section is set to “Custom.” You can then use the Page Editor panel on the left as a reference while adjusting the fonts of your header.
Once done, click on the “Save” button at the upper left corner of the Page Editor to save your changes to the header’s fonts.
The second way to change the header font is to use custom CSS. To do this, go to Design > Custom CSS.
This will open the Custom CSS panel where you can input your CSS code for changing the fonts of your header elements.
NOTE: The Custom CSS panel in Squarespace allows you to apply custom CSS code to your website, giving you more advanced control over the design and styling. It can also be used to override the default font styles provided by your Squarespace template.
In the Custom CSS editor, you can add your own CSS code. For example, you can add the following code to change the header font:
.header-title-text {
font-family: “Courier New”, sans-serif;
font-size: 29px;
}
NOTE: The CSS selector for your header may vary based on your Squarespace template and header structure. Use your browser’s developer tools to inspect the HTML structure of your website and identify the correct CSS selector for the header element you wish to modify.
Once you’re done modifying the fonts of your header, simply click on the “Save” button at the top to save your changes.
PRO TIP: Remember to choose fonts that are web-safe and widely available to ensure consistency across different devices and browsers. Additionally, test the changes on multiple screen sizes and devices to ensure the font style appears as intended.
Both of these methods will allow you to change the header font in Squarespace. Experiment with different fonts and properties until you find a style that you like.
3 Related Question Answers Found
There are many ways to change the header design in Squarespace. One way is to use the built-in header design options. To do this, go to Design > Header and choose from the available options.
There are many ways to change the header button in Squarespace. One way is to use the ‘Site Header Editor‘. This can be accessed using the button at the top of the Page Editor.
There are many ways to change the header background in Squarespace. You can use a custom CSS code, or you can use the Header Background option in the Design panel. If you want to use a custom CSS code, you will need to add the following code to your CSS file:
.header-image {
background-image: url(“your-image-url”);
}
Replace “your-image-url” with the URL of the image you want to use.
