Safari not using custom font applied (mobile & desktop). Works on Google Chrome (desktop) though. Similar for Google Chrome (mobile).

Hi all,

Safari is showing an (ugly) san-serif-type font on mobile and desktop as the heading font for my site, instead of the one I set normally. (Alpha Centauri). Alpha Centauri works fine for Google Chrome Desktop. Squarespace shows a similar-style font on Google Chrome Mobile, which I'm happy to settle with if there's no ability to make the mobile Google Chrome font the custom font. The Safari font showing, however, I'm not happy to leave as is, as it's no where close to my preferred custom font.

Has anyone found a solution for this?

Cheers, Hayley

44 minutes ago, hayleyclark103 said:

Safari is showing an (ugly) san-serif-type font on mobile and desktop as the heading font for my site, instead of the one I set normally.

I'm not sure what you mean by "the one I set normally" but if my memory is correct, Alpha Centauri is not one of the standard fonts included with Squarespace, so you'd need to use some custom CSS to add it. 

If you are using custom CSS to add the font, please provide us with some more details, including a working link to the site and details of the CSS you are using.

Hi @paul2009,

Yes, sorry, I meant I had used custom code for the font however it wasn't showing in Safari browsers. See my CSS coding for custom fonts below. Please let me know if you have a solution - I'm only having issues with Alpha Centauri (headings).

@font-face {

    font-family: 'AlphaCentauri';

       src: url('FontURLhttps://static1.squarespace.com/static/618a3b0949bb38386ca1783c/t/61d80fc26e3d6a026e03d95b/1641549762219/Alphacentauri-MVY4p.ttf');
  }

h1 {font-family: 'https://static1.squarespace.com/static/618a3b0949bb38386ca1783c/t/61d80fc26e3d6a026e03d95b/1641549762219/Alphacentauri-MVY4p.ttf';}
h2 {font-family: 'https://static1.squarespace.com/static/618a3b0949bb38386ca1783c/t/61d80fc26e3d6a026e03d95b/1641549762219/Alphacentauri-MVY4p.ttf';}
h3 {font-family: 'https://static1.squarespace.com/static/618a3b0949bb38386ca1783c/t/61d80fc26e3d6a026e03d95b/1641549762219/Alphacentauri-MVY4p.ttf';}
h4 {font-family: 'https://static1.squarespace.com/static/618a3b0949bb38386ca1783c/t/61d80fc26e3d6a026e03d95b/1641549762219/Alphacentauri-MVY4p.ttf';}

h1 {
  font-family: 'AlphaCentauri';
  font-weight: 700;
  font-size: 50px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1em;

}

h2 {
  font-family: 'AlphaCentauri';
  font-weight: 700;
  font-size: 40px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1em;

}

h3 {
  font-family: 'AlphaCentauri';
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1em;

}

h4 {
  font-family: 'AlphaCentauri';
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1em;

}

@font-face {

    font-family: 'ArialNarrow';

       src: url(https://static1.squarespace.com/static/618a3b0949bb38386ca1783c/t/61d81824e5fa0940c684979c/1641551910871/ARIALN.TTF);

  }

.sqsrte-large {
  font-family: 'ArialNarrow';
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1em;
}

p {
  font-family: 'ArialNarrow';
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.1em;
  line-height: 1em;
}

.sqsrte-small {
  font-family: 'ArialNarrow';
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.1em;
  line-height: 1em;
}

1 hour ago, hayleyclark103 said:

See my CSS coding for custom fonts

I wasn't able to look at the site as you didn't include a link to it, but I have highlighted some issues in yellow below. The small yellow box you'll see that some guidance text has not been deleted (FontURL). You'll want to delete this otherwise the URL is not correct.

The text in the large yellow box doesn't mean or do anything so should be deleted.

Did this help? Please give feedback by clicking an icon below  ⬇️