Beloria Documentation
  • Welcome
  • Installation
  • Header
  • Footer
  • Shopify apps
    • Boostheme Toolkit app
    • Metafields Guru
  • Static sections
    • Powerful Megamenu
      • Powerful Megamenu(version tf-3.5 or older )
    • Powerful Mobile Megamenu
      • Powerful Mobile Megamenu ( version tf-3.5 or older )
    • Product pages
      • Main product section
      • Main product - Reviews
      • Main product - Tabs
      • Main product - Upsell
      • Main product - Cross-sell
      • Old version ( tf-3.5 or older )
    • Collection pages
      • Version tf-3.5 or older
    • Blog pages
    • Posts
    • Cart page
      • Cross-sell products Section
    • Search result page
    • FAQ
  • Dynamic sections
    • Collection and product
      • Collection filter
      • Collection list
      • Flexible collection list
      • Powerful product block
      • Powerful product block 2
      • Powerful product columns
      • Product single deal
      • Simple product slider
      • Vedette product ( single product )
    • Banner & image
      • Banner creator pro
      • Layer banner
      • Information list
      • Instagram slider
      • Logo list
      • Banner & quotes
    • Text
      • Custom HTML
      • Testimonials
      • Text list
    • Marketing & others
      • Featured blog posts
      • Newsletter
      • Contact us
      • Map
      • Loox widget
      • About us 1
      • About us 2
      • About us 3
  • Theme settings
    • General
    • Collections list page
    • Typography
    • Breadcrumbs
    • Multiple languages
    • Colors & Font sizes
    • Social media
    • Favicon
    • Product settings
    • Product labels
    • Currency
    • Cart
    • Shipping rates calculator
    • Upsell products
    • Cross-sell ( recommendation ) products
    • Recently viewed products
    • Progressive web app
    • Sales notification
    • Search suggestion
    • Newsletter
    • Promotion bar
    • Cookie consent
  • For developer
  • Tips
  • Manage blocks in a section
  • Cross-sell ( recommendation ) rules
  • Change log
  • Upgrade to a new version
    • From versions older than tf-4.0
Powered by GitBook
On this page
  • Open Typography settings.
  • For version tf-3.3 or newer
  • For version tf-3.2 or older

Was this helpful?

  1. Theme settings

Typography

Change the fonts on your store.

PreviousCollections list pageNextBreadcrumbs

Last updated 3 years ago

Was this helpful?

Open Typography settings.

  1. From your Shopify admin, go to Online Store > Themes.

  2. Find the theme that you want to edit and click Customize.

  3. In the left-hand toolbar, click Theme settings.

  4. Click Typography ( in version tf-3.2 or older, the group name is Google fonts ).

For version tf-3.3 or newer

Use font pickers to change the Primary and secondary fonts.

For version tf-3.2 or older

  • Go to https://fonts.google.com, click the font you want to use. Recommend only select at most 2 fonts for optimizing the loading time.

  • In each font, select styles you want to use. Recommend Regular(300 or 400), and Semi-bold(600).

  • Then click the icon on the top right to open the right panel. And click "Embed" in the right panel to open the embed configuration.

  • Copy the value in the href attribute, then paste it into the URL setting in the theme editor on your store.

  • Depend on which font you want to use as General or Secondary font, copy the font declaration and paste it into the General Font Declaration setting or Secondary Font Declaration setting. Note: not copy the "font-family:" word.