Jump to content

Custom Font not showing up on any other device

Recommended Posts

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

Link to comment

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

Link to comment
  • 1 month later...

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

IMG_4004.jpg

Screen Shot 2021-02-07 at 6.48.21 PM.png

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

IMG_4004.jpg

Screen Shot 2021-02-07 at 6.48.21 PM.png

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

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

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

 

Link to comment
  • 3 months later...

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

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

 

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

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

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

 

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
  • 3 weeks later...

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!

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

 

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

 

Edited by ArminB
typo

About Armin:
Squarespace Expert Profile: https://www.squarespace.com/designer/profile/3649084
Website: www.braunsberger-media.com
Leaders Lodge: See my Profile

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

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

 

 

About Armin:
Squarespace Expert Profile: https://www.squarespace.com/designer/profile/3649084
Website: www.braunsberger-media.com
Leaders Lodge: See my Profile

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

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!

Edited by lamdra
Link to comment
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';}

 

About Armin:
Squarespace Expert Profile: https://www.squarespace.com/designer/profile/3649084
Website: www.braunsberger-media.com
Leaders Lodge: See my Profile

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.