Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Custom font not showing up on mobile - please help! Thank you :)


ks295806

Question

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

17 answers to this question

Recommended Posts

  • 0
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.

 

humaneer

 

 

Sharing virtual tactics for an abstract world
Blogger @ humaneer.org

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

 

 

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

 

Link to comment
  • 0
On 6/30/2021 at 7:30 AM, ks295806 said:

Hi everyone- still hoping for help here... Thanks so much!

Add to Design > Custom CSS. Replace monospace with new font name

/* about page font */
div#block-7b73ff8d648fd4825b15 h2, div#block-744c82a1fb35dd1499d8 h2 {
    font-family: monospace;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Open Page Header - Upload Custom Font - Upload File - Find Block ID, Data Section ID - Contact Squarespace Customer Care - Learn CSS at W3Schools

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
On 7/2/2021 at 12:18 AM, tuanphan said:

Add to Design > Custom CSS. Replace monospace with new font name

/* about page font */
div#block-7b73ff8d648fd4825b15 h2, div#block-744c82a1fb35dd1499d8 h2 {
    font-family: monospace;
}

 

Thank you so much! This worked perfectly for desktop, however, I don't see the font showing up on mobile...?

Link to comment
  • 0
10 hours ago, ks295806 said:

Thank you so much! This worked perfectly for desktop, however, I don't see the font showing up on mobile...?

It is custom font or Squarespace font? If custom fond, have you declared font-face for it yet?

HeraldTypeface-Regular

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Open Page Header - Upload Custom Font - Upload File - Find Block ID, Data Section ID - Contact Squarespace Customer Care - Learn CSS at W3Schools

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
Posted (edited)
14 hours ago, tuanphan said:

It is custom font or Squarespace font? If custom fond, have you declared font-face for it yet?

HeraldTypeface-Regular

It's a font I downloaded from an external site. Here is the code I currently have typed in (the font file type downloaded is "HeraldTypeface-Regular.otf"):

}
/* about page font */
div#block-7b73ff8d648fd4825b15 h2, div#block-744c82a1fb35dd1499d8 h2 {
    font-family: HeraldTypeface-Regular
}

Edited by ks295806
Link to comment
  • 0
On 7/8/2021 at 3:58 AM, ks295806 said:

It's a font I downloaded from an external site. Here is the code I currently have typed in (the font file type downloaded is "HeraldTypeface-Regular.otf"):

}
/* about page font */
div#block-7b73ff8d648fd4825b15 h2, div#block-744c82a1fb35dd1499d8 h2 {
    font-family: HeraldTypeface-Regular
}

If custom font, you need to declared it with @font-face first. The code should be

@font-face {
	font-family:  HeraldTypeface-Regular;
	src: url(paste font file url here);
}
/* about page font */
div#block-7b73ff8d648fd4825b15 h2, div#block-744c82a1fb35dd1499d8 h2 {
    font-family: HeraldTypeface-Regular;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Open Page Header - Upload Custom Font - Upload File - Find Block ID, Data Section ID - Contact Squarespace Customer Care - Learn CSS at W3Schools

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
On 6/15/2021 at 9:03 AM, ks295806 said:

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!

I see the site has some small problems. Do you need to hanlde these?

Site URL – https://www.bewarethecuddlebear.com/?password=hermosa123

1. (Desktop – Header) Logo is  a bit big so the menu is cut into 2 lines.

https://www.bewarethecuddlebear.com/

bewarethecuddlebear.com-01-min.png

2. (Desktop – Shop) Image and text are not aligned.

https://www.bewarethecuddlebear.com/shop/p/5zxj4roklxfxhflbf8j93m7aeof26z/?password=hermosa123

bewarethecuddlebear.com-02-min.png

3. (Desktop – Cart) There is no logo in header.

https://www.bewarethecuddlebear.com/cart/?password=hermosa123

bewarethecuddlebear.com-03-min.png

4. (Mobile/Tablet – Homepage) On desktop, you can see the whole picture. On mobile/tablet, the image is partially cropped.

https://www.bewarethecuddlebear.com/?password=hermosa123

bewarethecuddlebear.com-04-min.png

5. (Tablet – Contact) Email is cut into 2 lines.

https://www.bewarethecuddlebear.com/contact/?password=hermosa123

bewarethecuddlebear.com-05-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Open Page Header - Upload Custom Font - Upload File - Find Block ID, Data Section ID - Contact Squarespace Customer Care - Learn CSS at W3Schools

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
17 hours ago, tuanphan said:

I see the site has some small problems. Do you need to hanlde these?

Site URL – https://www.bewarethecuddlebear.com/?password=hermosa123

1. (Desktop – Header) Logo is  a bit big so the menu is cut into 2 lines.

https://www.bewarethecuddlebear.com/

bewarethecuddlebear.com-01-min.png

2. (Desktop – Shop) Image and text are not aligned.

https://www.bewarethecuddlebear.com/shop/p/5zxj4roklxfxhflbf8j93m7aeof26z/?password=hermosa123

bewarethecuddlebear.com-02-min.png

3. (Desktop – Cart) There is no logo in header.

https://www.bewarethecuddlebear.com/cart/?password=hermosa123

bewarethecuddlebear.com-03-min.png

4. (Mobile/Tablet – Homepage) On desktop, you can see the whole picture. On mobile/tablet, the image is partially cropped.

https://www.bewarethecuddlebear.com/?password=hermosa123

bewarethecuddlebear.com-04-min.png

5. (Tablet – Contact) Email is cut into 2 lines.

https://www.bewarethecuddlebear.com/contact/?password=hermosa123

bewarethecuddlebear.com-05-min.png

Thank you so much! I just contacted you through your website for help resolving these issues. 

Link to comment
  • 0
1 hour ago, ks295806 said:

Thank you so much! I just contacted you through your website for help resolving these issues. 

Just sent the code. You can check.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Open Page Header - Upload Custom Font - Upload File - Find Block ID, Data Section ID - Contact Squarespace Customer Care - Learn CSS at W3Schools

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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...