Jump to content

Custom font not appearing in mobile or Safaria

Recommended Posts

Hi there! 

I have a custom font (Graphik) on our site which appears on desktop on Chrome, but we can't get it to appear on Safari, or on mobile (Chrome and Safari on phone) 

This is the code we are using to get the custom code.  Trying to target the main header on the home page, although it looks like all of the other font's aren't working as well. 

Any help would be appreciated! (Link to current site https://www.folio.nz/)

@font-face {
	font-family: Graphik;
	src: url(https://static1.squarespace.com/static/5ff8d2ac6bbc7c345298abfd/t/5fff9640df80a433128efa3d/1610585664855/Graphik-Light-Web.woff);
}
h1, h2, h3, h4 {
	font-family: Graphik;
 	font-weight: 600;
}

 

Link to comment
  • Replies 2
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

13 minutes ago, TommyNZ said:

Hi there! 

I have a custom font (Graphik) on our site which appears on desktop on Chrome, but we can't get it to appear on Safari, or on mobile (Chrome and Safari on phone) 

This is the code we are using to get the custom code.  Trying to target the main header on the home page, although it looks like all of the other font's aren't working as well. 

Any help would be appreciated! (Link to current site https://www.folio.nz/)

@font-face {
	font-family: Graphik;
	src: url(https://static1.squarespace.com/static/5ff8d2ac6bbc7c345298abfd/t/5fff9640df80a433128efa3d/1610585664855/Graphik-Light-Web.woff);
}
h1, h2, h3, h4 {
	font-family: Graphik;
 	font-weight: 600;
}

 

Check this

 

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment

@Web_Solutions thanks for that link but it appears it still isn't working! I tried using the TTF and OTF file in case it was that but still no luck! 

This is my CSS I'm using and as far as I know it should be all set up correctly. I'm not sure if I'm missing something really obvious here! 

Any help is much appreciated 🙂
 

@font-face {
	font-family: 'Graphik';
	src: url('https://static1.squarespace.com/static/5ff8d2ac6bbc7c345298abfd/t/65a58c2774a79d3bfc9bd493/1705348136769/Graphik-Light-Web.otf');
}
h1, h2, h3, h4 {
	font-family: 'Graphik' !important;
}

[data-collection-type^="blog"] .item-pagination-title {
	font-family: 'Graphik';
}

a {
	font-family: 'Graphik';
}
p {
	font-family: 'Graphik';
}

 

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.