Design Packs Docs
design-packs.comView on Shopify App Store
  • Get started here
  • Guides
    • Adding your first section
    • Adding your first template
    • General settings
    • Helpful hints & resources
    • Troubleshooting
    • Performance
  • Fundamentals
    • Section Settings
      • Setting Solid Background Colors instead of Gradients
      • Understanding Layout Settings: Size & Maximum Width
      • Understanding Inner Padding & Outer Margin Settings
      • Custom Classes Setting
      • Show Individual Variants Setting
      • Enable Metafield Detection Setting
        • Metafield ready sections
        • How to Use Metaobjects on Product template with Image with text - simple section
      • Metafield Badge Setting
      • Using Blog Tags Setting to Show Product-Specific Blog Posts
      • Add custom events when product is added to cart
      • Size Controls for Image & Video Blocks
      • Featured collection - blocks
        • How to use the Liquid Block in "Featured collection - blocks" Section to Add Custom Review Apps
        • How to use the Metafield Image Badge block
        • How to use the Metafield text block
      • Newsletter/Signup Form Block - Tags
      • How to add a Hidden Field in Contact Form
    • Sections
      • Banners & Sliders
      • Flourish
      • Icon & Logos
      • Image with text
      • Menus & Navigation
      • Blocks & Columns
      • Text Content
      • Products & Collections
      • Article sections
      • Galleries
      • Misc
      • Modal Popup
    • Templates
      • Regular Page
      • Lookbooks
      • Blogs
      • Blog Posts
      • Collection
      • Landing pages
    • Custom CSS
      • Basic CSS examples
      • Mobile CSS examples
      • Advanced Examples
    • Shopify expertise
      • Theme editor
      • Metafields
      • MetaObjects
    • How to Guides
      • How to jump/ link to another section on the SAME page
      • How to forward a contact form in Shopify to a different email with Gmail filters
      • How to create new page templates (and keep the original as a starting point)
      • Creating a New Product Template
      • How to set default article template for all blog posts
  • Use Cases
    • For Designers
    • For Developers
    • Agency Licenses
    • Affiliate Program
  • PRODUCT BLOCKS
    • Product Blocks
      • Image with text block
      • Connected products block
      • Variant descriptions block
      • Value icons block
      • Video block
      • Collapsible content block
      • Feature range block
  • Integrations
    • Theme Updater App
Powered by GitBook
On this page
  1. Fundamentals

Custom Fonts

You no longer need to be limited by the fonts made available by Shopify. Now you can add ANY font to your store!!

Last updated 3 months ago

Good to know: Find cool and stylish fonts

Add your own custom fonts to the app and generate the custom CSS to apply to your store

  1. Upload the font file to the app.

    • For performance reasons, the font is uploaded in the background and can take a few minutes. There will be a button available to refresh the font list. If you click on the button and it remains, it means the font hasn't been uploaded yet. Wait a minute or two and try the button again.

    • Font file types accepted:

      • TrueType Fonts (.ttf)

      • OpenType Fonts (.otf)

      • Web Open Font Format (.woff)

      • Web Open Font Format (.woff2)

  2. Choose the font you'd like to use for each font level from the dropdown list beside each option. The options available are:

    • Main heading (h1, h2)

    • Small headings

    • Body text

    • Buttons and links

  3. Set the other style options for each font. Set any value to none or blank to maintain the styles already present in your theme.

    • Font size - pixel value

    • Line height - pixel value

    • Letter spacing - pixel value

    • Font style - normal, italic, oblique

    • Text transform - capitalize, lowercase, uppercase

    • Color - hex value, color picker

  4. When you're happy with all the styles you've set click Save & Generate font CSS.

    • From there you'll be able to copy it to clipboard and then go to the custom CSS page.

    • You'll be able to choose from 2 options

      • Design Packs Styles ONLY

        • Does not apply font styles globally. Styles are only applied to Design Pack sections.

      • Global Font Styles

        • Font styles are applied everywhere. Intended to override existing theme settings.

  5. Paste the font styles into the Custom CSS area.

  6. Choose the theme you'd like to apply it to and hit save.

here
Page cover image