Custom Font not showing up on any other device

Site URL: https://www.pennyvozniak.com/

Hello everyone,

I added Arial Narrow and Vendor fonts in the custom CSS panel. Looks like this:

@font-face {
font-family: 'vendor';
src: url('https://static1.squarespace.com/static/5fcc32ac190b057dd3728887/t/5fcdd4a35d2e6f3bda5e7454/1607324836889/font.woff'); }

h1 {font-family: 'ArialNarrow';}
h2 {font-family: 'Vendor';}
h3 {font-family: 'ArialNarrow';}
h4 {font-family: 'ArialNarrow';}
p {font-family: 'ArialNarrow';}

The design is correct on the desktop version, but on my phone and iPad the font for the body text is not Arial Narrow, it's another serif font that I didn't select. However, Vendor came across fine on the mobile site. Strange...

Any ideas how I can fix this so that the body text (Arial Narrow) is the same across all screens?

Also, I would like the text underneath the gallery images to be Arial Narrow, but I can't seem to change that font at all. Any advice for this too would be fab. 

Thank you!

Penny

I'm answering my own question here. 

Figured it out. I had the code all wrong. This is working:

@font-face {
font-family: 'vendor';
src: url('https://static1.squarespace.com/static/5fcc32ac190b057dd3728887/t/5fcdd4a35d2e6f3bda5e7454/1607324836889/font.woff'); }

h2 {font-family: 'Vendor';}

@font-face {

    font-family: 'ArialNarrow';

       src: url('https://static1.squarespace.com/static/5fcc32ac190b057dd3728887/t/5fcc6f752fa8bc6bcde12072/1607233399408/arialn.ttf');

  }

h1 {font-family: 'ArialNarrow';}
h3 {font-family: 'ArialNarrow';}
p {font-family: 'ArialNarrow';}
h4 {font-family: 'ArialNarrow';}

Still would like an answer for the gallery image captions... if anyone knows how to change these fonts...

P

Use this code

p {
    font-family: 'ArialNarrow' !important;
}

I'm having the same issue. When I view the mobile version in the editor the fonts show up, but when viewing on an actual phone using different browsers the fonts are not appearing correctly. I'm specifically having trouble with summary block fonts. Attached screenshots below.

The website is driplab.coffee
password: dripdrip

6 hours ago, simkrys said:

I'm having the same issue. When I view the mobile version in the editor the fonts show up, but when viewing on an actual phone using different browsers the fonts are not appearing correctly. I'm specifically having trouble with summary block fonts. Attached screenshots below.

The website is driplab.coffee
password: dripdrip

It looks like you haven't declared font-face for 'BC Novatica CYR' !important yet?

thanks for the reply @tuanphan. not sure where I should declare it? 

I currently have this

.sqs-block-summary-v2 .summary-metadata-item {
  font-family: 'BC Novatica CYR' !important;
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 190%;
letter-spacing: 1px;
text-transform: uppercase;
  color: #000;
}
.sqs-block-summary-v2 .summary-title {
  font-family: 'BC Novatica CYR' !important;
font-style: normal;
font-weight: normal;
font-size: 31px;
line-height: 120%;
}

@font-face {
	font-family: 'BC Novatica CYR';
	src: url(paste bc novatica cyr url here);
}

Thank you @tuanphan!

Hi, I'm having the same issue and wonder if anyone could help.

My site is www.hyam.design

When I view the mobile version in the editor the fonts show up, but when viewing on an actual phone using different browsers the fonts are not appearing correctly.

Here is my CSS:

}@font-face {

    font-family: 'RaleGrotesk';

       src: url('FontURLhttps://static1.squarespace.com/static/60a410e4718dbb4ac2c5b403/t/60aa43ad895adc57640976e7/1621771181790/RaleGrotesk.ttf');

  }

h1 {font-family: 'RaleGrotesk-Medium';}
h2 {font-family: 'RaleGrotesk-Light';}
h3 {font-family: 'RaleGrotesk-Regular';}
h4 {font-family: 'RaleGrotesk-Medium';}
p {font-family: 'RaleGrotesk-Light';}

On 5/24/2021 at 11:05 PM, hym said:

Hi, I'm having the same issue and wonder if anyone could help.

My site is www.hyam.design

When I view the mobile version in the editor the fonts show up, but when viewing on an actual phone using different browsers the fonts are not appearing correctly.

Here is my CSS:

}@font-face {

    font-family: 'RaleGrotesk';

       src: url('FontURLhttps://static1.squarespace.com/static/60a410e4718dbb4ac2c5b403/t/60aa43ad895adc57640976e7/1621771181790/RaleGrotesk.ttf');

  }

h1 {font-family: 'RaleGrotesk-Medium';}
h2 {font-family: 'RaleGrotesk-Light';}
h3 {font-family: 'RaleGrotesk-Regular';}
h4 {font-family: 'RaleGrotesk-Medium';}
p {font-family: 'RaleGrotesk-Light';}

hi, this line is invalid (remove bold text from your font  file url)

Quote

src: url('FontURLhttps://static1.squarespace.com/static/60a410e4718dbb4ac2c5b403/t/60aa43ad895adc57640976e7/1621771181790/RaleGrotesk.ttf');

Hi! I'm having the same issue: My fonts aren't loading on mobile:

Can someone help with this? 

Website: https://rae-mercer.squarespace.com

CSS: 

@font-face {
font-family: 'Romie-Regular';
src: url('}https://static1.squarespace.com/static/60a4079e18844e32d8ad1eb3/t/60ac6b6ab0e0e95980f183ec/1621912426669/Romie-Regular.woff');
  }
@font-face {
font-family: 'MonumentExtended-Regular';
src: url('}https://static1.squarespace.com/static/60a4079e18844e32d8ad1eb3/t/60ac6babcd97d34548e128a7/1621912491471/MonumentExtended-Regular.woff');
  }

h1 {font-family: 'Romie-Regular';}
h2 {font-family: 'Romie-Regular';}
h3 {font-family: 'Romie-Regular';}
h4 {font-family: 'Romie-Regular';}

p {
  font-family: 'MonumentExtended-Regular';
  font-weight: 100;
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 2em;}

h1.entry-title {
    font-family: 'Romie-Regular' !important;
}
h2.newsletter-form-header-title {
    font-family: 'Romie-Regular' !important;
}

.sqs-block-newsletter .newsletter-form-field-element {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.blog-item-title h1.entry-title {
    font-family: 'Romie-Regular' !important;
}

/* blog title font */
h1.blog-title, h1.entry-title, a.summary-title-link {
    font-family: 'Romie-Regular' !important;
}

20 hours ago, britterdiamond said:

Hi! I'm having the same issue: My fonts aren't loading on mobile:

Can someone help with this? 

Website: https://rae-mercer.squarespace.com

CSS: 

@font-face {
font-family: 'Romie-Regular';
src: url('}https://static1.squarespace.com/static/60a4079e18844e32d8ad1eb3/t/60ac6b6ab0e0e95980f183ec/1621912426669/Romie-Regular.woff');
  }
@font-face {
font-family: 'MonumentExtended-Regular';
src: url('}https://static1.squarespace.com/static/60a4079e18844e32d8ad1eb3/t/60ac6babcd97d34548e128a7/1621912491471/MonumentExtended-Regular.woff');
  }

h1 {font-family: 'Romie-Regular';}
h2 {font-family: 'Romie-Regular';}
h3 {font-family: 'Romie-Regular';}
h4 {font-family: 'Romie-Regular';}

p {
  font-family: 'MonumentExtended-Regular';
  font-weight: 100;
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 2em;}

h1.entry-title {
    font-family: 'Romie-Regular' !important;
}
h2.newsletter-form-header-title {
    font-family: 'Romie-Regular' !important;
}

.sqs-block-newsletter .newsletter-form-field-element {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.blog-item-title h1.entry-title {
    font-family: 'Romie-Regular' !important;
}

/* blog title font */
h1.blog-title, h1.entry-title, a.summary-title-link {
    font-family: 'Romie-Regular' !important;
}

Try this new code

@font-face {
    font-family: 'Romie-Regular';
    src: url('https://static1.squarespace.com/static/60a4079e18844e32d8ad1eb3/t/60ac6b6ab0e0e95980f183ec/1621912426669/Romie-Regular.woff');
}

@font-face {
    font-family: 'MonumentExtended-Regular';
    src: url('https://static1.squarespace.com/static/60a4079e18844e32d8ad1eb3/t/60ac6babcd97d34548e128a7/1621912491471/MonumentExtended-Regular.woff');
}

h1, h2, h3, h4, h1.entry-title, h2.newsletter-form-header-title, .blog-item-title h1.entry-title, h1.blog-title,h1.entry-title,a.summary-title-link {
    font-family: 'Romie-Regular' !important;
}

p {
    font-family: 'MonumentExtended-Regular';
    font-weight: 100;
    font-style: normal;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 2em;
}

.sqs-block-newsletter .newsletter-form-field-element, button.newsletter-form-button.sqs-system-button  {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

Site URL: http://www.bewarethecuddlebear.com

Hi everyone,

Am hoping you can help! I modified my CSS to accommodate a custom font and it is not showing up on the mobile version.

Password to access site is: hermosa123

Here are the codes I have:

@font-face {   
font-family: 'carrotflower';   
src: url(URL.ttf/.otfhttps://static1.squarespace.com/static/6076185432f4604c6efe4a39/t/60c7e4624358a40a1e046452/1623712866733/font.woff2);}
h1 {
font-family: 'carrotflower';}
h2 {
font-family: 'carrotflower';}
h3 {
font-family: 'carrotflower';}
h4 {
font-family: 'carrotflower';}
p {
font-family: 'carrotflower';}
misc {
font-family: 'carrotflower';}
.header-nav *, nav.header-menu-nav-list * {
    font-family: carrotflower;
}

Any help would be greatly appreciated.

Thanks so much!

2 hours ago, ks295806 said:

url(URL.ttf/.otfhttps://static1.squarespace.com/static/6076185432f4604c6efe4a39/t/60c7e4624358a40a1e046452/1623712866733/font.woff2);}

The "URL.ttf/.otf"  at the beginning looks like a typo.

It is not loading in mobile probably because you have not provided all the formats. For example, you need .ttf font format to work in safari/ Android and iOS browsers.

When I stimulated the mobile version of your website on desktop, it was fine. Try atleast finding the .ttf format and upload it.

 

3 hours ago, ks295806 said:

@font-face {   
font-family: 'carrotflower';   
src: url(URL.ttf/.otfhttps://static1.squarespace.com/static/6076185432f4604c6efe4a39/t/60c7e4624358a40a1e046452/1623712866733/font.woff2);}
h1 {
font-family: 'carrotflower';}
h2 {
font-family: 'carrotflower';}
h3 {
font-family: 'carrotflower';}
h4 {
font-family: 'carrotflower';}
p {
font-family: 'carrotflower';}
misc {
font-family: 'carrotflower';}
.header-nav *, nav.header-menu-nav-list * {
    font-family: carrotflower;
}

try this one

@font-face {
font-family: 'carrotflower';
src: url('https://static1.squarespace.com/static/6076185432f4604c6efe4a39/t/60c7e4624358a40a1e046452/1623712866733/font.woff2');
  }

h1, h2, h3, h4 {
font-family: 'carrotflower';}
p {
font-family: 'carrotflower';}
misc {
font-family: 'carrotflower';}
.header-nav *, nav.header-menu-nav-list * {
    font-family: carrotflower;
}

40 minutes ago, ArminB said:

try this one

@font-face {
font-family: 'carrotflower';
src: url('https://static1.squarespace.com/static/6076185432f4604c6efe4a39/t/60c7e4624358a40a1e046452/1623712866733/font.woff2');
  }

h1, h2, h3, h4 {
font-family: 'carrotflower';}
p {
font-family: 'carrotflower';}
misc {
font-family: 'carrotflower';}
.header-nav *, nav.header-menu-nav-list * {
    font-family: carrotflower;
}

 

Thanks so much! This appears to have worked. It looks like there are a few items that have not adopted the Carrotflower font, however (on both desktop and mobile). Do you happen to have a solution for this as well? The first few I notice are the "BUY NOW" buttons and the text on the Product page. Let me know if you need more details. Thanks in advance!

Here's a visual... the text that has not updated to the new font is "Beware the Cuddle Bear Gift Set" and "Quantity." Also, "BUY NOW," but that doesn't bother me as much.

1 hour ago, ks295806 said:

Quantity." Also, "BUY NOW," but that doesn't bother me as much.

If you want to apply this to all classes, there's a whole list of CSS classes

like

Header Button
.black .header-actions .btn

Somewhere here are is your quantity field
.ProductItem .ProductItem-details .product-quantity-input input

General Buttons
.sqs-block-button .sqs-block-button-element--small
.sqs-block-button .sqs-block-button-element--medium
.sqs-block-button .sqs-block-button-element--large

14 hours ago, ArminB said:

If you want to apply this to all classes, there's a whole list of CSS classes

like

Header Button
.black .header-actions .btn

Somewhere here are is your quantity field
.ProductItem .ProductItem-details .product-quantity-input input

General Buttons
.sqs-block-button .sqs-block-button-element--small
.sqs-block-button .sqs-block-button-element--medium
.sqs-block-button .sqs-block-button-element--large

 

 

Thank you! I'm new to this... Are you able to share an updated code to accommodate this?

Current code:

@font-face {
font-family: 'carrotflower';
src: url('https://static1.squarespace.com/static/6076185432f4604c6efe4a39/t/60c7e4624358a40a1e046452/1623712866733/font.woff2');
  }

h1, h2, h3, h4 {
font-family: 'carrotflower';}
p {
font-family: 'carrotflower';}
misc {
font-family: 'carrotflower';}
.header-nav *, nav.header-menu-nav-list * {
    font-family: carrotflower;
}

Having same issue where custom font is not showing up on mobile. I've looked at all the above code but seems to check out. Need some expert guidance here. 

https://slopeside.squarespace.com/

password: 970

@font-face {
  font-family: 'heinberg';
  src: url('https://static1.squarespace.com/static/60c7cc3317a5377b8eb02b43/t/60c90fe2cf09566543ea5a30/1623789538887/heinberg-regular-webfont.woff') format ('woff');
}
  
/* Custom Fonts */
h1, h2, h3, h4 {
  font-family:'heinberg' !important;
  letter-spacing: 3px;

}

.header-nav *, nav.header-menu-nav-list * {
    font-family:'heinberg'!important;
  letter-spacing: 3px;
}

Any thoughts here @tuanphan? Thanks!

Looks like I was able to fix it by removing some code that addressed the line width. No idea why that affected fonts on mobile though?

6 hours ago, ks295806 said:

Thank you! I'm new to this... Are you able to share an updated code to accommodate this?

You'd probably have to try a couple of combinations.

based on those recommendations, just try

.BLOCK-ID
{font-family: 'carrotflower';}

so for instance:

.product-quantity-input
{font-family: 'carrotflower';}

.ProductItem
{font-family: 'carrotflower';}

9 hours ago, lamdra said:

Looks like I was able to fix it by removing some code that addressed the line width. No idea why that affected fonts on mobile though?

 

Do you still need help?

8 hours ago, tuanphan said:

Hi. Have you solved it yet?

Also

Site URL – https://slopeside.squarespace.com/

1. (Tablet-Homepage) resize image?

Yes, the fonts appear to be working well now on mobile. Thanks for following up!

Not sure what you're showing me on the table resize? Looks like the opentable widget disappeared on your screen but I can't recreate that. Is that it?

Thanks so much for the help thus far!

One more request: I'd like to update the font on only one page to a new font that I will be downloading... is this possible?

The page I'm referring to is "About Us" and the font I want to use is: 

https://www.youworkforthem.com/font/T7245/herald/56122

I only want to use this new font for "About the Author" and "About the Illustrator" headings.

Thanks in advance!