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 - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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 - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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 - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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 - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...