Custom font not displaying for site title in mobile

Hi everyone,

I've uploaded a custom font called CoralLovers using @font-face and I'm displaying the site title using this font. It displays correctly in the desktop view but its not showing up in the mobile view. The mobile vew displays the font Moret which is from the style editor.

This is the code I've used:

@font-face {
  font-family: "CoralLovers";
  src: url('https://static1.squarespace.com/static/61f080f85f9cf332a6a30286/t/6494de86a758317b9265fead/1687477895079/CoralLovers.otf');
  unicode-range: F018, F01B, F032, F02A;
}

.header-title-text { font-family: "CoralLovers"; text-transform: uppercase; }

Any insight apperciated! Thank you.

That worked. Thank you!