Update Heading Font on Dawn Theme to Custom Font

Store Design
, ,

Topic summary

Main issue: custom font (Elika Gorica) should apply to all headings in a Shopify Dawn theme, but only the navigation changed; headings remain unchanged despite adding font files (woff/woff2) to Assets and code in theme.liquid and base.css.

Guidance provided:

  • Upload font files to the Assets folder.
  • Define a CSS @font-face with asset_url paths for woff2/woff.
  • Apply the font via CSS by setting font-family and explicitly targeting heading selectors (e.g., h1–h6), not just navigation or body.
  • Optionally adjust theme templates to ensure heading styles inherit the custom font.

Technical notes: @font-face is the CSS rule that registers a web font; woff/woff2 are web-optimized font formats; base.css is the main stylesheet; theme.liquid is a layout file where global assets can be referenced. Code snippets are central to the solution.

Latest update: a video tutorial link was shared on adding custom fonts through Shopify font settings.

Status: no confirmation of success from the original poster; the thread appears open with actionable steps to try and verify.

Summarized with AI on December 12. AI used: gpt-5.
1

Hello! I am trying to update all of the Headings on my website to Elika Gorica. I am using the Dawn Theme and I have tried some of the other solutions out there and it hasn’t worked. I have added the woff and woff2 font files to the Assets. I have also added the code to the theme.liquid file for the fonts.

When editing base.css, I can’t seem to get the headings to change. I was able to update the header font for the navigation to this custom font, even though that’s not where I want it, but I can’t get the headings to show up as the custom font.

2

Hi @leaskirt Please follow the steps.

  • Upload your font files: Upload your custom font files (e.g., .woff, .woff2) to your Shopify theme. You can do this by navigating to the “Online Store” section of your Shopify admin panel, selecting “Themes,” and then clicking on “Actions” > “Edit code” for your current theme. In the theme editor, you can upload your font files to the “Assets” folder.
  • Add font-face rule in CSS: Once your font files are uploaded, you need to define a @font-face rule in your CSS to specify the font-family and the paths to your font files. You can add this rule to your theme’s CSS file. Here’s an example:
@font-face {
    font-family: 'CustomFont';
    src: url('{{ 'customfont.woff2' | asset_url }}') format('woff2'), /* Modern Browsers */
         url('{{ 'customfont.woff' | asset_url }}') format('woff'); /* Older Browsers */
    font-weight: normal;
    font-style: normal;
}

Replace ‘CustomFont’ with the desired name for your custom font and ‘customfont.woff2’ and ‘customfont.woff’ with the file names of your font files.

  • Apply the font to your styles: Once the font-face rule is defined, you can use the custom font by specifying font-family in your CSS styles. For example:
body {
    font-family: 'CustomFont', sans-serif;
}

Replace ‘CustomFont’ with the name you used in the @font-face rule.

  • Apply the font in your Shopify theme templates: Once you’ve added the font to your CSS, you can apply it to specific elements in your Shopify theme templates by adding custom CSS classes or modifying existing styles.

If you will unable to implement the same then I’m happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil

3

Hi @leaskirt ,

Please refer to the below video how you can add custom fonts in Shopify font settings.