Custom font changes color of letters in mobile version

I have a custom font for Headlines and it is doing weird things on mobile. It is changing random letters to different colors, not appearing at all in some area, and putting a weird black texture on top of the letters in other areas. No clue why this is happening or how to fix it. Everything works fine on desktop and in the backend preview mode of mobile.

It appears to be most prominent in areas where I either underlined the custom text, or am using scroll with the custom text.

Hi @rylie13245, can you share the custom code you’re using? Thanks.

@font-face {
    font-family: AKIM;
    src: url(https://static1.squarespace.com/static/5a592390d74cff7fa424222a/t/66f18e07785e31191c4dc08a/1727106567699/AKimTypeFont.otf);
} h1 {
    font-family: 'AKIM';
}



I started having the issues, so I added this one to see if it would help, but it did not:

.Marquee * {
   font-family: AKIM!important;
   color:WHITE!important
}

website link is: lovewellgroup.com

On 10/9/2024 at 8:54 PM, rylie13245 said:

@font-face {
    font-family: AKIM;
    src: url(https://static1.squarespace.com/static/5a592390d74cff7fa424222a/t/66f18e07785e31191c4dc08a/1727106567699/AKimTypeFont.otf);
} h1 {
    font-family: 'AKIM';
}



I started having the issues, so I added this one to see if it would help, but it did not:

.Marquee * {
   font-family: AKIM!important;
   color:WHITE!important
}

 

 

website link is: lovewellgroup.com

Do you have other formats? ttf, woff, woff2

no, just .otf

On 10/16/2024 at 1:25 PM, rylie13245 said:

no, just .otf

@tuanphan