Squarespace Method to Apply Custom Font to Site Title, Menu, Header Button, Blog, Store Page
In Squarespace website, under Assign Styles panel, you can customize font styles for site header that will not affect font styles on other areas of website. You see four header tweak entries namely, Site Title, Mobile Site Title, Site navigation and Header Button.
Settings Location: Select Edit on top of preview page and then click ‘Paint Brush’ icon on the top right side in Squarespace to open Site Styles, and select Fonts.
Site Title
If you click Site Title, you can apply any options among heading 1, heading 2, heading 3, heading 4 or you can click on custom to apply custom settings for Site Title. Any customizations in Site Title will apply to only desktop site.
If you change any tweak in Mobile Site Title, it will apply ONLY to mobile version of your Squarespace site. For example, you can apply different sizes for site titles on desktop and mobile sites.
Site Navigation Menu
In the same manner, you can customize Site Navigation. You can apply any of three types of paragraphs that will change the size of fonts for site navigation. You can also use slider to increase or decrease the size of text for navigation. If you click Custom, you can set some different font for site navigation text. In custom settings, you can set weight, letter spacing, line height, capitalizations, and size of site navigation text.
Header Button
Similarly, you can customize header button and these changes will NOT affect all other buttons on your website. You can choose among small, medium, and large button options. By selecting ‘Custom’ you can also apply some different font and text styles to button text. You can manually adjust size of header button or use custom settings for button. Size changes in button do not affect size of button in header of mobile site, where it follows default button size.
Custom Font for Only Blog or Store page
As we explored font styles for Site Header, similarly, you can also customize font sizes and styles for blog page (blog posts collection page), blog post page, store page, store product page, quotes, forms, newsletter, and text of restaurant menu block.
Important Tip
Please remember that any change in Assign Styles will apply to all over website but to same type of text. For example, any tweak on blog post will apply to all blog posts and any tweak to a form in Assign Styles, will apply to all similar forms on website and any tweak to a store product detail page will automatically apply to all product detail pages.
However, there are some limitations. For example, you can apply a custom font for the title (and meta, author name) of blog post but not to the paragraphs through Assign Styles option.
I must reiterate that you should avoid applying too many fonts on website in SEO perspective.
More Resources
These resources might help you learn more.
Squarespace Assign Styles – Apply Custom Font Style to a Page or a Text Element.
Method to Switch Font Pack in Squarespace.
Base Size in Squarespace Font Settings | Pro Tips.
Global Text Styles in Squarespace – Method to Apply a Different Font to a Specific Text.
Method to Change Headings Font to in Squarespace.
Method to Change Size of Squarespace Paragraph, Heading and Button Text.
Squarespace Micro Font Settings Tips – Family, Weight, Style, Line Height, Letter Spacing, Text Transform.
Should You Change the Default Font of Squarespace Template or not?
Squarespace 7.1 Fonts – Important Font Tips and Facts.
Easy methods of changing colors on Squarespace website.
Check Dozro Services to build a Squarespace website for you.
You may also visit Home Page of this website. Email us for any feedback or suggestions to improve this article.
