Change Announcement Bar Font and Size - Ride Theme

[LEEDIA]

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!

[Spac-es]

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!

[LEEDIA]

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

[Spac-es]

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

font-family: 'outersans' !important;

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

[ZenoPageBuilder]

Hello @LEEDIA 👋

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

Hope that helps!

[LEEDIA]

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.

[ZenoPageBuilder]

Hi @LEEDIA 👋

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;
}
}