Custom Font Not Working on Mobile

Site URL: https://orchid-flute-gfwg.squarespace.com/

Hi all,

Can anyone help me with my coding? I'm pretty sure everything is correct, and it shows up fine on the mobile via Squarespace but on my phone, the custom fonts aren't showing up at all.

I'm on an iPhone 8 Plus on Safari.

Code

// Custom Font //
@font-face {
  font-family: Druk;
  src: url(https://static1.squarespace.com/static/60d78e5b5e66bd5756e06a22/t/60d79feed113772d538dfa60/1624743919175/Druk+Wide+Super.otf);
}

@font-face {
  font-family: Euclid;
  src: url(https://static1.squarespace.com/static/60d78e5b5e66bd5756e06a22/t/60d7a016d2d2442e68e90958/1624743958321/EuclidCircularA-Regular.ttf);
}

@font-face {
  font-family: Oaklinn;
  src: url(https://static1.squarespace.com/static/60d78e5b5e66bd5756e06a22/t/60d7a0fa2b37c143c11961f9/1624744186366/Oaklinn.otf);
}

// Custom Fonts Implement //
p {font-family: Euclid;}
h1 {font-family: Druk;}
h2 {font-family: Euclid;}
h3 {font-family: Druk;}
h4 {font-family: Oaklinn;}
h5 {font-family: Euclid;}
button {font-family: Druk; font-size: 10px !important;}
.sqs-block-button-element {font-family: Druk; font-size: 10px !important;}
h3.portfolio-title {
  	font-family: Druk !important;
    color: white !important;
    font-size: 15px !important;
}
.mobile-bar-wrapper *, h1 {
    font-family: Druk !important;
}

Any help would be appreciated!

Make sure you convert your fonts to support all font types. Here's an example CSS font fact 

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

You can convert your fonts and get them downloaded to these formats here: https://transfonter.org/ if it still doesn't work let me know, but it helps a lot if you do this first.

On 7/3/2021 at 11:51 PM, NickScola said:

Make sure you convert your fonts to support all font types. Here's an example CSS font fact 

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

You can convert your fonts and get them downloaded to these formats here: https://transfonter.org/ if it still doesn't work let me know, but it helps a lot if you do this first.

I've already tried this method, it did not work to fix it. The only work around to making the H1 + H2 work is by putting it in a link with no pointer event 🤷🏻‍♀️

On 7/28/2021 at 2:05 AM, vanessakrystin said:

I've already tried this method, it did not work to fix it. The only work around to making the H1 + H2 work is by putting it in a link with no pointer event 🤷🏻‍♀️

Do you still need help?

Thank you for this help! I used the link to convert all types of font. My font is now working on mobile. I have a deeper question. How can I include the ligatures/swashes of my font on web? I want that "S" to have the extended swash to it. Thanks! www.sushi-junki.com 

Yes @tuanphan are you able to clarify the solution here? We're having the same problem. Our typeface, GT America Bold, looks normal when we test for mobile on chrome desktop, but an our actual mobile devices the font is breaking (being replaced by some other random typeface). 

In the solution code provided above, should I be replacing every instance of "MyWebFont" with our typeface name, 'GTAmericaBold' ? 

Website: https://www.alliswellstudios.com/

I tried using the font converter at transfonter.org and uploaded each file separately, but it still doesn't seem to be working at all, now on any browser. My font "GT America Bold" was originally an .otf file, but I converted it to other formats as recommended. Here's my code: 

@font-face {
font-family: 'GTAmericaBold';
   src: url('https://static1.squarespace.com/static/640254492f4ddd03f446b1a3/t/642ca443e0a9253d2e5ade2a/1680647235731/GTAmerica-Bold.eot')format('embedded-opentype');/* IE9 Compat Modes */
 src: url('https://static1.squarespace.com/static/640254492f4ddd03f446b1a3/t/642ca4814b72d81ef77f491f/1680647297139/GTAmerica-Bold.woff2')format('woff2'),/* Super Modern Browsers */
   url('https://static1.squarespace.com/static/640254492f4ddd03f446b1a3/t/642ca4b6f479ec0d40f87bc6/1680647350772/GTAmerica-Bold.woff')format('woff'), /* Pretty Modern Browsers */
   url('https://static1.squarespace.com/static/640254492f4ddd03f446b1a3/t/642ca4d8bc7bf42192b580dd/1680647384441/GTAmerica-Bold.ttf') format('truetype'),/* Safari, Android, iOS */
}

h1, h2, h3, h4 {
 font-family: 'GTAmericaBold' !important;}

My Custom Font Not Working on Mobile too

so i added the code correctly with the font name, in square space preview it showing fine but when i publish the website in mobile mode not showing the custom font, so i appreciate if someone advise what to do?

this is the code that i added

#site-title {
  font-family: "copdro";
}

On 6/9/2023 at 1:24 AM, Ultra-Z said:

My Custom Font Not Working on Mobile too

so i added the code correctly with the font name, in square space preview it showing fine but when i publish the website in mobile mode not showing the custom font, so i appreciate if someone advise what to do?

this is the code that i added

#site-title {
  font-family: "copdro";
}

Can you share link to your site? We can check easier

Hi! 

I'm also having difficulties with my css on h5. The font I am using is not an uploaded one, Chantal can be found on fonts so what am I doing wrong since the font isn't appearing correctly on mobile. 

The code I used is

h5 {
  font-family:Chantal;
  font-size:1.6rem;
  font-weight:300;
}

and everything works just fine on desktop.

On 8/31/2023 at 2:45 PM, Neam said:

Hi! 

I'm also having difficulties with my css on h5. The font I am using is not an uploaded one, Chantal can be found on fonts so what am I doing wrong since the font isn't appearing correctly on mobile. 

The code I used is

h5 {
  font-family:Chantal;
  font-size:1.6rem;
  font-weight:300;
}

and everything works just fine on desktop.

What is site url? We can check problem easier