Jump to content

Custom fonts not loading on mobile

Recommended Posts

2 hours ago, thedivinesocial said:

Hello! Facing this same issue, please help! Custom font is working on desktop and mobile preview, but not when I load it on my phone (Chrome/Safari ios).

Website is www.thedivinesocial.com

 

thank you!

Remove text: FontURL from your code

It should be

@font-face {
    font-family: 'SeriouslyNostalgic-Regular';
    src: url('https://static1.squarespace.com/static/5fc490c3b8467722f1eb7e1b/t/63d872556c58e6693e510b19/1675129429904/SeriouslyNostalgic-Regular.otf');
}
h1, h2, h3, h4, p {
    font-family: 'SeriouslyNostalgic-Regular' !important;
}

image.png.94579b24e98f617df2885bd254e319cb.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Can anyone help me with css code so my mobile site fonts match the web version? What code am I missing? 

 

Currently, code for this fonts type is:

@font-face {
  font-family: Amaro; src:url(https://static1.squarespace.com/static/5ff112c566132f51dedb19a5/t/5ff11e00461d8d43a3e9c479/1609637377634/Amaro-Regular.otf)  format ('truetype')
 }

 

And assigned css for it is:

h1 {
  font-family: Amaro-regular !important
}

Link to comment
On 2/8/2023 at 3:54 AM, JoyC said:

Can anyone help me with css code so my mobile site fonts match the web version? What code am I missing? 

 

Currently, code for this fonts type is:

@font-face {
  font-family: Amaro; src:url(https://static1.squarespace.com/static/5ff112c566132f51dedb19a5/t/5ff11e00461d8d43a3e9c479/1609637377634/Amaro-Regular.otf)  format ('truetype')
 }

 

And assigned css for it is:

h1 {
  font-family: Amaro-regular !important
}

Both need to be same

image.thumb.png.bbdb19c84522e821e4a801a299fd7603.png

It should be

@font-face {
  font-family: Amaro; 
	src:url(https://static1.squarespace.com/static/5ff112c566132f51dedb19a5/t/5ff11e00461d8d43a3e9c479/1609637377634/Amaro-Regular.otf);
 }
h1 {
  font-family: Amaro !important;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...

hi there! @tuanphan for some reason, my custom fonts aren't showing up on mobile. any help would be greatly appreciated!

code is:

@font-face {
    font-family: Basis Grotesque;
  src: url(https://static1.squarespace.com/static/5e4ed2dff729d15ad54e08f1/t/6408d84fe290431bacad337f/1678301263099/BasisGrotesquePro-Bold.woff);
  }

@font-face {
    font-family: Avenir Next;
  src: url(https://static1.squarespace.com/static/5e4ed2dff729d15ad54e08f1/t/6408d91ca51b8a0bfef563e5/1678301468517/AvenirNextCyr-Heavy.woff);
  }

h1 {
font-family: 'Avenir Next' !important;
  font-size: 22px;
}

h2 {
font-family: 'Avenir Next' !important;
}

h3 {
font-family: 'Avenir Next' !important;
}

h4 {
font-family: 'Avenir Next' !important;
}

.sqsrte-large {
font-family: 'Basis Grotesque' !important;
}

p {
font-family: 'Basis Grotesque' !important;
}

.sqsrte-small {
font-family: 'Basis Grotesque' !important;
}

 

site is https://www.realnewcollective.com/, password: RealNew

thank you so much!!!

Edited by zippy
Link to comment
4 hours ago, zippy said:

hi there! @tuanphan for some reason, my custom fonts aren't showing up on mobile. any help would be greatly appreciated!

code is:

@font-face {
    font-family: Basis Grotesque;
  src: url(https://static1.squarespace.com/static/5e4ed2dff729d15ad54e08f1/t/6408d84fe290431bacad337f/1678301263099/BasisGrotesquePro-Bold.woff);
  }

@font-face {
    font-family: Avenir Next;
  src: url(https://static1.squarespace.com/static/5e4ed2dff729d15ad54e08f1/t/6408d91ca51b8a0bfef563e5/1678301468517/AvenirNextCyr-Heavy.woff);
  }

h1 {
font-family: 'Avenir Next' !important;
  font-size: 22px;
}

h2 {
font-family: 'Avenir Next' !important;
}

h3 {
font-family: 'Avenir Next' !important;
}

h4 {
font-family: 'Avenir Next' !important;
}

.sqsrte-large {
font-family: 'Basis Grotesque' !important;
}

p {
font-family: 'Basis Grotesque' !important;
}

.sqsrte-small {
font-family: 'Basis Grotesque' !important;
}

 

site is https://www.realnewcollective.com/, password: RealNew

thank you so much!!!

Which mobile do you use?

image.png.8e02b09a80e4d91b2c6f56f7074935c8.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.