How do I change the font to a custom Google font for the whole element?

Ask the Community Customization
1

I’d like to change the font for the entire announcement bar to a custom Google font, how can I do that? What element(s) do I need to change?

2 Likes
3

Hi there, @Nick_Wells :wave:

This CSS code will help you change the message and button text font:

[class*="message__TextHTML-sc"] {
font-family: Roboto;
}

[class*="ButtonBase__Ellipsis-sc"] {
  font-family: Roboto;
}

You’re very welcome to use any other font, providing it’s installed on your website and supported by your browser.

Try it out and let me know how it worked for you :slightly_smiling_face:

4

Hmmm… that didn’t work for me.

5

I tried it on my site, but it looks like it’s defaulting to Times New Roman…

I also tried adding the Google Font CSS to the Custom CSS field:

.league-spartan-<uniquifier> {
  font-family: "League Spartan", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

[class*="message__TextHTML-sc"] {
font-family: Spartan League;
}

[class*="ButtonBase__Ellipsis-sc"] {
  font-family: Spartan League;
}

But, no such luck.

6

Oh, I’m a moron. Had the words flipped around. It worked! Thank you!

1 Like
7

That’s awesome, you’re always welcome :wink:

8

Hey Max, any idea why the background of the announcement bar isn’t appearing on mobile devices? Check out this URL: https://www.appos.io/astra. It works fine on desktop, nothing appears on mobile except the video player thumbnail.

1 Like
9

I see that you’re currently having a chat with my colleague Maria. She’ll check it with the devs and update you once the issue is fixed :slightly_smiling_face: