How do I use a custom font?

Load a brand font from Google Fonts, Adobe Fonts, or your own hosted files.

Last updated About 4 hours ago

Homage ships with Shopify's standard font library under Theme settings > Fonts. When you need something specific, each font role has its own custom font fields — body, buttons, headings, captions, card headings, badges, prices, and navigation.

Use a font provider (Google Fonts, Adobe, etc.)

  1. Go to Theme settings > Fonts.
  2. Open the role you want to change (e.g. Custom heading font).
  3. In Custom fonts, paste the <link> embed code from your provider into Font provider code.
  4. In that role's Custom font-family field, enter the CSS font-family name exactly as the provider specifies — e.g. Roboto Slab.
  5. Set Font weight and Font style to match the files you're loading.
  6. Click Save and check the storefront.

Repeat for each role that should use the custom face. Heading levels (H1–H6) inherit from the heading font unless you override a specific level.

Host your own font files

  1. Upload .woff or .woff2 files to Settings > Files in your Shopify admin (or host them on a CDN you control).
  2. In Theme settings > Fonts > Custom fonts, scroll to the hosted font fields.
  3. Enter the font name you'll reference in CSS.
  4. Paste the file URLs into WOFF font url and/or WOFF2 font url (at least one is required).
  5. Set Custom font-family, Font weight, and Font style on the role you're customizing.

Make sure you have a license to use the font on your storefront.

Mix custom and theme fonts

You don't have to replace everything. Many stores only customize the heading font and leave body text on a Shopify system font for readability. Empty custom fields fall back to the standard picker for that role.

Other settings

Button shape and size live under Theme settings > Layout > Buttons — see Layout. For icon styling (separate from typography), see Icons.