Change font of drop-down menu in product listing

Hi there,

I started using the Brine template, and in my product listing I have a drop down menu for size and quantity

The size drop down uses a different, ugly font which is not related to the template style. Any idea on how to change this?

Thanks

Marika

You need to use custom CSS.

Can you share link to product listing page?

@tuanphan please see the link below!

https://www.svikis.com/shop/triangle-statement-ring-sterling-silver

Thanks

On 2/27/2020 at 7:41 AM, MarikaS said:

@tuanphan please see the link below!

 

https://www.svikis.com/shop/triangle-statement-ring-sterling-silver

 

Thanks

Add to Home > design > Custom CSS

.ProductItem-details .variant-option select option {
    font-family: monospace !important;
}
.ProductItem-details .variant-option select {
    font-size: 20px;
}

Hi @tuanphan, 

that custom css didn't seem to work on my site. It isn't live yet but looks like this (attached screen shot).  Any suggestions for the below code?

/* ProductItem-details */
.variant-option select option {
    font-family: roboto !important;
}
.ProductItem-details .variant-option select {
    font-size: 16px;
}

5 hours ago, runsweatinspire said:

Hi @tuanphan, 

that custom css didn't seem to work on my site. It isn't live yet but looks like this (attached screen shot).  Any suggestions for the below code?

/* ProductItem-details */
.variant-option select option {
    font-family: roboto !important;
}
.ProductItem-details .variant-option select {
    font-size: 16px;
}

 

You can setup password & share url

@tuanphan

Sorry, I don't understand. The password is already setup but the site isn't live as yet. deeksdemosite.squarespace.com

12 hours ago, runsweatinspire said:

@tuanphan

Sorry, I don't understand. The password is already setup but the site isn't live as yet. deeksdemosite.squarespace.com

 

#productDetails .product-variants .variant-option select {
    font-family: roboto !important;
}

On 2/26/2020 at 7:41 PM, MarikaS said:

@tuanphan please see the link below!

 

https://www.svikis.com/shop/triangle-statement-ring-sterling-silver

 

Thanks

Hi MarikaS I'm having the same issue how did you change it?

Hi,

I'm not a coder but I managed to fix my issue by combining snippets I found on the forum. The second snippet is what changed the font on the dropdown. I use the Brine template if that helps.

#productDetails .product-variants .variant-option select {
    font-family: Montserrat !important;
}

/* Variant dropdown size */
.ProductItem-details .variant-option select option {
    font-size: 12px;
  font-family: Montserrat;
}

Hello

I have the same problem.  The Body text in my website is Myriad Pro but the dropdown font looks like Times New Roman. I would like it to be the same as the rest of the website.  I am NOT A CODER so don't understand the fixes above.  Please can someone give me a very clear idiot's guide to how to fix the problem?

Thank you!

21 hours ago, CoWT said:

Hello

I have the same problem.  The Body text in my website is Myriad Pro but the dropdown font looks like Times New Roman. I would like it to be the same as the rest of the website.  I am NOT A CODER so don't understand the fixes above.  Please can someone give me a very clear idiot's guide to how to fix the problem?

Thank you!

If you share link to product in screenshot, we can give code easier

Hi all and @tuanphan, I am also having trouble with this. I've tried all the code options mentioned above and none of them have worked for me. I am on the Montauk template. Any assistance would be greatly appreciated ☺️

On 10/14/2021 at 12:48 PM, Nicolem said:

Hi all and @tuanphan, I am also having trouble with this. I've tried all the code options mentioned above and none of them have worked for me. I am on the Montauk template. Any assistance would be greatly appreciated ☺️

Can you share link to a product on your site?

On 2/29/2020 at 6:40 PM, tuanphan said:

Add to Home > design > Custom CSS

.ProductItem-details .variant-option select option {
    font-family: monospace !important;
}
.ProductItem-details .variant-option select {
    font-size: 20px;
}

 

Hi tuanphan! Thanks for this code, I managed to change the text in the drop-down menu with this code, but I can't change the text and size of the menu itself, could you help me?

https://www.veneramor.com/store/p/matte-vertical-posters
 

3 hours ago, tuanphan said:

Use this CSS code

.variant-option-title {
    font-size: 30px;
}

.variant-select-wrapper *, .variant-select-wrapper:before {
    font-size: 10px !important;
}

 

Perfect! Thank you so much!