Ascent(English)
Contact usFAQsFree to install
English
English
  • Introduction
  • Support Policy
  • Refund Policy
  • Template Installation
  • FAQs
  • Global Settings
    • Layout
    • Colors
    • Typography
    • Breadcrumb
    • Animations
    • Section header
    • Product cards
    • Badges
    • Social media
    • Search behavior
    • Currency format
    • Cart settings
    • Favicon
    • Custom CSS
  • Header
    • Custom Mega Menu
    • Mobile Menu Obstruction by Third-Party Plugins
  • Side Drawer
    • Search Drawer
    • Shopping Cart Drawer
  • Sections
    • Seamless scroll
    • Announcement bar
    • Countdown
    • Collection thumbnails
    • Narrow banner image
    • Image banner
    • Video banner
    • Slideshow
    • Image with text
    • Image-text list
    • Rich text
    • Newsletter
    • Text with icons
    • Logo list
    • Contact form
    • FAQs
    • Multicolumn
    • Image comparison banner
    • Image hotspots banner
    • Map
    • Featured collection
    • Featured product
    • Collection list
    • Custom liquid
    • Composite display
    • Confetti trigger
    • Custom section header
    • Quote
    • Testimonials
    • Shop the feed
    • Image gallery
    • Product compare table
    • Text lens zoom
    • Scroll image expand
    • Milestones
    • Team
    • Highlight features
    • Steps
    • Media wall
  • Popups
    • Event popup
    • Age verification popup
  • Footer
    • Custom Payment Icons
  • Tool bar
  • Pages
    • Product Collection Page
      • Create Subcategory
    • Main product
      • Gifts (Freebies)
      • Product Pre-order
      • Size Chart
      • Variant Images Group
      • Variant Samples
      • Complementary Products
      • Related Products
      • Sibling Products
      • In Box Products
      • Product A+ Page
      • Performance Indicator Bar
      • Delivery ETA
  • Others
    • Version Upgrade Notes
      • v2.2.1 (Current version)
      • v2.1.8
      • v2.1.7
Powered by GitBook
On this page
  • Usage Steps
  • Suggestions
  • Common Font Pairings

Was this helpful?

  1. Global Settings

Typography

PreviousColorsNextBreadcrumb

Last updated 6 months ago

Was this helpful?

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.

Usage Steps

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

Suggestions

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

Common Font Pairings

  1. 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)

  2. 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)

  3. 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)

  4. 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)

  5. 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)

  6. 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)