Typography
In the "Typography", you can apply font settings to headings, body, navigation menus, and buttons.
Body
Settings from the current group will be applied to all theme elements across the entire store if a specific font is not set in the "Headings", "Buttons", and "Menu" setting groups.
To reveal the "Assigned font" drop-down, apply the settings in the "First custom font - Third custom font". You can use two scenarios to configure fonts in your store:
"Shopify". Displays the Shopify Font library fonts.
"Custom fonts". Let you configure the custom fonts in the "First custom font - Third custom font" settings groups.
Scenario 1
By selecting the "Shopify" option, the following settings are available for configuration:
To use a different font, press the "Font" source selector and choose the desired font from the suggested list.
Enable the desired option to apply the font changes. Use a single parameter from the list:
Regular 400
Bold 700
Italic
Bold 700 Italic
Scenario 2
If you use one of the "Custom fonts" options, the following settings are available for configuration:
Use the "Weight and style" drop-down to control the visual appearance of text by adjusting its thickness and formatting characteristics.
The options described below are available in both scenarios:
Use the "Font size scale" to adjust the text size from 100% to 150% using five intermediate steps.
To apply additional font settings, tick the "Enable detailed settings" option.
Apply the space changes between lines from 30% to 200% using the "Line height scale" option.
Decide on the letter spacing using the "Letter spacing scale" specifying a value between 50% and 250%.
Headings
These settings apply to all headings in theme sections and blocks, page titles of the entire store, product titles on product pages, the sticky product "Add to cart", and the "Featured product" section.
Activate the "Load font" option to display the source selector and set a different font for headings.
To reveal the "Assigned font" drop-down, apply the settings in the "First custom font - Third custom font". You can use two scenarios to configure fonts in your store:
"Shopify". Displays the Shopify Font library fonts.
"Custom fonts". Let you configure the custom fonts in the "First custom font - Third custom font".
Scenario 1
By selecting the "Shopify" option, the following options are available for configuration:
To use a different font, press the "Font" source selector and choose the desired font from the suggested list.
Scenario 2
If you use one of the "Custom fonts" options, the following settings are available for configuration:
Use the "Weight and style" drop-down to control the visual appearance of text by adjusting its thickness and formatting characteristics.
The options described below are available in both scenarios:
Uppercase
Enable the option if you need to capitalize headings in the sections/blocks of the entire store.
In the "Font size scale", adjust the text size from 60% to 150% with five intermediate steps.
To apply additional font settings, tick the "Enable detailed settings" option.
Apply the space changes between lines from 30% to 200% using the "Line height scale" option.
Decide on the letter spacing using the "Letter spacing scale" specifying a value between 50% and 250%.
Turn on the "Customize all sizes" checkbox to display the additional settingsfor customizing tags across your entire store.
H1 size - H6 size
Use the provided pixel-based scale values to adjust the font sizes of the H1, H2, H3, H4, H5, and H6 headings.
H1 line height scale - H6 line height scale
Adjust the line spacing for each heading tag (H1, H2, H3, H4, H5, and H6) from 30% to 200% using the provided scales.
Buttons
The font you configure in this sub-section will be applied to all buttons in a store, except for the dynamic checkout buttons.
Use the "Load font" option to display a font family selector.
To reveal the "Assigned font" drop-down, apply the settings in the "First custom font - Third custom font". You can use two scenarios to configure fonts in your store:
"Shopify". Displays the Shopify Font library fonts.
"Custom fonts". Let you configure the custom fonts in the "First custom font - Third custom font".
Scenario 1
By selecting the "Shopify" option, the following options are available for configuration:
Specify a font family in the "Font" source selector.
Scenario 2
If you use one of the "Custom fonts" options, the following settings are available for configuration:
Use the "Weight and style" drop-down to control the visual appearance of text by adjusting its thickness and formatting characteristics.
The options described below are available in both scenarios:
Uppercase
Check the option to capitalize the button's text.
Use the "Font size scale" option to increase the text size from 60% to 150% in five incremental steps.
To apply additional font settings, tick the "Enable detailed settings" option.
Decide on the letter spacing using the "Letter spacing scale" specifying a value between 50% and 350%.
Menu
Turn on the "Load font" checkbox to display font family settings.
To reveal the "Assigned font" drop-down, apply the settings in the "First custom font - Third custom font". You can use two scenarios to configure fonts in your store:
"Shopify". Displays the Shopify Font library fonts.
"Custom fonts". Let you configure the custom fonts in the "First custom font - Third custom font".
Scenario 1
By selecting the "Shopify" option, the following options are available for configuration:
Specify a font family in the "Font" source selector.
Scenario 2
If you use one of the "Custom fonts" options, the following settings are available for configuration:
Use the "Weight and style" drop-down to control the visual appearance of text by adjusting its thickness and formatting characteristics.
The options described below are available in both scenarios:
Uppercase
Hit the checkbox to capitalize parent menu items in the Header.
Use the "Font size scale" option to increase the text size from 60% to 150% in five incremental steps.
To apply additional font settings, tick the "Enable detailed settings" option.
Decide on the letter spacing using the "Letter spacing scale" specifying a value between 50% and 250%.
First custom font - Third custom font
Note! These are advanced settings intended for developers.
In the "Source" selector, set one of the options:
"None". Disables custom fonts.
"Google fonts". This option links to Google fonts and reveals related options. The list of Google fonts can be checked here.
Use the "Link tags" input field to embed code.
Place the font family name in the corresponding "Font family" field.
Use the "Weight and style" drop-down to control the visual appearance of text by adjusting its thickness and formatting characteristics.
"External". Select the option to add your custom font family.
In the "CSS rule" input field, enter valid CSS rules to customize the appearance and behavior of the element beyond preset options. Check the recommendations in the following documentation.
The underlined lines can be substituted with the address of the downloaded font from "Files" in Shopify.
Place the font family name you added under "CSS rules" (@font-family) in the corresponding "Font family" field.
Example: "Open Sans".
Use the "Weight and style" drop-down to control the visual appearance of text by adjusting its thickness and formatting characteristics.
"Shopify". Set a desired font using the Shopify Font library in the "Font" selector.
The settings described below are available for all options.
In the "Target CSS classes" field, specify which CSS classes the font should be applied to. To apply a font to a specific element, find the desired element on the website and assign this class to it using the code editor.
To apply additional font settings, tick the "Enable detailed settings" option.
Use the "Font size" option to increase the text size from 10 to 60 pixels.
Apply the space changes between lines from 30% to 200% using the "Line height scale" option.
Decide on the letter spacing using the "Letter spacing scale" specifying a value between 50% and 250%.
Change the letters register by enabling the "Uppercase" option.
Last updated