Palo Alto Doumentation
NewSupport
Palo Alto 4.4
Palo Alto 4.4
  • Palo Alto Theme Documentation
  • Changelog
    • The new experience
    • What's new in 4.4
  • Header
    • Announcement bar
    • Transparent header
    • Mega Menu
    • Highlighted link
    • Logo
  • Sections
    • Target Settings
    • How to use sections
    • Recommended Image Sizes
    • Highlight words
    • Palo Alto sections
      • Collection list
      • Collection marbles
      • Featured collection
      • Featured product
      • Products list
      • Tab collections
      • Marquee
      • Custom content
      • Grid
      • Image accordions
      • Image with text
      • Logo list
      • Mosaic
      • Overlapping images
      • Shop the look
      • Slideshow
      • Split images
      • Video
      • Banner with text columns
      • Blog posts
      • Contact form
      • Custom HTML
      • Icons row
      • Locations
      • Newsletter
      • Press
      • Promo
      • Shoppable blog posts
      • Tabs
      • Testimonials
      • Text
      • Text columns with images
      • Promotion row
  • Upsell
    • Upsell
  • Theme Settings
    • Theme Settings Intro
      • Colors
      • Typography
      • Appearance
      • Product Grid
      • Quick shop
      • Cart
      • Loading icon
      • Checkout
      • Theme style
  • Products
    • Product Pages
    • Creating new Product page templates
    • Pre-order
    • Theme blocks
      • Title and price
      • Form
      • Product description
      • Accordions
      • Upsell
      • Share button
      • Text
      • Icon
      • Icon row
      • Inventory countdown
      • Popup text
      • Divider
    • Swatches
    • Product ratings
  • Collections
    • Collection Pages
    • Filtering options
    • Sub-collections
    • Collection pages promo
    • Cutline
    • Badges
  • Popups
    • Popups
    • Popup Behavior
  • Footer
    • Footer
      • Logo
      • Link list
      • Text
      • Blog
      • Newsletter
    • How to remove the Shopify credit
  • Blogs
    • Blog Pages
    • Creating new Blog page templates
  • Pages
    • Pages
  • Updates
    • Checking your theme version
    • Downloading the latest version
    • Updating your theme
  • Support
    • Contacting support
    • Sharing a preview link
  • Custom
    • How to make CSS customizations
    • 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

Adding custom fonts for your menu, buttons, headings, and body text.

PreviousHow to make CSS customizations

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 located in 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 file 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 four global font variables that control the fonts for the headings, body text, buttons, and navigation menu.

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

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. Just don't forget to Save the changes.