Font not working on mobile Wordpress site

[shelbyqsullivan]

I'm currently building a site in WordPress Gutenburg. The theme documentation gave insturctions for the plugin CustomFonts. I have set this up correctly and uploaded the heading (Active) & body font (Novecento Sans Condensed) as directed using the link provided by Adobe. Then the theme directions say to add this code to the customizer > "Additional CSS" section:

:root {
--heading-font: custom-font-name;
--body-font: another-custom-font-name;
}

2 issues:

1. The heading fonts works great on my desktop, but does not work on mobile in any browser.

2. The body font will not work on either. 

Please help! I am not familiar with HTML and self-taugh everything through trial and error in this customizer. To keep my branding, the font is super important.

Thanks a bunch,

Shelby

[Molly Doane]

Hi Shelby,

Unfortunately we're not familiar with this plugin. However, at the top of the plugin page you linked it says "This plugin helps you easily embed custom fonts files (woff2, woff, ttf, svg, eot, otf) easily in your WordPress website."

Adobe Fonts does not provide font files of any type. I believe the CSS referenced in the theme documentation only specifies the font files you upload to the plugin.

If you would like to use fonts from Adobe Fonts on your site, you will need to use the embed code provided by us in your page CSS: https://helpx.adobe.com/fonts/using/add-fonts-website.html

Otherwise, fonts files for Novecento Sans are available directly from the foundry:

https://typography.synthview.com/novecento-sans-font-family.php

Best regards,

Molly

[Jeewan25075497143y]

I am also having the same problem in my website (link removed by moderator). Custom CSS code is breaking my website. Tried several times but faced the problem again and again.

Thank you

Jeevan Punetha

[ktrbhm]

Hi,
what about trying to use !important rule in that code to see if the thing is the problem of css specificity?
Something like:

--heading-font: custom-font-name !important;
--body-font: another-custom-font-name !important;

It is an ugly solution, but then you will know where the problem is and then maybe just make the selectors more specific. You can read more about css specificity on w3schools (just google that thing).

I hope this helps a little bit,
Regards,

Katarina