Jump to content

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

Recommended Posts

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

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.

Edited by paul2009

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

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

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

image.thumb.png.af76e1d7c75a4a3f17ccc140db6b17a7.png

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

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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.