Typography
Typography allows setting the font elements such as font, font size, and alignment of texts for the site.
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Click Theme Settings -> Typography.
Selecting a different font can affect the speed of your store. Learn more about system fonts.
How to setup Google Font?
You can use hundreds of free, open-source fonts available through Google Fonts.
Search font.
Copy name of font which you choose.
Paste text which you have copied to "Font Name" Textbox in Font Name Settings.
How to setup Shopify Font?
Shopify's font library is a collection of fonts that includes system fonts, a selection of Google fonts, and licensed fonts from Monotype. These fonts are free to use on all Shopify online stores, and are provided in both WOFF and WOFF2 formats.
Font And Text Typography Settings
| Setting | Description |
|---|---|
Select Font Type | Select which font family (#1 or #2) to apply on heading, titles. |
Font Size | Set the font size to apply on heading, titles ranging from 10px to 100px. |
Font Weight | Set the font weight to apply on heading, titles. |
Font Style | Turn the heading, titles to be either normal, capitalize, uppercase or lowercase. |
Text Transform | Set the font style on heading, titles to be either normal, italic or oblique. |
Line Height | Set the line height to apply on heading, titles. |
Letter Spacing | Set the spacing between letters to apply on heading, titles. |
Border Height | Set the height of border ( underline ) of heading, titles. |
Button Settings
| Setting | Description |
|---|---|
Border Radius | Round the corners of buttons on the range between 0px to 30px. |
Border Width | Determines the thickness of buttons' borders. The range is from 0 to 30px. |
Border Style | Select the style for buttons' borders to be either solid, dotted or dashed. |
Text Align | Align button text to the left, to the right or center. |
Padding Top | Determines the spacing between button text and its top border. |
Padding Bottom | Determines the spacing between button text and its bottom border. |
Box Shadow - Horizontal Length | Determines how many pixels the box shadow falls horizontally. |
Box Shadow - Vertical Length | Determines how many pixels the box shadow falls vertically. |
Box Shadow / Blur Radius | Determines how blur the shadow is. |
Box Shadow - Spread | Determines how far the shadow keeps its original thickness from its origin. |
Box Shadow - Background Box Shadow | Set the color of the shadow. |
Box Shadow - Background Hover Box Shadow | Set the color of the shadow when button is hovered. |
Opacity | Fill in the desired transparency of the box shadow. |
Inset | Select whether the shadow will fall inside of button if YES or outside of button if NO. |
Last updated
