Choose Fonts for Your Square Online Site
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 customizing your Square Online site for more information on all of your site design options. To customize 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.
Customize Site Fonts
To start customizing site fonts:
From your Square Online site editor, select Site design.
Select Fonts to choose a pair of fonts that’ll be used for your Headlines (primary font) and Paragraphs (secondary font).
Choose a Type scale and Base font size by adjusting the scales as needed.
Choose your “Global font styles” for Headlines, Titles, Paragraphs, and Labels as needed.
Any font color 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 customizing 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:
From your Square Online site editor, select Site design.
Select Fonts to Add or manage fonts.
In the popup window, upload your font file.
Select Done when finished.
Note: The editor accepts WOFF, WOFF2, OTF, and TTF font file types. Each file can be up to 10MB.