Custom font not working on mobile

Site URL: https://www.lervikfot.no/

Help!

My custom font is not showing up on mobile. Can someone please have a look at my code?

https://www.lervikfot.no/
Password: lervikfot

Thanks 🙂

@font-face {
    font-family: 'Termina' !important;
  src: url('https://static1.squarespace.com/static/628d18e2e4b54065b1b27970/t/62aa1abe29f07f3084a9fb45/1655315135411/Termina-Regular.eot'),url('https://static1.squarespace.com/static/628d18e2e4b54065b1b27970/t/628d1a286e533923ca9f7532/1653414440962/Termina-Regular.otf'),url('https://static1.squarespace.com/static/628d18e2e4b54065b1b27970/t/62aa13a2b4c8ed7d22a8477b/1655313315280/Termina-Regular.ttf'),url('https://static1.squarespace.com/static/628d18e2e4b54065b1b27970/t/62a9a08a9a374105354fda5d/1655283850525/Termina-Regular.woff');
}
h1 {font-family: 'Termina-Regular';}
h2 {font-family: 'Termina-Regular';}
h3 {font-family: 'Termina-Regular';}
h4 {font-family: 'Termina-Regular';}
.sqs-block-button-element {
  font-family: 'Termina-Regular' !important;
}
p {font-family: 'Termina-Regular';}
.sqs-block-button-element, .image-button a, .header-actions .btn, .header-skip-link {
  font-family: 'Termina-Regular' !important;
}

Hi,

You declared font name: Termina

But you declared font name: Termina-Regular for elements

so so they definitely won't work. Both font names need to be the same

Also, don't add !important to font-face code

The code should be

@font-face {
    font-family: 'Termina';
    src: url('https://static1.squarespace.com/static/628d18e2e4b54065b1b27970/t/62aa1abe29f07f3084a9fb45/1655315135411/Termina-Regular.eot');
    src: url('https://static1.squarespace.com/static/628d18e2e4b54065b1b27970/t/628d1a286e533923ca9f7532/1653414440962/Termina-Regular.otf'),url('https://static1.squarespace.com/static/628d18e2e4b54065b1b27970/t/62aa13a2b4c8ed7d22a8477b/1655313315280/Termina-Regular.ttf'),url('https://static1.squarespace.com/static/628d18e2e4b54065b1b27970/t/62a9a08a9a374105354fda5d/1655283850525/Termina-Regular.woff');
}

h1, h2, h3, h4, .button-block *, p, .image-button a,.header-actions .btn,.header-skip-link  {
    font-family: Termina !important;
}

12 hours ago, tuanphan said:

Hi,

You declared font name: Termina

But you declared font name: Termina-Regular for elements

so so they definitely won't work. Both font names need to be the same

Also, don't add !important to font-face code

The code should be

@font-face {
    font-family: 'Termina';
    src: url('https://static1.squarespace.com/static/628d18e2e4b54065b1b27970/t/62aa1abe29f07f3084a9fb45/1655315135411/Termina-Regular.eot');
    src: url('https://static1.squarespace.com/static/628d18e2e4b54065b1b27970/t/628d1a286e533923ca9f7532/1653414440962/Termina-Regular.otf'),url('https://static1.squarespace.com/static/628d18e2e4b54065b1b27970/t/62aa13a2b4c8ed7d22a8477b/1655313315280/Termina-Regular.ttf'),url('https://static1.squarespace.com/static/628d18e2e4b54065b1b27970/t/62a9a08a9a374105354fda5d/1655283850525/Termina-Regular.woff');
}

h1, h2, h3, h4, .button-block *, p, .image-button a,.header-actions .btn,.header-skip-link  {
    font-family: Termina !important;
}

 

It worked! Thanks a lot 🙂