# Use a custom font {% hint style="info" %} 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. {% endhint %} Primavera comes with access to Shopify's [font library](https://shopify.dev/docs/storefronts/themes/architecture/settings/fonts). 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)](#option-1-upload-a-font-file-preferred) * [Option 2: Load a font from an external provider](#option-2-load-a-font-from-an-external-provider) ### 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 [here](/advanced/customizing-code.md). 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; font-display: swap; } ``` 7. 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; } ``` 8. 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-display: swap; } @font-face { font-family: "Philosopher"; src: url("COPIED_FILE_LINK_PHILOSOPHER_700_ITALIC") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } ``` 3. 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**: ``` ``` 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 `` tag and hit *Save* 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 [here](/advanced/customizing-code.md). 5. 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; } ``` 6. 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: ``` ``` 1. We start by adding the above embed code in `theme.liquid` , above the closing `` 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; } ``` ### Optional: Preloading your font To improve performance, you may wish to consider preloading your font. Please note, this involves modifying the core theme files and may make it more difficult for you to upgrade Primavera in the future. We suggest only doing this if you are already committed to customizing other areas of the code base. To add a preload, add the following code to the head tag: ``` ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.ultramarinastudios.com/advanced/use-a-custom-font.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.