Jump to content

Custom font not working on mobile

Recommended Posts

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;
}

Link to comment

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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 🙂

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.