How do i edit the font on the product cards on the home page?

Store Design
,
1

The text that is the clickable link to the product is tiny and a weird colour - not the same as my standard body text. How can I change it? I know how to change the typography in themes as well a using the shopify app AZ: Google Font & Custom Fonts but i cannot see the product link as an option anywhere. I’m using Dawn template www.magickandme.com

MagickandMe_0-1718412996760.png
MagickandMe_0-1718412996760.png1061×210 34 KB

2

Hi @Magick-and-Me ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

BSSCommerceHDL_1-1718414715225.png
BSSCommerceHDL_1-1718414715225.png1902×899 133 KB

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

BSSCommerceHDL_2-1718414719633.png
BSSCommerceHDL_2-1718414719633.png1916×934 101 KB

Step 3: Insert the below code at the bottom of the file → Save

.card__heading.h5 a {
    font-family: Roboto, sans-serif !important;
    color: #0c0c0c !important;
    font-size: 15px;
}

Here is result:

BSSCommerceHDL_0-1718414667643.png
BSSCommerceHDL_0-1718414667643.png1919×885 291 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

3

@Magick-and-Me - please add this css to the very end of your base.css file and check

.full-unstyled-link{font-family: 'Magic Romance' !important;}
4

you rock! thank you so much it looks perfect now :face_blowing_a_kiss:

5

Hi @Magick-and-Me ,

We’re happy to see that our suggestion helped you solve the issue.

Should you need any further information, please do not hesitate to contact us by tagging directly at Community post. We will check and let you know soon.

Thanks in advance :heart_eyes:

6

Another option is to pick elements in the Font Pro app directly from your website and see your fonts applied in real-time.