Web Fonts on Mobile

[Lynsey]

Any idea why some of the webfonts won’t show up on mobile? Specifically my H3 headers?

oxford.amandastrademark.com

[Shri S]

Kindly go to Appearance>>Theme Options>>Basic Settings>>Custom CSS Box:

Add this code there:

ul.our_team li h3 { font-family: ‘Great Vibes’, cursive !important;}

Regards,
Shri

[Lynsey]

That fixes the issue on mobile, but when viewed on desktop now, it looks as though that font is Comic Sans? Also, what custom CSS should I be using the force the Great Vibes font for other sections – IE: the services section.

[Shri S]

Kindly go to Appearance>>Theme Options>>Basic Settings>>Custom CSS Box:

Add this code there:

@media screen and (max-width:767px) {
ul.our_team li h3 { font-family: ‘Great Vibes’, cursive !important;}
}

Remove this code:

ul.our_team li h3 { font-family: ‘Great Vibes’, cursive !important;}

Regards,
Shri

[Lynsey]

Thank you. This fixes the problem only on the Our Team section. Is there a way to do this universally for the entire theme?

[Shri S]

I believe most of the fonts and styles are given in basic settings. So do you mean you want to apply same font for all of the website?

Regards,
Shri

[Lynsey]

Yes, but those defaults don’t appear to be working. The only way to get them to appear is if I go into the custom CSS window and override the default settings.

[Shri S]

Okay then you can override the settings via Custom CSS and use your own custom fonts.

Regards,
Shri

[Author]

Posts