Trying to Add New Font to Baseline Theme...

Store Design

Topic summary

Issue: A store owner can’t get a custom .woff font to load in the Baseline theme or appear in the Theme Customizer’s typography options. They uploaded the file to Assets, matched names in CSS, and followed forum guides without success. Store URL: contrakidsmutiny.com.

Guidance provided:

  • Upload the .woff file to the Assets folder with the exact filename.
  • Add an @font-face rule (in theme.liquid or base.css) referencing the asset URL, then apply the font via CSS to elements (e.g., h1, p).
  • Ensure the font is added to the theme’s schema settings so it shows in the Typography section of the editor.
  • Check for typos in the font name or file path. A screenshot link with example code was shared.

Key terms: @font-face registers a custom font in CSS; Assets is the theme’s static file directory; schema settings control what appears in the Theme Editor.

Outcome/status: No confirmation of success yet; thread remains open pending the user’s follow-up after implementing these steps.

Summarized with AI on December 14. AI used: gpt-5.
2

Hi @MJ82

To add a new font to the Baseline Theme and ensure it appears in the typography section:

  1. Upload the Font File: Ensure the .woff file is uploaded to your Assets folder and named correctly.
  2. Add CSS Code: Edit your theme.liquid or base.css file and add: https://prnt.sc/SOLD2YmTaU3w

@font-face {

font-family: ‘YourFontName’;

src: url(‘{{ ‘your-font-file.woff’ | asset_url }}’) format(‘woff’);

font-weight: normal;

font-style: normal;

}

3. Apply the Font: Update the desired element’s CSS:

h1, p {

font-family: ‘YourFontName’, sans-serif;

}

4. Typography Section: If it still doesn’t appear in the theme editor, ensure the font is linked in the appropriate schema settings file.

For further debugging, check for typos in the font name or file path.

If you have other questions, I am willing to answer them more.

Best regards,

Daisy