You can use any custom font in the Horizon theme, whether it is free or premium. Shopify allows you to upload and apply your own font files as long as you have the correct license for commercial and web usage.
Step 1: Download Your Font
Download the font you want to use from any commercial fonts website. You can choose a free or paid font, just make sure the license allows web embedding. Most downloaded fonts come in .ttf or .otf format.
Step 2: Convert Your Font to WOFF2
To optimize website performance, convert your font to WOFF2 format.
Use a converter like CloudConvert to upload your .ttf or .otf file and download the .woff2 version.
Step 3: Upload the Font to Shopify
- Go to Shopify Admin
- Click Settings or Content
- Select Files
- Upload your .woff2 file
- Copy the file URL after uploading
Step 4: Add Font Code to Your Theme
Before editing, duplicate your theme to be safe. Then:
- Go to Online Store
- Open Themes
- Duplicate the Horizon theme
- Click Edit Code
- Open theme.liquid
- Inside the <head> section, paste the generated font code that includes:
• A preload link for performance
• @font-face rule
• CSS selectors for headings, body text, buttons, and inputs
This will apply your custom font across the Horizon theme.
AI Prompt to Generate Your Font Code
Copy and paste this prompt into ChatGPT, then replace the font URL when asked:
Generate HTML and CSS code to add a custom font to my Shopify theme. The code should include a preload link for performance, a @font-face declaration, and CSS rules applying the font to the elements below. Give me CSS inside a <style> tag and the link tag only, do not add any other HTML markup. Ensure to use !important in the CSS rules.
Font URL:
https://your-font-url.woff2
Elements:
h1, h2, h3, h4, h5, h6
p, span, div, ul, ol, li, a, button, input, select, option, label, legend, textarea, small
ChatGPT will generate a code like this:
You can copy this code and paste it in themes.liquid after <head> tag
Step 5: Save and Check Your Store
Save your changes and refresh your store. If you do not see the new font, clear your cache or try a private window.
Tips
• Remove heading tags in the CSS if you want the custom font only for body text
• Remove body text tags if you want the font only for headings
• Always follow font licensing rules for paid fonts
Final Note
By following these steps, you can use any custom typography in the Horizon theme and match your brand style exactly the way you want. Converting to WOFF2 and adding the code properly ensures your store stays fast and visually polished.
