Font not working on mobile Wordpress site

New Here ,
Sep 08, 2021 Sep 08, 2021

Copy link to clipboard

Copied

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

Views

666

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Oct 12, 2021 Oct 12, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 30, 2022 Jun 30, 2022

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 06, 2022 Jul 06, 2022

Copy link to clipboard

Copied

LATEST

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
Troubleshooting
Feedback & Suggestions
Fonts Licensing