Theme customization

Store Design
1

I need to install WOFF font ABC Diatype Cyrillic into Baseline theme and apply a two-tone CSS style to headers.

1 Like
2

Hi @SamOlive ,
You can do both parts (font install + two-tone headers) pretty easily in the Baseline theme.
1. Upload and Add the WOFF Font (ABC Diatype Cyrillic)

  1. Go to Shopify Admin → Content → Files
  2. Upload your .woff (and preferably .woff2) font files

Then open your theme code:

Online Store → Themes → Edit Code

Add this inside your main CSS file (usually base.css or theme.css):

@font-face {
font-family: 'ABC Diatype Cyrillic';
src: url('{{ "ABC-Diatype-Cyrillic.woff2" | file_url }}') format('woff2'),
url('{{ "ABC-Diatype-Cyrillic.woff" | file_url }}') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}

Now apply it to headings:

h1, h2, h3, h4, h5, h6 {
font-family: 'ABC Diatype Cyrillic', sans-serif;
}

2. Apply Two-Tone Style to Headers
Gradient Text (clean & modern)

h1, h2, h3 {
background: linear-gradient(90deg, #000 50%, #ff0000 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
3

Hey @SamOlive

First, upload your WOFF file in the Shopify theme editor under Assets, then declare the font-face and apply it globally. For the two-tone header effect, you’ll use a CSS technique that layers a gradient clip on your heading elements.

Drop this into your base.css or a custom theme.css asset file:

@font-face {
font-family: 'ABC Diatype Cyrillic';
src: url('{{ "ABCDiatype-Cyrillic.woff" | asset_url }}') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}

h1, h2, h3 {
font-family: 'ABC Diatype Cyrillic', sans-serif;
background: linear-gradient(180deg, #000000 50%, #888888 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

Let me know if the font loads.

Best,
Moeed

4

Many thanks for your guidance. The font has been uploaded into content files.

I can’t locate the main CSS file - screenshot below. Where might it be on all off these?

Screenshot 2026-03-17 at 11.49.25.png
Screenshot 2026-03-17 at 11.49.25.png806Ă—670 32.7 KB

Best,

Sam Olive
sam@winefreedom.co.uk

5

Shopify has a document for this:
https://shopify.dev/docs/storefronts/themes/architecture/settings/fonts#shopify-admin

Also, couple corrections to what’s written previously:

  1. Do not upload fonts to Assets – they may be damaged there.
    As written in the doc:

  1. You do not need to edit theme code for this.
    Most themes allow you to have a “Custom liquid”/“Custom code” section in Footer group – this is where you can put the code needed for adding a font.
    If this is a CSS code, wrap it with <style> and </style> tags.

    Ultimately, this is the same as you put code in your theme.liquid, but without messing with theme code.

  2. Shopify does not process liquid code in .css files, so adding codes like suggested in previous posts would not work.

Search forum – there has been a bunch of solutions given for the issue.