Custom font won't work on other devices

Site URL: http://basehabitation.squarespace.com

Hello,

I have installed my custom font and have inserted the CSS to make it work on the website. It works fine on my laptop but on mobile and any other device, the font does not load, it is replaced by something else. 

Here is the code I used: 

font-face {
font-family: 'JUNICODE-BOLD';
src: url('https://static1.squarespace.com/static/62f6601885a37304312048c7/t/62f663650d28410c7e01d7c9/1660314469574/Junicode-Bold.ttf');
}

h1 {
font-family: 'JUNICODE-BOLD';
}

h2 {
font-family: 'JUNICODE-BOLD';
}

h3 {
font-family: 'AILERON-ITALIC';
}

h4 {
font-family: 'JUNICODE-BOLD';
}

.header-title-text {
  font-family: 'AILERON';
}

.sqsrte-large {
font-family: 'JUNICODE-BOLD';
}
p {
font-family: 'AILERON';
}
.sqsrte-small {
font-family: 'AILERON';
}

Any help would be greatly appreciated!

I uploaded the woff and woff2 fonts now but still nothing for mobile... It seems to work on other pcs.

Hi,

font-face code is missing a symbol

@font-face

not font-face