Recommended: Install Fontify app to easily change any fonts for your whole page or specific elements. Support all Google fonts that GDPR compliant and upload Custom fonts in seconds.
You can set the font style and size for the text. You can choose a font from Shopify or Google.
1. How to access the Typography in the Theme settings?
In the theme editor (Customize), click the Theme settings button > In the Theme settings tab, scroll through the list and select Typography.
2. How to customize the Typography in the Theme settings?
2.1. Typography
Font library: Choose between fonts provided by Shopify or Google Fonts.
First, if you use Shopify font, just click and select a font that you want. We have three Font family options. Also, selecting a different font can affect the speed of your store. Learn more about system fonts.
Font Family #1: The primary font used throughout the site.
Font Family #2: A secondary font that can be applied to specific text areas.
Font Family #3: A tertiary font option for additional styling flexibility.
Second, if you use Google fonts, just fill in the options.
Find font: Click the Find font link to get the name of your Google Font.
Embed a font (<link>): Paste embed a font you want to show
CSS rules to specify families: These are CSS declarations for applying the selected fonts to elements. Ex: font-family: "Poppins", sans-serif;
2.2. Headings
Heading font family: The font used for headings (H1, H2, etc.), selected from one of the font families above.
Heading font weight: Controls the thickness or boldness of heading text (e.g., 400 = regular, 600 = semi-bold).
Font size scale: Adjusts the overall size of headings in relation to the base size (100% = default).
Line height: Controls the vertical spacing between lines in headings (e.g., 1.5 means 1.5x the font size).
Letter spacing: Sets the spacing between individual letters in headings (e.g., 0% = normal spacing).
Sub-heading font family: Specifies a font for sub-headings, chosen from the available font families.
2.3. Body
Body font family: Selects which font (from the predefined font families) will be used for regular body text.
Body font weight: Controls the thickness of the body text (e.g., 400 = regular, 700 = bold).
Base size (mobile): Sets the base font size for body text on mobile devices, measured in pixels.
Base size (tablet and desktop): Sets the base font size for body text on larger screens (tablet and desktop), also in pixels.
Line height: Determines the vertical spacing between lines of text; a value of 1.6 means 1.6x the font size.
Letter spacing: Adjusts the space between letters in body text, expressed as a percentage.
