Add a Custom Font to Shopify: Files, Liquid and Theme CSS

Start with a webfont you are permitted to host, including the styles your design actually needs. Duplicate the theme before editing its code. This task concerns a custom font outside the theme’s native font picker; the ordinary Typography setting is covered in the related Shopify guide.

Shopify distinguishes two upload routes. For work performed through Shopify admin, use Content > Files. Its developer documentation warns that uploading some font types through the admin code editor’s assets directory can corrupt them. Local development through Shopify CLI, a theme ZIP or the GitHub integration instead uses the theme’s assets folder. Keep the route consistent throughout the setup.

In Content > Files, upload the licensed webfont. Open Online Store > Themes, choose the intended theme’s menu and select Edit code. Add a style declaration in a Liquid-rendered location, such as inside the head of layout/theme.liquid. Substitute the exact uploaded filename.

<style>
  @font-face {
    font-family: "Store Heading";
    src: url("{{ 'store-heading-regular.woff2' | file_url }}") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
  }
</style>

This is the admin Files route, so the URL uses file_url. A plain CSS field does not evaluate Liquid expressions; do not paste this unresolved template string into a theme’s ordinary Custom CSS box. Shopify’s Files help also distinguishes trial-plan restrictions from paid-plan upload support.

Defining a face only gives CSS a name to reference. It does not automatically change the storefront. Identify the theme’s existing heading rule or typography variable, then apply the family there. For example, a simple theme may support a scoped rule such as:

.product__title h1 {
  font-family: "Store Heading", system-ui, sans-serif;
  font-weight: 400;
}

That selector is an example, not a universal Shopify class. Inspect your actual theme’s structure and keep the heading change separate from body copy unless both are intended. Use the correct file and declaration for a real bold or italic style rather than expecting a regular file to supply every treatment. Shopify’s performance guidance favors WOFF2, fallback fonts and a font-display strategy.

For a theme maintained locally, place the font in its assets directory and use asset_url in the Liquid font-face declaration instead of file_url. The subsequent family name and role assignment follow the same CSS principle.

Preview a long product title, prices, button labels and a paragraph on narrow and wide screens. If the font fails, check the exact filename, generated URL, CSS family spelling, declared weight and any later theme rule overriding it. Keep the working font definition and the theme’s selected settings together in your handoff notes.