Jump to content

Custom not appearing on mobile

Go to solution Solved by paul2009,

Recommended Posts

On 2/28/2024 at 3:17 AM, amanda.j.murray said:

I am using a custom font (Adobe Locator) for my client's website, and have added CSS code for it to apply to everything EXCEPT the button in my navigation menu *on mobile*. Does anyone know the CSS code for this? (I have already applied it for the button on the navigation view in desktop.) Thanks so much!

https://bobcat-mustard-k4cg.squarespace.com/

Use this, it will target both desktop + mobile header button

a.btn {
    font-family: 'locator-web' !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
On 2/29/2024 at 4:01 AM, ncast21 said:

Hi! I'm also having issues getting my custom font to show on mobile view and desktop on Safari. On Chrome desktop everything looks as it should but no luck otherwise.

https://solandsand.co

Everything seems to look right code wise, but here's my code for your reference:
 

/**ADD CUSTOM FONT**/

//Headings:Brewery Pro
@font-face {
    font-family:'Brewery Pro'!important; src:url('https://static1.squarespace.com/static/61a35a410b6008246ef90b89/t/65df753671d3ea1fb3719661/1709143350257/Linotype-BreweryPro-Bold.woff') format('woff');
}
        
h1, h2, h3, h4, .user-items-list .list-section-title, .list-item-content .list-item-content__title, .blog-basic-grid--text .blog-title, .grid-main-meta .grid-title, .newsletter-form-header .newsletter-form-header-title, .blog-item-title .entry-title.entry-title--large.p-name{
    font-family:'Brewery Pro';
    letter-spacing:.025em;
    line-height: 1em;
}

//Headings:Luminaire Script
@font-face {
font-family:'Luminaire Script'!important; src:url('https://static1.squarespace.com/static/61a35a410b6008246ef90b89/t/65df736a74a7475879cfc1c9/1709142890585/LuminaireScript-Regular.woff') format('woff');
}

//Headings & Paragraph:Gill Sans Nova SemiBold
@font-face {
font-family: 'Gill Sans Nova SemiBold'; src: url('https://static1.squarespace.com/static/61a35a410b6008246ef90b89/t/65df7392be757d5b056f0447/1709142930894/GillSansNova-SemiBold.woff') format('woff');
}

 

Thank you for your help!

Screenshot 2024-02-28 at 3.01.18 PM.png

Screenshot 2024-02-28 at 3.01.30 PM.png

If font works, it should be like this or?

image.thumb.png.2010540475b112b853211abb731f5b94.png

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... Works only in Chrome but not on safari/mobile. Can anyone help me out? Thanks!
 

@font-face{
     font-family: 'geomanist';
     src: url ('https://static1.squarespace.com/static/65df03fd1a699124f818b6f6/t/65e98a754aa00b029f5dafe4/1709804149629/geomanist-black-webfont.ttf')
}
 
h1,h2,h3,h4,p {
     font-family: 'geomanist';
}

@font-face{
     font-family: 'geomanist';
     src: url ('https://static1.squarespace.com/static/65df03fd1a699124f818b6f6/t/65e98a754aa00b029f5dafe4/1709804149629/geomanist-black-webfont.ttf')
}
.header-nav *, nav.header-menu-nav-list * {
    font-family:'geomanist-black';
}


 



 

Edited by CharlotteMeys
Link to comment
On 3/5/2024 at 6:29 AM, ncast21 said:

Yes that's how it would look formatted correctly @tuanphan, currently on safari and mobile it's looking like this image. on Chrome Desktop it seems to appear fine.

Screenshot 2024-03-04 at 5.28.20 PM.png

Don't use !important inside @font-face code

Change this code

@font-face {
    font-family: 'Brewery Pro' !important;
    src: url('https://static1.squarespace.com/static/61a35a410b6008246ef90b89/t/65df753671d3ea1fb3719661/1709143350257/Linotype-BreweryPro-Bold.woff') format('woff')
}

to this

@font-face {
    font-family: 'Brewery Pro';
    src: url('https://static1.squarespace.com/static/61a35a410b6008246ef90b89/t/65df753671d3ea1fb3719661/1709143350257/Linotype-BreweryPro-Bold.woff') format('woff')
}

 

On 3/7/2024 at 4:46 PM, CharlotteMeys said:

Hi, I'm having the same issue... Works only in Chrome but not on safari/mobile. Can anyone help me out? Thanks!
 

@font-face{
     font-family: 'geomanist';
     src: url ('https://static1.squarespace.com/static/65df03fd1a699124f818b6f6/t/65e98a754aa00b029f5dafe4/1709804149629/geomanist-black-webfont.ttf')
}
 
h1,h2,h3,h4,p {
     font-family: 'geomanist';
}

@font-face{
     font-family: 'geomanist';
     src: url ('https://static1.squarespace.com/static/65df03fd1a699124f818b6f6/t/65e98a754aa00b029f5dafe4/1709804149629/geomanist-black-webfont.ttf')
}
.header-nav *, nav.header-menu-nav-list * {
    font-family:'geomanist-black';
}


 



 

Can you share site url? 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

Hey, I'm just really stupid and have tried a few variations of the code, but it won't change the phone version title font, only the website desktop one! I just need some assistance! not smart with these codes

Link to comment
18 hours ago, tuanphan said:

Don't use !important inside @font-face code

Change this code

@font-face {
    font-family: 'Brewery Pro' !important;
    src: url('https://static1.squarespace.com/static/61a35a410b6008246ef90b89/t/65df753671d3ea1fb3719661/1709143350257/Linotype-BreweryPro-Bold.woff') format('woff')
}

to this

@font-face {
    font-family: 'Brewery Pro';
    src: url('https://static1.squarespace.com/static/61a35a410b6008246ef90b89/t/65df753671d3ea1fb3719661/1709143350257/Linotype-BreweryPro-Bold.woff') format('woff')
}

 

Can you share site url? We can check easier

Awesome! Thank you, this worked perfectly.

Link to comment
On 3/8/2024 at 9:12 PM, mapel said:

Hey, I'm just really stupid and have tried a few variations of the code, but it won't change the phone version title font, only the website desktop one! I just need some assistance! not smart with these codes

What is your site url?

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 all, 

I am also having a bit of trouble with my mobile font (H1 and H2). I am able to see it when I use the chrome app, but not the Google Bar widget on my Google Pixel 8. Any ideas?

Here is my CSS

@font-face {
font-family: 'Calgary';
src: url('https://static1.squarespace.com/static/65eb616f26d6c01e8ed4e11e/t/65ef241ee66db84f275fd5ca/1710171166535/Calgary-Regular.ttf');
}

h1 {
font-family: 'Calgary';
}

@font-face {
font-family: 'Calgary';
src: url('https://static1.squarespace.com/static/65eb616f26d6c01e8ed4e11e/t/65ef241ee66db84f275fd5ca/1710171166535/Calgary-Regular.ttf');
}

h2 {
font-family: 'Calgary';
}

@font-face {
font-family: 'Avenir';
src: url('https://static1.squarespace.com/static/65eb616f26d6c01e8ed4e11e/t/65eb7531cc28f63ada01ae96/1709929777368/AvenirLTStd-Book.otf');
}

.sqs-block-button-container a{
    font-family: 'Avenir' !important; 
}

.header-actions-action--cta .sqs-button-element--primary {
   font-family: 'Avenir'!important;
}

.header--menu-open .header-menu-nav-folder-content a  {font-family: 'Calgary'}

.header--menu-open .btn  {font-family: 'Avenir'!important;}

@media only screen and (max-width: 640px){
	h1 {
		font-size: 40px !important;
	}
  h2 {
		font-size: 30px !important;
	}
}

 

Here is my site:

https://www.thegalleryhousebedford.com/

 

Thanks in advance!

Link to comment
On 3/18/2024 at 9:27 PM, 2SB said:

Hi all, 

I am also having a bit of trouble with my mobile font (H1 and H2). I am able to see it when I use the chrome app, but not the Google Bar widget on my Google Pixel 8. Any ideas?

Here is my CSS

@font-face {
font-family: 'Calgary';
src: url('https://static1.squarespace.com/static/65eb616f26d6c01e8ed4e11e/t/65ef241ee66db84f275fd5ca/1710171166535/Calgary-Regular.ttf');
}

h1 {
font-family: 'Calgary';
}

@font-face {
font-family: 'Calgary';
src: url('https://static1.squarespace.com/static/65eb616f26d6c01e8ed4e11e/t/65ef241ee66db84f275fd5ca/1710171166535/Calgary-Regular.ttf');
}

h2 {
font-family: 'Calgary';
}

@font-face {
font-family: 'Avenir';
src: url('https://static1.squarespace.com/static/65eb616f26d6c01e8ed4e11e/t/65eb7531cc28f63ada01ae96/1709929777368/AvenirLTStd-Book.otf');
}

.sqs-block-button-container a{
    font-family: 'Avenir' !important; 
}

.header-actions-action--cta .sqs-button-element--primary {
   font-family: 'Avenir'!important;
}

.header--menu-open .header-menu-nav-folder-content a  {font-family: 'Calgary'}

.header--menu-open .btn  {font-family: 'Avenir'!important;}

@media only screen and (max-width: 640px){
	h1 {
		font-size: 40px !important;
	}
  h2 {
		font-size: 30px !important;
	}
}

 

Here is my site:

https://www.thegalleryhousebedford.com/

 

Thanks in advance!

Do you have any other font formats? otf, woff, woff2?

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

Same issue. Works fine on Desktop but when I hit the mobile version on desktop the custom font does not work. website. 

www.mirandacorwinphotography.com

 

// CUSTOM FONT
@font-face {
font-family:'Katherine-Free';
src: url(https://static1.squarespace.com/static/65ab3e166f8c1c2c1cb513ac/t/65eb49c404d3d3293fd7cb83/1709918660312/Katherine+Free.otf);
}

p.sqsrte-small  {
font-family:'Katherine-Free';
font-size: 50pt;
letter-spacing: 1px;
  line-height: 200%;}

Link to comment
3 minutes ago, MirandaC said:

Same issue. Works fine on Desktop but when I hit the mobile version on desktop the custom font does not work. website.  I only have the OTF file. Would this be the reason why?

www.mirandacorwinphotography.com

 

// CUSTOM FONT
@font-face {
font-family:'Katherine-Free';
src: url(https://static1.squarespace.com/static/65ab3e166f8c1c2c1cb513ac/t/65eb49c404d3d3293fd7cb83/1709918660312/Katherine+Free.otf);
}

p.sqsrte-small  {
font-family:'Katherine-Free';
font-size: 50pt;
letter-spacing: 1px;
  line-height: 200%;}

 

 

Link to comment
On 3/23/2024 at 3:15 AM, MirandaC said:

 

 

You wrapped your font-face code in a media query, so it won't work on all devices

Move this code to top of Custom CSS box

    @font-face {
        font-family: 'Katherine-free';
        src: url(https://static1.squarespace.com/static/65ab3e166f8c1c2c1cb513ac/t/65fdee1ebf96b070a525010e/1711140383074/Katherine+Free.otf)
    }

    p.sqsrte-small {
        font-family: 'Katherine-free';
        font-size: 50pt;
        letter-spacing: 1px;
        line-height: 200%
    }

 

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 weeks later...
On 3/21/2024 at 3:21 AM, tuanphan said:

Do you have any other font formats? otf, woff, woff2?

Looks like my Avenir font is otf. Should I change it? It's the Calgary font that's not showing up on the Google App Widget as well.

Thanks I appreciate your help!

Link to comment
On 4/7/2024 at 6:34 PM, 2SB said:

Looks like my Avenir font is otf. Should I change it? It's the Calgary font that's not showing up on the Google App Widget as well.

Thanks I appreciate your help!

If you have ttf, woff, woff2, you can upload it and send url, I will give new code to declare all formats

https://www.thegalleryhousebedford.com/

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

I'm running into this same issue. Font looks perfect on desktop but is broken on mobile. Everything appears correct..please help!

coryandjenna.com

// CUSTOM FONT

@font-face {
font-family: 'PERFECTLY-NINETIES';
src: url('https://static1.squarespace.com/static/65204b096b74f31ab34ead0f/t/6620287f0f68ae79b5619b05/1713383551705/PerfectlyNineties-Regular.ttf');
}

h1 {
font-family: 'PERFECTLY-NINETIES' !important;}

 

Edited by jenna1087
Link to comment
On 4/18/2024 at 3:20 AM, jenna1087 said:

I'm running into this same issue. Font looks perfect on desktop but is broken on mobile. Everything appears correct..please help!

coryandjenna.com

// CUSTOM FONT

@font-face {
font-family: 'PERFECTLY-NINETIES';
src: url('https://static1.squarespace.com/static/65204b096b74f31ab34ead0f/t/6620287f0f68ae79b5619b05/1713383551705/PerfectlyNineties-Regular.ttf');
}

h1 {
font-family: 'PERFECTLY-NINETIES' !important;}

 

What is password?

image.png.cdc5a500b92fab87085a1a37332f0347.png

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

Hello folks.

The font I chose, aktiv grotesk, does not load in safari on mobile. In all other cases it loads properly. Could someone help me with this problem? My website is called: www.formaterra.nl 

Best regards, Werner 

Link to comment
On 4/30/2024 at 10:50 PM, formaterra said:

Hello folks.

The font I chose, aktiv grotesk, does not load in safari on mobile. In all other cases it loads properly. Could someone help me with this problem? My website is called: www.formaterra.nl 

Best regards, Werner 

Can you take a screenshot of font on your end?

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
Posted (edited)

@tuanphan I'm having the same issue with a fonts not showing properly on mobile and safari desktop, but find in preview mode in squarespace and on chrome.

Here's the site: houseofrosie.squarespace.com pw: chrisandlindsay

Any advice? I've tried some of the answers in this thread with no luck.

Edited by AJeans
Link to comment
On 5/2/2024 at 9:33 AM, tuanphan said:

Can you take a screenshot of font on your end?

Here is a screenshot of the mobile homepage on safari. I hope that is what you mean by taking a screenshot of the font on my end. 

IMG_5430.jpeg

Link to comment
On 5/3/2024 at 12:12 PM, AJeans said:

@tuanphan I'm having the same issue with a fonts not showing properly on mobile and safari desktop, but find in preview mode in squarespace and on chrome.

Here's the site: houseofrosie.squarespace.com pw: chrisandlindsay

Any advice? I've tried some of the answers in this thread with no luck.

Your font code has some invalid symbol. Use this new font face code

@font-face {
    font-family: 'founders-grotesk';
    src: url(https://static1.squarespace.com/static/6626d69b60f5bf3e678076a5/t/6626e527bc19ae229b3464f9/1713825063304/foundersgrotesk-regular-webfont.woff'); 
    src: url(https://static1.squarespace.com/static/6626d69b60f5bf3e678076a5/t/6626e527e9fc9473ed01fd89/1713825063228/foundersgrotesk-regular-webfont.woff2);
}

@font-face {
    font-family: 'gundarson-regular';
    src: url(https://static1.squarespace.com/static/6626d69b60f5bf3e678076a5/t/6626e5271e22892e6091f1ec/1713825063313/gundarson-regular-webfont.woff);
        src: url(https://static1.squarespace.com/static/6626d69b60f5bf3e678076a5/t/6626e527b5546f5e61d9c4d7/1713825063221/gundarson-regular-webfont.woff2);
}

@font-face {
    font-family: 'gundarson-italic';
    src: url(https://static1.squarespace.com/static/6626d69b60f5bf3e678076a5/t/6626e527aabe6d2317f676de/1713825063325/gundarson-italic-webfont.woff);
    src: url(https://static1.squarespace.com/static/6626d69b60f5bf3e678076a5/t/6626e527cca6045082ae1e56/1713825063322/gundarson-italic-webfont.woff2);
}

 

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.