Skip to main content
shelbyqsullivan
shelbyqsullivan
Participant
September 9, 2021
Question

Font not working on mobile Wordpress site

  • September 9, 2021
  • 3 replies
  • 2138 views

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

    This topic has been closed for replies.

    3 replies

    K
    ktrbhm
    Participant
    July 6, 2022

    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

    J
    Jeewan25075497143y
    Participant
    June 30, 2022

    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

    Molly Doane
    Molly Doane
    Participating Frequently
    October 12, 2021

    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

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices