Custom font not working on mobile

Hello!

I've customised headings' font with a css. While the custom font works perfectly on the desktop version, it doesn't display correctly on mobile devices.

This is the website:

https://carillon-cylinder-2nhh.squarespace.com/

Psw: Password1

This is the script:

@font-face {
    font-family:'DM Serif Display';
    src: url(https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap.ttf);
} 

h1 {
    font-family: 'DM Serif Display';
}

h2 {
    font-family: 'DM Serif Display';
}

h3 {
    font-family: 'DM Serif Display';
}

h4 {
    font-family: 'DM Serif Display';
}

Thanks for any help!

6 minutes ago, FFederica said:

https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap.ttf

This isn't a font file, you need to reference a font file by uploading it and adding the upload location URL.

OK, thanks @Ziggy! I figured out how to do it, and now the script works

10 minutes ago, FFederica said:

OK, thanks @Ziggy! I figured out how to do it, and now the script works

Nice one!