Sort by

[kurage_2025]

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

[PaulNewton]

Hi @kurage_2025 👋 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/c/blog/how-to-get-support-from-the-community/ba-p/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 ⬇ ⬇ ⬇.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

[pawankumar]

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!