mobile font error

Hi, my custom font is showing on desktop but not on mobile. I am using it for H3. Here is the code I put it that is working for desktop.

font-face {
font-family: 'belovedjourney';
src: url('https://static1.squarespace.com/static/5bf9f97ef2e6b130dad9cefb/t/64402052ccc2a950dea6c572/1681924178955/Beloved+Journey.otf');
} h3 {
font-family: 'belovedjourney';
}

is there something to add for mobile too? thank you

You need an @ in front of font-face 

@font-face {
  font-family: 'belovedjourney';
  src: url('https://static1.squarespace.com/static/5bf9f97ef2e6b130dad9cefb/t/64402052ccc2a950dea6c572/1681924178955/Beloved+Journey.otf');
} 
h3 {
  font-family: 'belovedjourney';
}