Ctrlk
For the complete documentation index, see llms.txt. This page is also available as Markdown.

Typography

In the "Typography", you can apply font settings to headings, body, navigation menus, and buttons.

The "Headings", "Buttons", and "Menu" subsections provide the following settings:

Load assigned font Display the source selector and set a different font for headings.

Assigned font Apply the settings in the "First custom font - Third custom font". Use two scenarios to configure fonts in your store:

Scenario 1

By selecting the "Shopify" option, the following options are available for configuration:

Font To use a different font, press the source selector and choose the desired one from the suggested list.

Scenario 2

If you use one of the "Custom fonts" options, the following settings are available for configuration:

Weight and style Use the drop-down to control the visual appearance of text by adjusting its thickness and formatting characteristics.

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.

Assigned font Apply the settings in the "First custom font - Third custom font". Use two scenarios to configure fonts in your store:

Scenario 1

By selecting the "Shopify" option, the following settings are available for configuration:

Font To use a different font, press the source selector and choose the desired one 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:

Weight and style Use the 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:

Font size scale Adjust the text size from 60% to 130% using five intermediate steps.

Show detailed settings Tick the option to show additional font settings.

Line height scale Change the line spacing between 30% and 200%.

Letter spacing scale Determine the letter spacing using a scale ranging from 50% to 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 panel, and the "Featured product" section.

The options described below are available in both scenarios:

Uppercase Capitalize headings in the sections and blocks of the entire store.

Font size scale Adjust the text size from 60% to 150% with five intermediate steps.

Show detailed settings Tick the option to show additional font settings.

Line height scale Change the line spacing between 30% and 200%.

Letter spacing scale Determine the letter spacing using a scale ranging from 50% to 250%.

Customize all sizes Turn on the option to display the additional settings for 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 is applied to all buttons in a store, except for the accelerated checkout buttons.

The options described below are available in both scenarios:

Uppercase Enable the option to capitalize the button's text.

Font size scale Increase the text size from 60% to 150% in five incremental steps.

Show detailed settings Tick the option to show additional font settings.

Letter spacing scale Determine the letter spacing using a scale ranging from 50% to 350%.

Menu

The options described below are available in both scenarios:

Uppercase Enable the option to capitalize the button's text.

Font size scale Increase the text size from 60% to 150% in five incremental steps.

Show detailed settings Tick the option to show additional font settings.

Letter spacing scale Determine the letter spacing using a scale ranging from 50% to 250%.

First custom font - Third custom font

Note! These are advanced settings intended for developers.

Source 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.

Font link tags Use the input field to embed code.

Font family Place the font family name in the field.

Weight and style Use the 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.

CSS rule 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.

Font family Paste the font family name you added under "CSS rules" (@font-family).

Example: "Open Sans".

Weight and style Use the drop-down to control the visual appearance of text by adjusting its thickness and formatting characteristics.

The settings described below are available for all options.

Target CSS classes Specify which CSS classes the font should be applied to. To assign a font to a specific element, find the desired element on the website and assign this class to it using the code editor.

Show detailed settings Tick the option to show additional font settings.

Font size Use the scale to adjust the text size from 10 to 60 pixels.

Line height scale Change the line spacing between 30% and 200%.

Letter spacing scale Determine the letter spacing using a scale ranging from 50% to 250%.

Uppercase Enable the option to capitalize text.

PreviousColors
NextPage layout

Last updated