Choosing the right fonts for your website

Selecting the right fonts for your website is an essential aspect of building a cohesive and impactful online presence that aligns with your brand. Fonts play a crucial role in conveying the personality, tone, and values of your business. They can evoke emotions, communicate professionalism, and establish brand recognition.

By carefully choosing fonts that reflect your brand's identity, you create a visual language that resonates with your target audience. Whether you opt for serif, sans-serif, or decorative fonts, it's important to consider factors such as readability, hierarchy, and compatibility across devices to ensure a seamless user experience.

Ultimately, the right fonts can elevate your website design, establish trust, and leave a lasting impression on visitors, making it an indispensable element in showcasing your brand's unique character.

Working with fonts in Squarespace 7.1

Squarespace provides a handy Site Styles feature where you can quickly and easily change or update your website fonts. Navigate to DESIGN -> SITE STYLES to open up the panel for editing.

From there, click on FONTS, which will access the panel where you can customize and change the fonts on your website.

There are a couple of ways to change your website fonts, and luckily Squarespace has made it pretty simple.

1. Select a pre-built Squarespace website font pack

Within the Fonts panel, click on SWITCH to view the various font packs that are available directly within your Squarespace website:

• Sans-serif: A sans-serif font refers to a typeface that does not have small decorative lines or strokes at the ends of its letters. Sans-serif fonts are known for their clean, modern, and minimalist appearance.

• Serif: A serif font is a typeface that is characterized by the presence of small decorative strokes or "serifs" at the ends of the letterforms. These serifs provide extra detailing and embellishments, giving serif fonts a more traditional, sophisticated, and elegant appearance. Their timeless appeal and legibility make serif fonts a popular choice for websites seeking to convey a sense of tradition and professionalism.

• Mixed: The “mixed” font packs will be a combination of the two font types mentioned above.

By selecting one of these font packs, your entire website will be updated with the chosen fonts and applied to the headings, paragraphs, buttons, etc.

All headings and paragraph text will auto-update with the newly selected fonts. It’s a good idea to run through your website and check your font sizing and spacing thoroughly, since changing fonts can greatly affect your website pages’ layouts.

2. Manually change website fonts for the global text styles in Squarespace

• Change the headings font: Select Headings under the Global Text Styles and choose a font family. Click on BROWSE ALL FONTS to see an extensive selection of available fonts within Squarespace.

  You can also edit the headings font size, weight, line height, and letter spacing. There are four Heading sizes that you can edit (h1, h2, h3, h4). Keep in mind any changes made here affect all the headers within your website.

• Change the paragraphs font: The same method applies here as mentioned above. Select Paragraphs under the Global Text Styles and choose a font family. Click on BROWSE ALL FONTS to see an extensive selection of available fonts within Squarespace.

  You can also edit the paragraph font size, weight, line height, and letter spacing. There are three Paragraph sizes that you can edit (p1, p2, p3). Keep in mind any changes made here affect all the paragraphs within your website.

  
  

• Change the buttons font: There is also the option to edit the font for your website buttons. Select Buttons under the Global Text Styles and choose a font family. Click on BROWSE ALL FONTS to see an extensive selection of available fonts within Squarespace.

  You can also edit the paragraph font size, weight, line height, and letter spacing. There are three Button styles that can be individually edited (primary, secondary, and tertiary).

• Change the miscellaneous fonts: The Miscellaneous category applies to most text that's not a heading or regular paragraph text, like product prices, tags, menu block navigation, and other content metadata. Font changes made here will affect all miscellaneous styles on your website.

3. Upload custom brand fonts to your Squarespace website

If your brand fonts aren't currently available within the font options provided by Squarespace, it's possible to add them using CSS. This requires a bit more time and some basic CSS knowledge.

⚡️ How to use custom fonts on your website in Squarespace 7.1

⚡️ How to use two different fonts in one Squarespace heading

💡 PRO TIP: It’s best practice to stick to no more than two different font styles on your website. A third font style is acceptable if used minimally.