Typography
Last updated
Last updated
In Shopify templates, the font settings allow you to choose and apply header fonts and body fonts for the entire store. By adjusting font styles, you can ensure that the store's visual appearance aligns with your brand image while enhancing content readability. For supported fonts, please refer to the Shopify documentation.
Access Font Settings
In the Shopify admin, navigate to the "Customize Theme" page.
Open the template settings and expand the "Typography" section.
Set Header Font
In the "Header Font" section, click the "Change" button.
Choose your preferred font from the font library and adjust the font style (e.g., bold, italic, etc.).
Set the letter spacing for the header font, with options like Slightly Smaller, Normal, Slightly Larger, or Larger.
Once selected, click "Save" to apply the changes.
Set Body Font
In the "Body Font" section, click the "Change" button.
Select a font suitable for body text and adjust the style.
Set the letter spacing for the body font, with options like Slightly Smaller, Normal, or Slightly Larger.
After making your selection, click "Save" to apply the changes.
Font Optimization
Note that different fonts may affect your site's loading speed. It is recommended to choose faster-loading system fonts or optimized web fonts.
If you have concerns about font performance, you can click the provided link for more information.
Contrast and Harmony: Ensure the header and body fonts contrast in style while maintaining harmony. A combination of sans-serif and serif fonts often works well.
Brand Alignment: Choose font pairings that match your brand’s tone. For example, luxury brands may opt for classic serif fonts, while tech brands might prefer modern sans-serif fonts.
Readability: Regardless of the font combination, ensure the body font is highly readable, especially on mobile devices.
Playfair Display + Lato
Header Font: Playfair Display (an elegant serif font, ideal for high-end and fashion brands)
Body Font: Lato (a modern, readable sans-serif font, perfect for long texts)
Montserrat + Merriweather
Header Font: Montserrat (a stylish sans-serif font, great for modern stores)
Body Font: Merriweather (a highly readable serif font, adding warmth to the text)
Oswald + Open Sans
Header Font: Oswald (a clean, bold sans-serif font, ideal for large headlines)
Body Font: Open Sans (a widely used sans-serif font, suitable for all types of stores)
Raleway + Roboto
Header Font: Raleway (a refined sans-serif font, suitable for elegant and modern styles)
Body Font: Roboto (a versatile sans-serif font with excellent readability)
Bebas Neue + Source Sans Pro
Header Font: Bebas Neue (a bold sans-serif font, perfect for strong visual impact)
Body Font: Source Sans Pro (a clean, functional sans-serif font, ideal for long reading)
Muli + Georgia
Header Font: Muli (a lightweight sans-serif font, great for fresh, minimalist designs)
Body Font: Georgia (a classic serif font that enhances readability and authority)
