Which is easier to customize fonts on, Dawn or Refresh?

Equally easy. Both Dawn and Refresh are OS 2.0 themes that read typography from CSS custom properties on `:root`, so the override block this site generates works on either with no edits. The "easier" theme is whichever you already have installed.

Do Dawn and Refresh use the same CSS variable names for typography?

Yes. `--font-heading-family`, `--font-heading-style`, `--font-heading-weight`, and the matching `--font-body-*` triplet are identical across Dawn and Refresh. The variable convention is inherited from Dawn, which both themes derive from.

Can I move a custom-font setup from Dawn to Refresh?

Yes — copy your asset files into Refresh's `assets/` folder, paste the same @font-face block into the bottom of `assets/base.css`, and append the same CSS variable override. The only file-path detail to double-check is whether you used the `asset_url` filter (you should have); if so, Shopify rewrites the path correctly on the new theme automatically.

Which theme has better typography defaults out of the box, Dawn or Refresh?

Subjective and audience-dependent. Dawn's neutral, low-contrast humanist sans that prioritizes legibility over personality. Refresh's high-contrast display headings sitting above utilitarian body copy. If your brand is more expressive, the sport & energy positioning of Refresh probably aligns better. If you're in a general-purpose space, Dawn sets a closer baseline.

Shopify Dawn vs Refresh · Free, no signup · Last updated May 6, 2026

Dawn vs Refresh: Custom Font Setup Compared

Both Dawn and Refresh expose the same six `--font-heading-*` and `--font-body-*` CSS variables, so the @font-face block and CSS variable override generated above paste cleanly into either theme — the only material difference is the default Assistant vs the theme's default heading face fallback.

Dawn is the Shopify OS 2.0 reference theme that ships with every new store and powers the largest install base of any free theme. Refresh is a sport- and energy-leaning free theme tuned for high-saturation imagery and bold supporting copy. Despite the different positioning, both themes are OS 2.0 and inherit Dawn's typography token convention — meaning the workflow to add a custom font is essentially identical. The differences are in defaults, fallback metrics, and the .section-header__heading vs .banner__heading selectors that pick up the override.

Custom font nameBecomes the @font-face font-family

Formats

WOFF2 covers ~97% of modern traffic. Add WOFF / TTF only if you need legacy fallbacks.

WeightStyle

Apply to

Controls which Dawn typography roots the CSS variable block overrides.

Live preview

Add to cart · Free shipping · 30-day returns

Drop a WOFF2 / WOFF / TTF file here to preview your actual font. The file stays in your browser — nothing is uploaded.

Paste these three blocks in order. They're independent files in your theme — copying one without the others won't break the store.

Step 1: @font-face CSS

Paste at the bottom of assets/base.css. Uses Liquid's asset_url filter — Shopify resolves the path at render time.

@font-face {
  font-family: "My Brand Sans";
  src: url({{ 'my-brand-sans.woff2' | asset_url }}) format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Step 1: @font-face CSS

Paste at the bottom of assets/base.css. Uses Liquid's asset_url filter — Shopify resolves the path at render time.

@font-face {
  font-family: "My Brand Sans";
  src: url({{ 'my-brand-sans.woff2' | asset_url }}) format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Step 2: settings_schema.json

Adds a Theme Editor section so non-technical merchants can toggle the font on or off.

{
  "name": "My Brand Sans (custom font)",
  "settings": [
    {
      "type": "header",
      "content": "My Brand Sans typography"
    },
    {
      "type": "paragraph",
      "content": "Upload your My Brand Sans files (woff2, woff, ttf, otf, or eot) to your theme's Assets folder. The @font-face block referencing my-brand-sans.* will then resolve via {{ 'my-brand-sans.woff2' | asset_url }}."
    },
    {
      "type": "font_picker",
      "id": "my_brand_sans_heading_font",
      "label": "Heading font (fallback when custom file is unavailable)",
      "default": "assistant_n4"
    },
    {
      "type": "font_picker",
      "id": "my_brand_sans_body_font",
      "label": "Body font (fallback when custom file is unavailable)",
      "default": "assistant_n4"
    },
    {
      "type": "select",
      "id": "my_brand_sans_apply_to",
      "label": "Apply My Brand Sans",
      "options": [
        {
          "value": "headings",
          "label": "Headings only"
        },
        {
          "value": "body",
          "label": "Body only"
        },
        {
          "value": "both",
          "label": "Headings and body"
        },
        {
          "value": "off",
          "label": "Disabled"
        }
      ],
      "default": "both"
    },
    {
      "type": "checkbox",
      "id": "my_brand_sans_load_woff_fallback",
      "label": "Also load WOFF fallback (legacy browsers)",
      "default": false
    }
  ]
}

Step 3: CSS variable overrides

Retargets Dawn's --font-heading-family / --font-body-family. Survives theme updates.

:root {
  --font-heading-family: "My Brand Sans", sans-serif;
  --font-heading-style: normal;
  --font-heading-weight: 400;
  --font-body-family: "My Brand Sans", sans-serif;
  --font-body-style: normal;
  --font-body-weight: 400;
}

How to use this on Dawn vs Refresh

For a side-by-side migration: paste the same @font-face block into the bottom of `assets/base.css` on Dawn and into the bottom of `assets/base.css` on Refresh.
The CSS variable override block is byte-identical between the two — both themes read `--font-heading-family` and `--font-body-family` from `:root`.
The settings_schema.json snippet is also portable: Dawn and Refresh both honor `font_picker` and `select` types in the Theme Editor.
Where the themes diverge is in their default fallback faces (Dawn uses Assistant; Refresh uses the theme's default body face), so check that your custom face's `size-adjust` matches well enough that any swap is invisible.

Frequently asked questions

Which is easier to customize fonts on, Dawn or Refresh?
Equally easy. Both Dawn and Refresh are OS 2.0 themes that read typography from CSS custom properties on `:root`, so the override block this site generates works on either with no edits. The "easier" theme is whichever you already have installed.
Do Dawn and Refresh use the same CSS variable names for typography?
Yes. `--font-heading-family`, `--font-heading-style`, `--font-heading-weight`, and the matching `--font-body-*` triplet are identical across Dawn and Refresh. The variable convention is inherited from Dawn, which both themes derive from.
Can I move a custom-font setup from Dawn to Refresh?
Yes — copy your asset files into Refresh's `assets/` folder, paste the same @font-face block into the bottom of `assets/base.css`, and append the same CSS variable override. The only file-path detail to double-check is whether you used the `asset_url` filter (you should have); if so, Shopify rewrites the path correctly on the new theme automatically.
Which theme has better typography defaults out of the box, Dawn or Refresh?
Subjective and audience-dependent. Dawn's neutral, low-contrast humanist sans that prioritizes legibility over personality. Refresh's high-contrast display headings sitting above utilitarian body copy. If your brand is more expressive, the sport & energy positioning of Refresh probably aligns better. If you're in a general-purpose space, Dawn sets a closer baseline.