Shopify offers a solid selection of fonts that work seamlessly with the Iris theme. However, if you’d like to use your favorite custom font without relying on a third-party app, you can do so with a few simple steps.

Step-by-Step: Adding a Custom Font

1. Prepare Your Font File – Make sure your font is in either .woff or .woff2 format.

2. Upload the Font – Go to Content → Files, and upload your font file. After uploading, copy the URL of the uploaded font.

3. Edit Your Theme’s CSS – Navigate to Edit Code → Assets → base.css, and scroll to the bottom of the file. After the last bracket “}” add the following snippet:

/* Custom CSS */

@font-face {
font-family: 'Grandstander Bold';
src:url(https://cdn.shopify.com/s/files/1/0676/0179/3306/files/Grandstander-Bold.woff2?v=1729279993) format('woff2');
}

:root {
--font-heading-family: 'Grandstander Bold'; 
--font-body-family: 'Grandstander Bold';
}

4. Add font name – Replace ‘Grandstander Bold‘ with the name of your custom font.

5. Update the URL – Replace the url(…) with the link to your uploaded font file.

6. Check format – If your font is in .woff format, make sure to change the format(‘woff2’) to format(‘woff’).

7. Customize as Needed

• To apply the custom font only to headings, remove the “–font-body-family” line.
• Want different fonts for headings and body text? Upload both font files, create a second “@font-face” rule, and set each one accordingly in the :root section.

Important: When updating your theme, don’t forget to copy the custom CSS snippet you added to the bottom of the base.css file into the new version. Otherwise, your custom font won’t be applied.