Modular documentation
Support
Modular 3.1
Modular 3.1
  • Modular Theme Documentation
  • Sections
    • How to use sections
      • Section settings
      • Adding sections
      • Hiding sections
      • Reordering sections
      • Theme Settings
    • Modular sections
      • Blog posts
      • Collections list
      • Contact form
      • Custom HTML
      • FAQ
      • Featured collection
      • Featured product
      • Icons row
      • Image with text
      • Image with text overlay
      • Logo list
      • Mosaic
      • Newsletter
      • Product features
      • Rich text
      • Slideshow
      • Split hero
      • Tabs
      • Testimonials
      • Video
    • Recommended Image Sizes
      • Product Images
      • Blog Images
      • Slideshow Section Images
      • Catalog Banner Images
      • Product Feature Images
  • Announcement
    • Announcement bar section
  • Header
    • Transparent header
    • Logo and store name
    • Mega Menu
  • Products
    • Product Pages
    • Creating new Product page templates
    • Pre-Order
    • Product ratings
  • Collections
    • Collection Pages
    • Creating more Collection page templates
    • Customizing the Collection List page
    • Badges
  • Pages
    • Pages
  • Online Store 2.0
    • The new experience
  • Theme Settings
    • Theme Settings Intro
      • Colors
      • Typography
      • Appearance
      • Search
      • Products
      • Cart
      • Breadcrumbs
      • Favicon
      • Social media
      • Checkout
  • Blogs
    • Blog Pages
    • Creating new Blog page templates
  • Footer
    • Blocks and settings
      • Logo
      • Menu
      • Text
      • Newsletter
    • How to remove the Shopify credit
  • Popups
    • Popup section
  • Updates
    • Checking your theme version
    • Downloading the latest version
  • Support
    • Contacting support
    • Sharing a preview link
    • Updating your theme
  • Custom
    • How to add Custom Color Swatches
    • How to make CSS customizations
    • How to set up custom filtering options
    • How to add Custom Fonts
Powered by GitBook
On this page
  • Uploading your Font Files
  • Defining the new Font Families
  • Assigning your Custom Fonts
Export as PDF
  1. Custom

How to add Custom Fonts

PreviousHow to set up custom filtering options

Uploading your Font Files

In order to use your own custom fonts, you will first need to upload the font files. To do this, you'll need to head on over to your Online Store > Themes and click on Actions > Edit code.

From here, open the Assets folder and upload your font files into it:

Defining the new Font Families

Now that we have the assets sorted out we can head on over to the 'css-variables.liquid' file. It's located inside the Snippets folder.

Here you need to scroll all the way to the bottom and add a bit of code before the closing style tag (' {%- endstyle -%} '):

This is the place where you need to add this code snippet:

/* -- code to use Gotham font-family in theme -- */
 @font-face {   
    font-family: 'Gotham';  
          src: 	url('{{ "Gotham.eot" | asset_url }}');   
          src: 	url('{{ "Gotham.eot" | asset_url }}#iefix') format("embedded-opentype"),
        	url('{{ "Gotham.woff" | asset_url }}') format("woff"),
        	url('{{ "Gotham.woff2" | asset_url }}') format("woff2"),
         	url('{{ "Gotham.svg" | asset_url }}#GothamBold') format("svg");
         font-weight: normal;
         font-style: normal;
 } /* - end - */

In this code snippet, you need to replace all references of 'Gotham' with your own font name and font files names.

If you have to upload more than one font, you need to declare each one individually and use multiple instances of this code snippet.

Assigning your Custom Fonts

Finally, all we need to do is assign the new fonts to be used. There are two global font variables that control the fonts for the headings and body text.

You can easily find all of them by using CTRL + F (or Command + F) and searching for 'font-family':

All you need to do here is to replace the first value assigned to the variables you're looking to change, we'll continue to use 'Gotham' in our example to keep it consistent but this is also a place where you input your custom font name:

That's it, you're all set and ready to go. Don't forget to Save the changes.

Click to expand the image if it's hard to read
Click to expand the image if it's hard to read