EStore Tools

Shopify Custom Font Generator

@font-face CSS for a font file you've uploaded yourself, outside Shopify's font library.

Describe the result you need. AI will set up the tool and ask for any missing details.

Configure with AI

Enter to submit · Shift + Enter for a new line

Sent to AI. Leave out passwords and private customer data.

Your details

Font files

Any name you choose; it just labels the font in your CSS.

Must match a file already uploaded under Content → Files, exactly (case-sensitive).

Older browsers only; leave blank if you only uploaded a .woff2.

Where it applies

Use body for the whole store, or h1, h2, h3 for headings only.

Your snippet file (snippets/custom-font.liquid)

custom-font.liquid
{%- comment -%}
  Custom font, loaded from a file uploaded in your Shopify admin under Content → Files (accepts
  .woff2, .woff, .ttf and .otf; not available on free-trial stores). Upload each file there first
  and make sure the file names below match exactly, including capitalization.
{%- endcomment -%}
{%- style -%}
@font-face {
  font-family: "Custom Sans";
  src: url("{{ 'custom-sans-regular.woff2' | file_url }}") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Custom Sans", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}
{%- endstyle -%}

To install: in Shopify admin go to Online Store → Themes, click … next to your theme → Edit code. Under Snippets choose Add a new snippet, name it as shown above, paste this code and save. Then add {% render 'custom-font' %} inside the <head> of layout/theme.liquid, before </head>.

The preview below can't load your actual uploaded font (it has no real file to fetch), so it shows a system font as a stand-in. Check the real result on your store once the file names match your Files upload.

font-display: swap avoids invisible text while the font loads, at the cost of a visible font swap. Use optional if you'd rather skip the custom font entirely on a slow connection than show a layout shift.

Live preview

For fonts outside Shopify's library

The theme editor's font picker only offers fonts from Shopify's own library (system fonts and Google Fonts). For a brand's own licensed or custom font file, upload it in your Shopify admin under Content → Files (accepted formats: .woff2, .woff, .ttf, .otf; note that font uploads aren't available on a free trial store), then reference it in CSS with the file_url filter, which returns that file's CDN URL: {{ 'yourfont.woff2' | file_url }}.

This builds the @font-face rule(s) for you, one per weight or style you provide a file for, plus a rule applying the font family to whichever CSS selector you choose (the whole store, or just headings).

  • File names are case-sensitive and must match your Files upload exactly, including the extension.
  • font-display: swap (the default here) shows a fallback font immediately and swaps in your custom one once it loads, avoiding invisible text.

Adding it to your theme

  1. 01

    Upload the font

    In Shopify admin, go to Content → Files, then Upload files, and add your .woff2 (and .woff fallback, if you have one).

  2. 02

    Add the snippet

    Online Store → Themes → Edit code → Snippets → Add a new snippet named custom-font, paste the code (with your exact file names), then add {% render 'custom-font' %} inside the <head> of layout/theme.liquid, before </head>.

Questions people ask

Why doesn't the font show up after I install this?

The file name in the code almost always doesn't exactly match what's in Content → Files. Check capitalization and the file extension carefully; they must match exactly.

Can I use a font from Google Fonts this way instead of the theme's font picker?

You could self-host a Google Fonts file this way, but if the font is already in Shopify's font library, the built-in font_picker setting and font_face filter are simpler and don't need a manual upload.

Do I need separate files for bold and italic?

Yes, browsers only render synthetic (fake) bold and italic from a single file, which usually looks worse than a real bold or italic font file. Add those file names in the optional fields if you have them.

Will this slow down my store?

Any custom font adds a file for the browser to download. Use .woff2 (much smaller than .ttf or .otf) and only load the weights you actually use.

Related tools

Shopify Breadcrumbs GeneratorA breadcrumb trail for product, collection and page templates, with BreadcrumbList markup.Shopify Marquee Section GeneratorA CSS-only scrolling strip for text or logos, that pauses for anyone who prefers reduced motion.Shopify Color Swatches GeneratorTurn a Color option into clickable swatches on the product page or collection cards.Shopify Announcement Bar GeneratorBuild a static, rotating or scrolling announcement bar and get it as a Shopify section you can edit in the theme editor.

Want this builtinto your store?

I'm Emmanuel, a Shopify and WooCommerce developer. If this tool pointed at something you'd rather have fixed for you (a faster store, cleaner product data, a migration, a custom feature), send me a note.

Emmanuel Asika

Emmanuel Asika

Shopify & WooCommerce developer, Dublin

I build and fix online stores: new builds, migrations, speed, SEO and the custom bits apps can't do.

hello@emmanuelasika.com
See my work

Last reviewed 30 September 2026.

Sources: Shopify: theme font settings and the file_url filter