Issue with font responsiveness

Activello
1

I have customized my fonts using some basic CSS code (of which I know very little), but on a tablet or mobile device the fonts all revert to the theme defaults. For example I used the following code for the taglnie:
#logo .tagline {
font-family: Amatic SC;
font-size: 24px;
}
But when I preview it for a mobile device it displays as whatever the original theme font is. This happens for all fonts on the page: post title, top menu, sidebar, category, everything. How can I make my font changes consistent across all devices? Particularly font family.

2

Hi @waywardgringos,

I hope you are well today and thank you for your question.

Please try changing the above font as following.

#logo .tagline {
font-family: "Amatic SC";
font-size: 24px;
}

Best Regards,
Movin

3

That makes no difference. It still displays correctly on a computer but reverts to the default font on a tablet or mobile.

4

Could you please share me your site URL where it’s happening so that i can troubleshoot it?

5

It’s waywardgringos.com. I believe you will just see an under construction page at the moment.

6

Yes i see an under construction page on your shared site.

Would you mind if i log in to your site and access it? If this is ok then could you please share me your site log in details privately by checking the option “Set as private reply” when replying to this topic?

7

Yes, the login is
username: [email protected]
password: Birdcoaster15!

8

Thank you for sharing the site details.

You have added the font code in the media query as following therefore it is only working on the screen having minimum width 767px and not on mobile devices.

@media (min-width: 767px){
#logo .tagline {
    font-family: Amatic SC;
    font-size: 24px;
    border-top: thin solid;
    border-spacing: 0px;
}

To resolve the issue please remove that code from media query.

9

Thank you! Of course it was just a media query without a closing bracket.

10

You are most welcome here :slight_smile: