Font

Shopify Discussion
1

Hi everyone!

I’d like to replace the font used in the “Related products” heading on the product page and in the “Sort by” label in the collection (catalog) page. But I want to use my own custom font.

How can I upload my font file and apply it only to these specific elements?

Thanks in advance for your help!

URL: https://dboutique.shop/products/pink-glam-dress
URL2: https://dboutique.shop/collections/dress

2

Hi @kurage_2025 ,

To upload and use the custom font, please follow the below steps:

  1. Go to your Shopify admin.

  2. Navigate to Content → Files (or Settings → Files, depending on theme version).

  3. Upload your .woff, .woff2, or .ttf font file.

  4. Copy the file URL after upload — you’ll use it in your CSS.

  5. Go to Online Store → Themes → Click Actions → Edit Code

  6. In the Assets folder, open or create a CSS file:

    • Preferably use: base.css or theme.css

    • Add this code at the top:

  7. Use the font
    @font-face {
    font-family: ‘MyCustomFont’;
    src: url(‘https://cdn.shopify.com/s/files/1/xxxx/yourfont.woff2?v=xxxx’) format(‘woff2’);
    }

  8. Apply the Font to Specific Elements
    h2,
    .menu-drawer__navigation-container a,
    .header__heading {
    font-family: ‘MyCustomFont’, sans-serif;
    }

I hope this helps you!

3

Hey! @kurage_2025 ,

To use your custom font only for the “Related products” heading and the “Sort by” label, first upload your font file (e.g., .woff2) to Settings > Files in your Shopify admin. Copy the URL of the uploaded file. Then, in your theme’s CSS (usually base.css or theme.css), add an @font-face rule using that URL, and apply your custom font using CSS like this:

@font-face {
  font-family: 'MyCustomFont';
  src: url('{{ 'your-font-file.woff2' | asset_url }}') format('woff2');
}

.related-products h2,
.collection-filters__sort label {
  font-family: 'MyCustomFont', sans-serif;
}
4

Hello @kurage_2025 you’re using your own custom font and want to apply it only to specific elements — the “Related products” heading on product pages and the “Sort by” label on collection pages — here’s exactly how to do that in the Dawn theme or any similar Shopify theme:

Step 1: Upload the Custom Font

  1. Go to Online Store > Themes in your Shopify admin.

  2. Find your live theme and click Actions > Edit code.

  3. In the Assets folder, click Add a new asset.

  4. Upload your custom font file (.woff, .woff2, or .ttf format recommended).

Let’s assume your file is called MyCustomFont.woff2.

Step 2: Declare the Font in CSS

  1. Still in the Assets folder, open base.css (or theme.css / styles.css, depending on your theme version).

  2. At the very top, add the @font-face declaration like this:

@font-face {
  font-family: 'MyCustomFont';
  src: url('{{ 'MyCustomFont.woff2' | asset_url }}') format('woff2');
  font-weight: normal;
  font-style: normal;
}

Step 3: Target Specific Elements Only
Now let’s write CSS that only targets:

. The “Related Products” heading (we’ll use a class or section selector based on Dawn’s structure).

. The “Sort by” label on collection pages.

Add this to the bottom of base.css:

/* Related Products heading on product page */
.product-recommendations h2 {
  font-family: 'MyCustomFont', sans-serif;
}

/* "Sort by" label on collection page */
.facets__form label,
.facets__label {
  font-family: 'MyCustomFont', sans-serif;
}

Optional (Inspect to Verify)
If your theme is heavily customized and the selectors above don’t work, here’s how to verify:

  1. Open your site in Chrome.

  2. Right-click on the “Related products” heading or “Sort by” label and click Inspect.

  3. Check the class name and adjust your CSS selector accordingly.

For example, if the heading is:

## Related products

Then your CSS would be:

.related-products__heading {
  font-family: 'MyCustomFont', sans-serif;
}

Results
This setup will:

. Load your custom font once from Shopify’s server.

. Apply it only to the elements you specified.

. Not affect the rest of your theme’s typography.

Thank you :blush: