I’m using the Envy theme by Eight Themes. I changed the store’s font in the theme.liquid file, but the font for “COLOR” and “SIZE” weren’t affected and it’s causing misalignment (notice how “Gray” is a few pixels above “COLOR”).
How do I either fix the alignment or change the font for “COLOR” and “SIZE” and any other variants?
Thanks!
Why not simply use the Theme Settings to change the font? I would undo everything you did there and do this instead.
For more control:
The Color/Size css selector is .label-font
The Black css selector is .product-swatch-color-name, or more specifically .option-label-wrapper .header
They both use body font style by default, but you can change this if you like.
You don’t need to edit the theme files. You can use the Theme Settings Custom CSS section:
Thanks so much!
The reason I’m not using the Theme Settings to change font is because I’m using a font licensed through TypeNetwork, so it must be done through the code directly. I also prefer having more control than the Custom CSS section allows.
Using the css selectors you mentioned worked perfectly. See below.
