Change Announcement Bar Font and Size - Ride Theme

Store Design
, , ,
1

Hi, I would like to change the font in the announcement bar from the current bold one to the one used in the header and product description page (using “Sans-serif” system font), and to then separately adjust the font size for desktop view only. I appreciate any help.

website: https://leediastore.com/

Thanks!

announcement-bar.jpg
announcement-bar.jpg1541×646 67.2 KB

2

Add this codes inside your base.css or theme.css.

Change the font family in the announcement bar:

p.announcement-bar__message.h5 {
    font-family: sans-serif !important;
}

Adjust the font size for desktop view only:

@media only screen and (min-width: 768px) {
    p.announcement-bar__message.h5 {
        font-size: 25px;
    }
}

I hope that helped!

1 Like
3

The font size code worked but for some reason the font family didn’t change.

1 Like
4

Hello @LEEDIA :waving_hand:

Inside Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

.announcement-bar__message {
    font-family: var(--font-body-family) !important;
}

@media (min-width: 750px) {
    font-size: 20px;
}

The result on desktop

Screenshot 2023-12-21 at 10.07.45.png
Screenshot 2023-12-21 at 10.07.45.png1144×143 8.89 KB

Hope that helps!

5

I appreciate the help but it’s still not changing the font itself, seems like it’s being overridden by another line of code that sets the heading fonts to the bold one. Not sure how to fix this.

6

Here’s the issue (base.css - line 283):

font-family: 'outersans' !important;

If you remove the !important, my code will work!

7

Hi @LEEDIA :waving_hand:

Try using this code instead

#shopify-section-sections--21211832713521__announcement-bar .announcement-bar__message {
    font-family: var(--font-body-family) !important;
}

@media (min-width: 750px) {
    #shopify-section-sections--21211832713521__announcement-bar .announcement-bar__message {
    font-size: 20px !important;
}
}