Jump to content

Custom Font not showing on Safari and iOS

Recommended Posts

Posted (edited)

Site URL: https://bozoo.it/

Hello,

I m having trouble with my website.

I uploaded a custom font in CSS but it is not showing the right one in Safari/Android and Chrome from Android mobile



HERE THE CODE USED AT THE MOMENT

/* custom font*/
@font-face {
font-family: NeueHaasUnicaW1G-Regular;
src: url(https://static1.squarespace.com/static/62d133022b745d11a9223070/t/6339b37b08415113fc075b75/1664725884064/NeueHaasUnicaW1G-Regular.otf@font-face {);

// Newsletter Form Title //
.newsletter-form-header-title {
  font-family: NeueHaasUnicaW1G-Bold !important;
}

// Newsletter Form Description //
.newsletter-form-header-description p {
  font-family: NeueHaasUnicaW1G-Regular !important;
}

// Newsletter Form Fields //
.newsletter-form-field-element {
  font-family: NeueHaasUnicaW1G-Regular !important;
}

// Newsletter Form Button //
.newsletter-form-button {
  font-family: NeueHaasUnicaW1G-Regular !important;
}

// Newsletter Form Footnote //
.newsletter-form-footnote {
  font-family: NeueHaasUnicaW1G-Regular !important;
}

// Site Title //
.header-title-text a {
  font-family: NeueHaasUnicaW1G-Regular !important;
}

// Site Navigation //
.header-nav-item a {
  font-family:NeueHaasUnicaW1G-Regular !important;
}

@font-face {
font-family: NeueHaasUnicaW1G-Bold;
src: url(https://static1.squarespace.com/static/62d133022b745d11a9223070/t/6339aee0e0b2951ae90bd2ff/1664724704997/NeueHaasUnicaW1G-Bold.otf@font-face {);

h1 {
font-family: 'NeueHaasUnicaW1G-Bold';
}

h2 {
font-family: 'NeueHaasUnicaW1G-Bold';
}

h3 {
font-family: 'NeueHaasUnicaW1G-Bold';
}

p {
font-family: 'NeueHaasUnicaW1G-Regular';
}

// Small or Tertiary Button //
.sqs-block-button-element--small,  .sqs-button-element--tertiary {
  font-family: NeueHaasUnicaW1G-Regular !important;
}

// Medium or Primary Button //
.sqs-block-button-element--medium, .sqs-button-element--primary {
  font-family: NeueHaasUnicaW1G-Regular !important;
}

// Large or Secondary Button //
.sqs-block-button-element--large, .sqs-button-element--secondary {
  font-family: NeueHaasUnicaW1G-Regular !important;
}

 

Thank you in advance

Edited by claudiafrat
Posted

Check your @font-face declarations:

@font-face {
font-family: NeueHaasUnicaW1G-Regular;
src: url(https://static1.squarespace.com/static/62d133022b745d11a9223070/t/6339b37b08415113fc075b75/1664725884064/NeueHaasUnicaW1G-Regular.otf@font-face {);
} 

you have @font-face { inside the brackets at the end of the font file's URL for both of them which is likely what's causing the issue.

Remove the two instances and you should be good. Otherwise we'll keep investigating.

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

For Custom Plugins email me 🧩

Posted

@KwameAndCo You mean like this?

@font-face {
font-family: NeueHaasUnicaW1G-Regular;
src:url(https://static1.squarespace.com/static/62d133022b745d11a9223070/t/6339b37b08415113fc075b75/1664725884064/NeueHaasUnicaW1G-Regular.otf@font-face);

I've tried and it's still not visible.

 

 

Posted

Remove this underlined bit.

@font-face {
font-family: NeueHaasUnicaW1G-Regular;
src:url(https://static1.squarespace.com/static/62d133022b745d11a9223070/t/6339b37b08415113fc075b75/1664725884064/NeueHaasUnicaW1G-Regular.otf@font-face);

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

For Custom Plugins email me 🧩

  • 10 months later...
Posted

Hi all,I have this the other way around.. My uploaded fonts work in safari but in chrome they suddenly are changed in not the font I have upload. In the picture below a picture. @KwameAndCo, canyou help me out?

@font-face {

    font-family: 'Sombra';

       src: url('https://static1.squarespace.com/static/649afdb7826c3b5cbe03e79c/t/649b017e011148431501e6d1/1687880062743/Sombra-Medium.otf');

  }

h1 {font-family: 'Sombra';}
@font-face {

    font-family: 'Sombra2';

       src: url('https://static1.squarespace.com/static/649afdb7826c3b5cbe03e79c/t/649b017180cc59430f77815a/1687880049395/Sombra-Bold.otf');

  }

h2 {font-family: 'Sombra2';}


@font-face {

    font-family: 'Fontwolf2';

       src: url('https://static1.squarespace.com/static/649afdb7826c3b5cbe03e79c/t/64bd4e0542738e3257eb8586/1690127877277/font.woff2');

  }

@font-face {

    font-family: 'ScalaSansProBold';

       src: url('https://static1.squarespace.com/static/649afdb7826c3b5cbe03e79c/t/64bd4e0542738e3257eb8586/1690127877277/font.woff2');
 }
H3,H4,p {font-family: 'ScalaSansProBold';}

Posted

@Dieneke try adding !important to the font-family declarations.

Otherwise send me a screenshot or link to the site.

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

For Custom Plugins email me 🧩

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.