How to change product filter font and also the dropdown of it

Technical Q&A
,

Topic summary

A user seeks help changing the font of product filters and their dropdown menus in Shopify’s Dawn theme.

Initial Responses:

  • One contributor suggests using Shopify’s built-in theme customization (Theme Settings > Typography) to change fonts globally.
  • Another offers custom CSS targeting classes like .facets__filter and .facets__dropdown-toggle, but the code appears corrupted/reversed in the thread.

Resolution:
After the user shares their preview link and clarifies which specific font element needs changing (confirmed via screenshot), a working solution is provided:

Steps:

  1. Navigate to Online Store > Themes > Edit Code
  2. Open Assets > base.css
  3. Add custom CSS at the bottom targeting multiple filter-related classes (.facet-filters__field select, .mobile-facets__sort select, .facets__display, etc.) with font-family: 'Belleza' !important;

Outcome: The solution successfully resolves the issue. The discussion is marked as resolved with the user confirming the code worked.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

Hi. Just wanted to seek help on how to change the font of the product filter on my store and also change the font of the dropdown too. I’m using Dawn theme.

RyomenSukuna30_0-1723761439937.png
RyomenSukuna30_0-1723761439937.png1470×613 56.7 KB

RyomenSukuna30_1-1723761471887.png
RyomenSukuna30_1-1723761471887.png541×260 37.3 KB

1 Like
2

Hi @RyomenSukuna30 . Great question!

You can change your themes font by completing the following instructions:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Customize.
  3. Click the Theme settings gear icon.
  4. Click Typography.
  5. To change a font type for your store’s headings or body text, click Change in the Headings or Body section.
  6. Click the name of the font that you want to use, and then click Select.
  7. Click Save.

Let me know if you have any questions or need more help.

3

@RyomenSukuna30

Thank you for reaching out and posting this question!
Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

4

Hi,

You can use custom CSS( at base.css or similar)

Code example

/* Change the font of the product filter */
.facets__filter, .facets__filters, .facets__filter-title {
    font-family: 'Your Font Name', sans-serif; /* Replace with your desired font */
    font-size: 16px; /* Adjust font size as needed */
    color: #333; /* Adjust color as needed */
}

/* Change the font of the dropdown toggle */
.facets__dropdown-toggle {
    font-family: 'Your Font Name', sans-serif; /* Replace with your desired font */
    font-size: 14px; /* Adjust font size as needed */
    color: #555; /* Adjust color as needed */
}

/* Change the font of the dropdown content */
.facets__dropdown-content {
    font-family: 'Your Font Name', sans-serif; /* Replace with your desired font */
    font-size: 14px; /* Adjust font size as needed */
    color: #777; /* Adjust color as needed */
}
5

Hello. Thanks for the response. I tried all the codes but it seems it’s not working.

1 Like
6

Hi. Sure! Here’s the preview link: https://g9fi6vk3mosohjvm-62893490353.shopifypreview.com

I’m also seeking help on how to change the font of the encircled part below.

RyomenSukuna30_0-1724089102316.png
RyomenSukuna30_0-1724089102316.png519×743 54 KB

7

@RyomenSukuna30 oh sorry can you please confirm this font

KetanKumar_0-1724131520056.png
KetanKumar_0-1724131520056.png1920×922 238 KB

8

Yes. That’s the font that I’m trying to use. How did you do that? :sweat_smile:

1 Like
9

@RyomenSukuna30 Thanks for confirm, yes please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
.facets__summary-label, .facets__summary, .facet-filters__field .select__select, .mobile-facets__sort .select__select, .facets__display {
    font-family: 'Belleza' !important;
}
1 Like
10

Thank you so so much. It worked!

1 Like
11

@RyomenSukuna30 Sounds Good

its my pleasure to help us