Pro 4.0.9 - Issue with css and headings in typography

[amyharris]

Hello!

I just changed my heading fonts in the global css section and in theme typography options and now on mobile the fonts aren’t showing up anymore. If I set the typography heading to Oswald which is the heading used in the theme, they show up as a default heading font. If I change it to something like Barlow Condensed, then the Oswald headings come back in mobile browsers. I’ve flushed the cache in wp admin and on my mobile browsers.

Did I break my theme? I updated to Pro 4.0.9 today before this happened. The issue is only on mobile devices, not on the desktop version.

I will send you my site staging address in a private message.

Thank you!

[marc_a]

Hi Amy,

Thanks for reaching out.

I can’t replicate the issue you are facing to with the CSS and headings in the typography in your website, I suggest you will clear your browser cache and any 3rd party cache you installed to your website.

Hope that helps.

Thank you.

[amyharris]

Thank you for your reply. I have cleared the managed wordpress hosting cache and have no 3rd party plugin added. I’m afraid to continue if the theme is broken. I was very excited to use your theme because everything was working so well until yesterday. Please let me know if you ever figure out why mine is doing this.

[amyharris]

I’ve attached screenshots from my desktop and from my phone to show you what I am talking about.

[amyharris]

[amyharris]

This is the only css I’ve added since I deleted the css to override the headings when the problem happened.

.x-navbar-inner .x-container {
width: 100%;
max-width: 99%;
}

.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
padding-left: 18px;
padding-right: 18px;
}

.x-navbar .mobile .x-nav {
padding: 0% 5% 0% 5%;
}

.x-btn-navbar, .x-btn-navbar.collapsed {
margin-top: 20px;
margin-bottom: 20px;
}

.x-navbar ul.sub-menu li a {
font-family: Lato !important;
font-size: 14px !important;
font-weight: 400 !important;
}

@media (max-width: 979px) {
.x-navbar .mobile .x-nav li>a {
font-size: 17px;
font-weight: 400 !important;
margin-bottom: .3em;

}

}

[amyharris]

I found a solution for anyone who reads this!
I turned on the font manager in the typography menu, went to the font manager in the navigation menu, deleted the font Oswald. I then added Oswald to my adobe typekit web project and then re-added Oswald from the adobe fonts and then set my typography headings back to Oswald. I had to go to each heading on every page and reselect Oswald Light… but after all of that, I can now see Oswald headings on mobile devices!

[tristup]

Hi Amy,

Great that at last, you are able to find the solution on your own. Thanks for posting the solutions for others.