Typography
Last updated
Last updated
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.
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.
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
Button Setting
| Setting | Description |
|---|---|
| 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.
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.
