Sort by

Shopify Discussion

Topic summary

A user wants to upload a custom font file (e.g., MyFont.woff2) and apply it specifically to the “Sort by” label on their Shopify collection page.

Initial Response:

  • One commenter notes this is an advanced customization beyond typical forum scope, suggesting the user research webfont tutorials independently
  • Provides the CSS selector label[for="SortBy"] to target the Sort label once fonts are configured
  • Offers paid customization services as an alternative

Detailed Solution Provided:
Another user outlines a three-step process:

  1. Upload fonts: Navigate to Shopify Admin → Online Store > Themes → Actions > Edit Code, then upload font files (.woff, .woff2, .ttf) to the Assets folder
  2. Declare the font: Add @font-face declaration in the main CSS file (base.css, theme.css, or styles.css) using Shopify’s asset_url filter
  3. Apply to element: Use the provided CSS selector with font-family: 'MyCustomFont', sans-serif;

The discussion remains open pending confirmation from the original poster whether the solution works.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

Hi everyone!

I want to change the font of the “Sort by” text on the collection (catalog) page using a custom font that I’ll upload myself (e.g. MyFont.woff2).

Could someone please explain step by step how I can upload my font and apply it only to the “Sort by” label?

Thanks in advance for your help!

URL: https://dboutique.shop/collections/all

1 Like
2

Hi @kurage_2025 :waving_hand: Plenty of tutorials online for learning how to setup webfonts.

Fully implementing a custom webfont step by step in a tutorial is waaaay beyond the scope of the forums as it’s an advanced theme customization requiring multiple steps.

The forums are best for singular scoped questions where you show your work because others are not here to do everything for you.

READ: https://community.shopify.com/post/2254458

When you have webfonts setup you can use the following CSS selector to target the Sort label:

label[for="SortBy"] {

}

Meanwhile if you need this customization fully setup for you fast then contact me for services.
Contact info in forum signature below :down_arrow: :down_arrow: :down_arrow:.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

3

Hi @kurage_2025
I hope my message finds you well!

You can upload the fonts in theme files/assets and include those in theme.liquid or some css file and the use those on your needed selectors, it will be something like this
Step 1: Upload the Font Files

  • Go to your Shopify Admin → Online Store > Themes.

  • Click “Actions > Edit Code” on your active theme.

  • In the Assets folder, click “Add a new asset” and upload your font files (.woff, .woff2, or .ttf).
    Step 2: Declare the Font in Your CSS

Add this inside your main CSS file (usually in base.css, theme.css, or styles.css located under Assets):

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

Step 3: Apply the Custom Font to Elements
You can add this in your relevant css file

label[for="SortBy"] {
  font-family: 'MyCustomFont', sans-serif;
}

Please like and accept the solution if it is helpful to you

Thanks!