Palo Alto 6.2.1 has been released
Release notes
Palo Alto Doumentation
NewSupport
Latest version
Latest version
  • Palo Alto theme documentation
  • Updates
    • What's new in Palo Alto
      • Release notes
      • About 6.2 Release
      • About 6.1 Release
      • About 6.0 Release
      • About 5.9 Release
      • About 5.8 Release
      • About 5.7 Release
      • About 5.6 Release
      • About 5.5 Release
      • About 5.4 Release
      • About 5.3 Release
  • Sections
    • Palo Alto sections
      • Explore the sections
      • Accordions
        • Text block
        • Page block
      • Accordions with images
        • Text block
        • Page block
      • Banner image
        • Subheading block
        • Heading block
        • Text block
        • Timer block
        • Buttons block
        • Video button block
      • Banner with text columns
        • Column block
      • Blog posts
      • Buttons list
        • Button block
      • Collection list
        • Collection block
      • Contact form
        • Form heading block
        • Email block
        • Message block
        • Text line block
        • Telephone block
        • Divider block
        • Single checkbox block
        • Select dropdown block
        • Radio buttons block
      • Countdown
        • Subheading block
        • Heading block
        • Text block
        • Timer block
        • Buttons block
        • Video button block
      • Custom code
      • Custom content
        • Image block
        • Text block
        • Newsletter block
        • Testimonial block
        • Product block
        • Video block
        • Collection block
      • Divider
      • Featured collection
        • Promo block
      • Featured product
      • Grid
        • Collection block
        • Product block
        • Image block
        • Text block
      • Icons row
        • Item
      • Image
      • Image accordions
        • Image block
      • Image with scrolling text
        • Scrolling text block
        • Subheading block
        • Heading block
        • Text block
        • Timer block
        • Buttons block
        • Video button block
      • Image with text
        • Subheading block
        • Heading block
        • Text block
        • Button block
        • Accordion block
      • Locations
        • Locations block
      • Marquee
        • Text block
        • Free shipping message block
        • Custom HTML block
        • Image block
      • Multi column
        • Text block
        • Image block
        • Menu block
        • Collection block
      • Newsletter
      • Overlapping images
      • Press/Logo
        • Press block
      • Products list
      • Products with image
      • Promotion row
        • Custom promo block
      • Recently viewed products
      • Shop the look banner
        • Product block
      • Shop the look grid
        • Product block
      • Shoppable blog posts
        • Article block
      • Slideshow
        • Slide block
      • Social gallery
        • Image block
      • Split images
        • Image block
      • Sticky image cards
        • Image card with text block
      • Sticky images and text
        • Sticky images and text: Horizontal
        • Image and text block
      • Tab collections
        • Collection - block
      • Testimonials
        • Testimonial block
        • Text block
      • Testimonials with images
        • Testimonial block
        • Text block
        • Image block
      • Text
        • Subheading block
        • Heading block
        • Text block
        • Split text block
        • Button block
        • Image block
        • Icon block
        • Icon row block
      • Text columns with images
        • Column block
      • Video
  • Theme Settings
    • Theme settings
      • How to make changes
      • Colors
      • Typography
      • Buttons
      • Product grid
      • Product form
      • Quick shop
      • Cart
      • Upsells
      • Loading overlay
      • Appearance
      • Animation
      • Badges
      • Swatches
      • Pagination
      • Search
      • Social media
      • Currency
      • Favicon
      • Size chart
      • Custom CSS
      • Theme style
  • Header
    • Announcement bar
      • Settings and blocks
      • Text
      • Free shipping message
      • Custom HTML
      • Target settings
      • Image
    • Header
      • Header settings
      • Mega menu
      • Logo
      • Highlighted link
      • Transparent header
    • Mobile menu
      • Menu
  • Footer
    • Footer
      • Settings and blocks
      • Logo
      • Text
      • Link list
      • Newsletter
      • Blog
  • Products
    • Product pages
      • Variant images
      • Settings and layout
      • Size chart tabs
      • Size chart metafields
      • Custom color swatches
      • Pre-order
      • Gift card product
      • Out of stock notification
      • Metaobjects
      • Creating new product page templates
    • Blocks
      • Product blocks
      • Title and price
      • Form
      • Product description
      • Cutline
      • Accordion
      • Upsell
      • Share button
      • Pickup availability
      • Custom code
      • Text
      • Icon
      • Icon row
      • Siblings
      • Inventory countdown
      • Popup text
      • Line item property
      • Divider
      • Feature
      • Complementary products
      • Badges
      • Timer
      • Fit guide
  • Collections
    • Collection pages
      • Filtering options
      • Custom product badges
      • Cutline
      • Catalog banner images
      • Collection pages promo
  • Cart
    • Palo Alto Cart
      • Cart types
      • Empty cart buttons
      • Free shipping message
      • Custom message
      • Terms and conditions
      • Upsell promotion
  • Pages
    • Page templates
  • Blogs
    • Blogs and articles
      • Settings and layout
      • Recommended posts
      • Creating blog page templates
  • Overlay
    • Popups
      • Popup with image
      • Popup small
      • Cookie consent
      • Popup behavior
  • Promotions
    • Upselling
      • Upsell promotions
  • Siblings
    • Product siblings
      • About product siblings
      • How to setup siblings
      • Define a metaobject
      • Add product list entries
      • Activate using a metafield
      • Bulk update sibling products
      • Siblings block
  • FAQ
    • Frequently asked questions
      • Updating your theme
      • Highlight words
      • Image aspect ratio
      • Recommended image sizes
      • Adding a section
      • Reordering sections
      • Sharing a preview link
      • Check your theme version
      • How to add custom fonts
      • Remove 'Powered by Shopify'
      • CSS customizations
  • License
    • Theme license
  • Support
    • Theme support policy
    • Contact support
    • Hire a Shopify expert
Powered by GitBook
On this page
  • Uploading your font files
  • Defining the new font families
  • Assigning your custom fonts
Export as PDF
  1. FAQ
  2. Frequently asked questions

How to add custom fonts

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

PreviousCheck your theme versionNextRemove 'Powered by Shopify'

Last updated 1 month ago

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 store's Files folder.

You can copy the file links for later.

Defining the new font families

Now that you have the files uploaded, you 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('WOFF2 link from files placeholder') format("woff2");
  font-weight: normal;
  font-style: normal;
} /* - end - */

In this code snippet, you can start by replacing the font family name ('Gotham') with your own font name. Next, add the file link you copied in the 'url()' field, replacing the placeholder text. If you're using a different format, make sure to change that too.

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 a few 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 command + f (or ctrl + f on Windows) 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.