Method to Switch Font Pack in Squarespace
Here you will also learn how ‘Font Packs’ work in Squarespace.
Please note that ‘Font Packs’ are perfect font pairs professionally selected by expert template designers of Squarespace. When you change a font pack in Squarespace, one or multiple fonts in the pack, automatically apply to all text types including headings, paragraphs, buttons. The change also applies to throughout your website – not just the current page.
Under Fonts panel, current font pack is displayed. Click ‘SWITCH’ button to see list of font packs and select any font pack to apply on your website.
Difference Between Three Lists of Font packs
Squarespace provides you three lists of sorted font packs:
Sans-serif
Serif
Mixed
In Serif list, each font pack includes serif fonts and in Sans-Serif list, each font pack includes all sans-serif fonts. It means that if you have selected a font pack from serif list, all text types (such as for headings, paragraphs) will appear in some serif font.
In Mixed list, each font pack includes both serif and sans-serif fonts. For example, mixed font pack may include a serif font for headings and buttons while a sans-serif font for paragraph text.
Difference Between Serif and Sans-Serif Fonts
Serif fonts are stylish and traditional whereas sans-serif fonts are smooth and modern. Each letter of a Serif font has some small projection of decorative lines or strokes at the top, middle and tale of a letter. The meaning of Sans is ‘Without’ - thus sans-serif fonts are simple, without any decorative tail-points. Sans-serif fonts can be further classified into grotesque, humanist, and geometric fonts.
For example, if I select Adobe Caslon Pro font pack, its main Adobe Caslon Pro font with decorative strokes - which is a Serif font - applies to Headings and Miscellaneous category. Helvetica Neue, which is a Sans-Serif font in this pack, applies to paragraphs and buttons. In preview, you can see that same fonts in the pack are applied to respective text elements.
Pro Tip: Some website designers prefer Serif fonts for headings due to their better visibility in larger weights and Sans-serif fonts for paragraphs due to their simplicity and better readability. However, I am not in favor of using multiple fonts on a webpage.
What is Recommended Number of Fonts in a Font Pack on Squarespace?
Most fonts packs in Squarespace include two font families, for text all over website. However, some font packs consist of only one and same font for headings, paragraphs, buttons, and miscellaneous category. For example, ITC Avant Garde Gothic Pro (mixed list), Kepler std, Work Sans and Halyard Display packs only include one font.
On the other hand, some Font Packs consist of three font families such as Teimer Web and IBM Plex Mono.
In my opinion, at the maximum, you should not use more than three fonts for the whole website. You can consult another Dozro article to know the reason behind using only one font on Dozro website.
Please note that according to Google Fonts, requesting multiple fonts allows you to use all of those fonts in your page. But don't go overboard; most pages don't need very many fonts, and requesting a lot of fonts may make your pages slow to load. [RD]
Tips & Interesting Facts about Font Packs in Squarespace
Font pack is, in effect, a combination of fonts which applies to all over website including texts for headings, paragraphs, buttons, as well as elements in miscellaneous category such as quotes.
In list of font packs, the name of one font is visible and it applies mostly to headings. The name of other second font in the pack only becomes visible when you go back to Fonts panel. You can see name of font next to type of text such as headings, paragraphs, buttons or miscellaneous.
Some font packs, automatically change base size of website. We will discuss it in next section.
List of font packs and font families is same in all templates of Squarespace
Selection of a different font pack, automatically changes font values, such as, font weight, text size, letter spacing or line height of all text on website
Effect of Changing Fonts on the Value of Text Size
If you switch to a different Font Pack on Fonts panel, it will automatically change the numerical values of text size of all types of headings, paragraphs, button text, line height, letter spacing etc. for best fit and display of text on page.
However, if you apply specific font family for a category (such as headings, paragraphs, buttons, miscellaneous) from a category panel (under Global Text Styles), it will not change size values of line height, letter spacing, three types of paragraphs, four types of headings, miscellaneous and button text. In such case, you should manually adjust the size value for each type of text. Because some fonts - such as Cookie and Lancelot - decrease text size too much, while some fonts - such as Alfa Slab One, Tuscan - abnormally increase size of text for headings or paragraphs. Therefore, after application of a font to a specific text, you should review and adjust text size values of all text types such as heading 1, heading 4, paragraph 1, paragraph 3, line height, button text.
More Resources
These resources might help you learn more.
Squarespace Assign Styles – Apply Custom Font Style to a Page or a Text Element.
Squarespace Method to Apply Custom Specific Font to Site Title, Navigation Menu and Header Button Text, Blog, Store Page.
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.
