Adobe web font not working on mobile or Safari

Report · Feb 28, 2025

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:

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;

}

Report · Mar 04, 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