LogoLogo
HomeTheme DocsSupportTry Primavera
  • Primavera Theme Docs
  • Guides
    • Quick start
    • Accessibility
    • SEO
    • How to set up the same homepage sections as the demo stores
    • How to add a mega menu
    • How to add a sidebar menu promotion
    • How to add product swatches
    • How to add a product subtitle/cutline
    • How to add product badges
    • How to add product recommendations
    • How to add an external video
    • How do I enable right-to-left support
  • Theme settings
    • Spacing
    • Appearance
    • Logo
    • Colors
    • Typography
    • Product card
    • Mini product
    • Collection card
    • Blog post card
    • Search behavaior
    • Social media
    • Currency format
    • Cart
    • Optimizations
    • Custom CSS
  • Sections
    • Announcement bar
    • Back to top
    • Banner grid
    • Before/after image
    • Bottom bar
    • Blog posts
    • Cart drawer
    • Collapsible content
    • Collection list
    • Contact form
    • Countdown timer
    • Custom liquid
    • External video
    • Featured collection
    • Featured post
    • Featured product
    • Footer
    • Header
    • Image banner
    • Image hotspot
    • Image with text
    • Logo list
    • Media grid
    • Multicolumn
    • Newsletter
    • Newsletter popup
    • Rich text
    • Rich text columns
    • Scrolling content
    • Search modal
    • Section header
    • Shoppable banner
    • Sidebar menu
    • Slideshow
    • Split banner
    • Split card
    • Stacked images with text
    • Testimonials
    • Video banner
    • Video with text
  • Blocks
    • Badges
    • Buttons
    • Card
    • Collapsible
    • Heading
    • Image
    • Liquid
    • Mini product
    • Page
    • Product
    • Text
    • Video
  • Templates
    • 404
    • Account
    • Blog
    • Blog post
    • Cart page
    • Collection
    • Collection list
    • Gift card
    • Home page
    • Product
    • Password
    • Search
  • FAQs
    • Why isn't my video autoplaying?
    • How do I edit the default theme content?
    • Where do newsletter signups go?
    • Why are my images cropped?
    • How can I change the meta color?
  • Advanced
    • Customizing code
    • JavaScript events
    • How to refresh the cart using JavaScript
    • Use a custom font
  • Contact support
Powered by GitBook
On this page
  • Option 1: Upload a font file (Preferred)
  • Option 2: Load a font from an external provider
  1. Advanced

Use a custom font

PreviousHow to refresh the cart using JavaScript

Last updated 15 days ago

This is an advanced customization. We always recommend working off a duplicated version of your theme and consulting a Shopify developer if you're unsure. Please ensure you have the correct font license before using a custom font.

Primavera comes with access to Shopify's . If you wish to use a custom font instead, you will need to edit the theme code.

Depending on how you've sourced the font, choose from one of the following options:

Option 1: Upload a font file (Preferred)

If you have a font file, you can follow these steps:

  1. Ensure you have the font file in woff2 format (older formats may work but for this article we'll use woff2 ; you can use a free online converter if needed)

  2. In your Shopify store, navigate to Content/Settings > Files

  3. Upload the font file; once uploaded, copy the link

  4. Plan how you're going to add the custom CSS: If you're making minor tweaks and it's important that you're able to update the theme without a developer, try to use Theme settings > Custom CSS. If you're heavily extending the theme, the next best option may be to use a custom CSS file. See our general recommendations .

  5. In your custom CSS, add the @font-face property and replace the values as needed:

@font-face {
  font-family: "FONT_NAME";
  src: url("COPIED_FILE_LINK") format("woff2");
  font-weight: 400;
  font-style: normal;
}
  1. Still in your custom CSS, below the @font-face declaration, add the following snippet and remove/replace variables and values as needed:

:root {
  /* Override the body font */
  --font-body-family: "FONT_NAME", sans-serif;
  --font-body-weight: 400;
  --font-body-style: normal;
  
  /* AND/OR override the heading font */
  --font-heading-family: "FONT_NAME", sans-serif;
  --font-heading-weight: 700;
  --font-heading-style: normal;
}
  1. Save your changes

Example

Say we want to use Google Fonts Philosopher 400 for the body font and Philosopher 700 Italic for the heading font. It's the same font family, but we'll need to upload two files, one for each font weight/style combination.

  1. We first upload both font files in woff2 format to Content/Settings > Files

  2. We then add @font-face declarations for each font weight/style combination in our custom CSS:

@font-face {
  font-family: "Philosopher";
  src: url("COPIED_FILE_LINK_PHILOSOPHER_400") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Philosopher";
  src: url("COPIED_FILE_LINK_PHILOSOPHER_700_ITALIC") format("woff2");
  font-weight: 700;
  font-style: italic;
}
  1. Finally, in our custom CSS, below the @font-face declarations, we add the following snippet:

:root {
  /* Override the body font */
  --font-body-family: "Philosopher", sans-serif;
  --font-body-weight: 400;
  --font-body-style: normal;

  /* Override the heading font */
  --font-heading-family: "Philosopher", sans-serif;
  --font-heading-weight: 700;
  --font-heading-style: italic;
}

Option 2: Load a font from an external provider

If you're embedding fonts from an external provider such as Google Fonts or Adobe Fonts, you may have been given a code snippet that loads the font from their own URLs.

For example, here's the Google Fonts embed code for Cal Sans:

<link href="https://fonts.googleapis.com/css2?family=Cal+Sans&display=swap" rel="stylesheet">

Here are the steps to load a font from an external provider:

  1. Open the Code editor

  2. Locate and open the file theme.liquid

  3. Paste your embed code just above the closing </head> tag and hit Save

  4. In your custom CSS, add the following snippet and remove/replace variables and values as needed. Note: Replace "FONT_NAME" with the exact font family name referenced by the external provider, for example "Cal Sans".

    :root {
      /* Override the body font */
      --font-body-family: "FONT_NAME", sans-serif;
      --font-body-weight: 400;
      --font-body-style: normal;
      
      /* AND/OR override the heading font */
      --font-heading-family: "FONT_NAME", sans-serif;
      --font-heading-weight: 700;
      --font-heading-style: normal;
    }
  5. Save your changes

Example

Say we want to use Google Fonts Philosopher 400 for the body font and Philosopher 700 Italic for the heading font. That means we only need to add a single line of embed code to theme.liquid , since it already includes both weights and styles:

<link href="https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;1,700&display=swap" rel="stylesheet">
  1. We start by adding the above embed code in theme.liquid , above the closing <head> tag

  2. Then, in our custom CSS, we add the following code:

:root {
  /* Override the body font */
  --font-body-family: "Philosopher", sans-serif;
  --font-body-weight: 400;
  --font-body-style: normal;

  /* Override the heading font */
  --font-heading-family: "Philosopher", sans-serif;
  --font-heading-weight: 700;
  --font-heading-style: italic;
}

Plan how you're going to add the custom CSS: If you're making minor tweaks and it's important that you're able to update the theme without a developer, try to use Theme settings > Custom CSS. If you're heavily extending the theme, the next best option may be to use a custom CSS file. See our general recommendations .

here
font library
here
Option 1: Upload a font file (Preferred)
Option 2: Load a font from an external provider