Hi there! I got the announcement bar working (somewhat well) on my website. I can’t figure out how to make the close button work properly… but, that’s a secondary issue.
I used the code Max provided to update the font on desktop/notebook:
[class*="message__TextHTML-sc"] {
font-family: League Spartan;
font-size: 16px;
font-weight: 300;
}
[class*="ButtonBase__Ellipsis-sc"] {
font-family: League Spartan;
font-weight: 500;
font-size: 14px;
}
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&family=Sen:wght@400..800&display=swap');
* {
font-family: 'League Spartan', sans-serif !important;
}
But, I had to change it a bit to make it work with my site. Now, the Google Font (Spartan League) doesn’t appear correctly on mobile. Can you help?
See this test site: https://www.appos.io/dev2
Thanks!
2 Likes
Max
April 9, 2025, 10:45am
3
Hi there, @Nick_Wells
This website seems to be not available at the moment:
Could you please check it?
1 Like
Sorry, I moved the file. You can access it again now. Appos | Turn your website into a mobile app
2 Likes
Max
April 9, 2025, 12:59pm
5
I’ve checked your website and see that the Spartan font is applied to the mobile version:
Could you please double-check it? If it looks different for you, please send me a screenshot of what you see.
Regarding the close button, could you please elaborate on the issue you’re experiencing?
1 Like
Hey Max!
I apologize, I keep moving things around on you… It’s the Announcement Bar on mobile that I’m trying to switch to the League Spartan font.
I have the Announcement Bar installed on Appos | Turn your website into a mobile app .
Thank you!
2 Likes
Max
April 10, 2025, 1:06pm
7
Ah, got it, sorry for misunderstanding!
The code you were using didn’t work on desktop either. I’ve slightly adjusted it and now the correct font is applied there:
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&family=Sen:wght@400..800&display=swap');
* {
font-family: 'League Spartan', sans-serif !important;
}
[class*="message__TextHTML-sc"] {
font-size: 16px;
font-weight: 300;
}
[class*="ButtonBase__Ellipsis-sc"] {
font-weight: 500;
font-size: 14px;
}
Please check it out and let me know if it’s fine now
1 Like
