Custom not appearing on mobile

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

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!

If font works, it should be like this or?

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.

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

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.

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

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

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.

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?

Hi. I have this issue.. I cant find the navigation links in mobile view, the rest are good.. anyone please help//

4 hours ago, dlR said:

Hi. I have this issue.. I cant find the navigation links in mobile view, the rest are good.. anyone please help//

If you share site url, we can check problem easier

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!

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?

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

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

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

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!

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/

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

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?