Skip to main content
amym34546119
Participant
February 28, 2025
Question

Adobe web font not working on mobile or Safari

  • February 28, 2025
  • 1 reply
  • 207 views

Hi There,

 

I've recently embedded an adobe font into a website. The font shows up on Chrome and Firefox desktop only. It doesn't show up on Chrome and Firefox molbile, and it doesn't show up on Safari desktop or mobile.

 

How do it fix this?

 

Thank you,

Amy

 

Website: https://sparkevents.ie/

 

This is the embed code I've used:

<link rel="stylesheet" href="https://use.typekit.net/epp0ksn.css">

 

This is the CSS I've used:

h1,h2,h3,h4,h5,h6 {
font-family: "arboria", sans-serif!important;
font-weight: 700;
font-style: normal;
}
 
body p,li {
font-family: "arboria", sans-serif!important;
font-weight: 400;
font-style: normal;
}
 
body a {
font-family: "arboria", sans-serif!important;
}

 

 

    1 reply

    Tarun Saini
    Community Manager
    Community Manager
    March 4, 2025

    Hi 

    @amym34546119

     

    Welcome to the community! I'd like to inform you that there are other CSS rules in the user's website which are overriding the ones that he mentions in the community post, like:

    . et_pb_text_2 {
     font-family:'Arboria Regular',sans-serif
    }
    .et_pb_text_2 h1 {
     font-family:'Arboria Bold',sans-serif
    }

    The font appears to be working on the desktop because you've added it for desktop use in Creative Cloud as well.  The browser is picking up that version of Arboria instead of the web font. These references need to be updated to use the Adobe Fonts font-family name with a separate font weight, e.g.font-family:'Arboria Bold',sans-serifbecomesfont-family: "arboria", sans-serif;
    font-weight: 700;

     

    Then the web fonts will work across all browsers and devices.

     

    Regards,

    Tarun