Jump to content

Custom Font Not Working on Mobile

Recommended Posts

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!

Link to comment
  • Replies 10
  • Views 3.4k
  • Created
  • Last Reply

Top Posters In This Topic

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.

 

https://www.nickscola.com - Squarespace developer since 2007 now a full service creative agency in Chicago that focuses on creating websites with a high standard for aesthetic excellence.

Link to comment
  • 4 weeks later...
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 🤷🏻‍♀️

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

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
  • 4 months later...

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 

Screen Shot 2021-12-03 at 7.19.49 AM.png

Link to comment
  • 1 year later...

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/

Edited by AIW
updated url
Link to comment

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

Edited by AIW
Link to comment
  • 2 months later...

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

Edited by Ultra-Z
Link to comment
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

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
  • 2 months later...

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.

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

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.