How to generate a CSS @font_face declaration for a Shopify font?

Retired Boards Appdev Custom Storefronts

Topic summary

Issue: A developer wants to use Shopify’s hosted Archivo font (archivo_n4) in their theme by generating a proper CSS @font-face declaration for theme.liquid.

Proposed Solution:
One response suggests adding a Liquid code snippet to theme.liquid that:

  • Defines the @font-face declaration
  • References the font URL from Shopify’s CDN (cdn.shopify.com)
  • Specifies font-family as ‘Archivo’ with normal weight and style
  • Uses WOFF format

Current Status: The discussion appears to be in early stages with one proposed approach shared. The text contains some formatting irregularities that make portions difficult to parse, but the core question about implementing Shopify-hosted fonts via @font-face remains clear and unresolved.

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
1

Hi there,

How can I generate a CSS @font_face declaration to use in theme.liquid for a Shopify-hosted font, archivo_n4, for example. In other words I want to use the Archivo font that’s already hosted in Shopify and I want to include it in my theme.liquid (and custom.css) file using Liquid.

Thanks!

I

2

In your theme.liquid document, add the accompanying Fluid code bit to characterize the @font-face statement:

fluid
{% catch fontUrl %}https://cdn.shopify.com/s/textual styles/archivo_n4.woff{% endcapture %} @font-face { text style family: ‘Archivo’; src: url({{ fontUrl }}) format(‘woff’); textual style weight: ordinary; textual style: typical; }
For more data click here