System updates

We’re experiencing issues that may affect your Square services. We’ll continue to update our status page with more information.

Home>Site Design and Content

Choose Fonts for Your Square Online Site

Square-Online-Site-Design-Fonts-EN

Our design tools help simplify the task of choosing fonts for your website in the Square Online site editor. Each of the curated typefaces are designed to look great together and ensure that your text is reader-friendly on any screen.

Learn more about designing and customising your Square Online site for more information on all of your site design options. To customise multiple design elements at once, learn more about choosing styles for your Square Online site.

Note: Web accessibility is an important aspect of designing a website that’s accessible to as many people as possible, particularly those with disabilities or impairments. Learn more about web accessibility for Square Online sites.

Customise Site Fonts

To start customising site fonts:

  1. From your Square Online site editor, select Site design.

  2. Select Fonts to choose a pair of fonts that’ll be used for your Headlines (primary font) and Paragraphs (secondary font).

  3. Choose a Type scale and Base font size by adjusting the scales as needed.

  4. Choose your ‘Global font styles’ for Headlines, Titles, Paragraphs and Labels as needed.

Any font colour selections will be applied to your website and checkout page, but the font style will only be applied to your site (not checkout) for legibility purposes. Learn more about your checkout options with Square Online.

Choose a Site Font Pair

When customising your fonts, start by choosing a pair of fonts that’ll be used for your Headlines (primary font) and Paragraphs (secondary font). Try different combinations to see what works best for your brand.

  • Headlines: Used in banners. These are always the primary font.

  • Paragraphs: Used wherever there are descriptions or text you add to your webpages. These are always the secondary font.

Choose a Font Type Scale

There are predefined type scales that have a range of sizes for all your font text styles. Moving the scale will change the ratio between Headline and Paragraph font sizes.

Choose a Base Font Size

Moving this scale will change the size of all text styles on the site. Text styles include:

  • Headlines: Used in banners. These are always the primary font.

  • Titles: Used as titles or taglines in most sections.

  • Paragraphs: Used wherever there are descriptions or text you put on your site pages. These are always the secondary font.

  • Labels: Used as subtitles and in commerce components.

Choose a Global Text Style

With global text styles, you can choose the fonts for all of your Headline, Title, Label and Paragraph text styles. These changes will affect all text on your site. The weight option will change how bold the text appears.

Choose Local Text Styles

With local text styles, you can apply most text styles to all text elements on your site. Choose a text style that’s best for each text element. The Label style isn’t selectable at the element level, but it does apply to specific elements such as the navigation menu and buttons.

To explore local text styles, start by selecting individual sections on your site and seeing your text style options in the editing panel.

Upload a Custom Font

Note: Using custom fonts requires an upgrade on your Square Online site.

To give your Square Online site a unique look, you can upload a font of your own to the editor to use throughout your webpages. To start:

  1. From your Square Online site editor, select Site design.

  2. Select Fonts to Add or manage fonts.

  3. In the pop-up window, upload your font file.

  4. Select Done when finished.

Note: The editor accepts WOFF, WOFF2, OTF and TTF font file types. Each file can be up to 10 MB.

Can't find what you need?