Custom not appearing on mobile

ejenks · March 8, 2023

Hi everyone! I am currently developing my graphic design portfolio, and have run into a bit of issue with custom fonts. Although the custom font that I'm using (Brandon Grotesque) looks good on desktop, for some reason, it's not showing up on mobile (specifically iOS). Instead of displaying Brandon Grotesque, it displays a serif font. Any tips or suggestions about how I could fix this?

Site: https://www.ellajenkinsdesigns.com/

*Edit: It seems like the font is also not showing up on Safari on my computer. Still looks fine on Chrome though 😕

Edited March 8, 2023 by ejenks

paul2009 · March 8, 2023

35 minutes ago, ejenks said:

Although the custom font that I'm using (Brandon Grotesque) looks good on desktop, for some reason, it's not showing up on mobile.

Hi

When a font is not showing up on mobile, this suggests that the font hasn't been setup in Squarespace properly using CSS. (If the same font is installed on your computer, the font is probably being loaded from there when you test it on the desktop.)

Here are some basic troubleshooting steps to get you started:

Check that the font name you assigned in your @font-face rule (within Custom CSS) is a continuous string (without spaces) like brandon-grotesque or that it has been placed in quotes, like 'Brandon Grotesque'.
Check that the font name in your @font-face rule (described above) uses exactly the same name throughout the CSS. For example, if you used font-family: brandon-grotesque in your font-face at-rule, you should use this exact format when you set the font-family for your h1 or h2 and so on. If you used font-family: 'Brandon Grotesque', you should use this instead.

You may need to save the CSS and reload the page to see if these steps have helped.

Did this help? Please give feedback by clicking an icon below ⬇️

Edited March 8, 2023 by paul2009

ejenks · March 21, 2023

Thank you for the troubleshooting tips @paul2009! I was able to fix the CSS and now it looks great on different platforms 🙂

AIW · March 30, 2023

Hi @paul2009 I'm having a similar issue, but our css appears correct/ labels the font the same way in each occurrence. Any other ideas as to why our font may be appearing strangely on mobile devices? It looks correct on desktop browsers, and when we test with the mobile icon on a desktop. It's only when we're on an actual mobile device where the font changes, and a weird artifact happens where it looks like the font is layered 2-3 times.

SITE: https://www.alliswellstudios.com/about

CODE :

@font-face {
font-family: 'GTAmericaBold';
src: url('https://static1.squarespace.com/static/640254492f4ddd03f446b1a3/t/6423560b2409b21c0435b6a4/1680037387766/GT-America-Standard-Bold.otf');}

h1 {font-family: 'GTAmericaBold';}
h2 {font-family: 'GTAmericaBold';}
h3 {font-family: 'GTAmericaBold';}
h4 {font-family: 'GTAmericaBold';}

Edited April 1, 2023 by AIW
url update

ChristieD · June 3, 2023

Hi, I am having issues with a font not appearing on my phone, however it looks as it should on the live site on my desktop and on both squarespace editing views, desktop and mobile. I have gone in a changed it, then changed it back and saved and it still seems to not be working. Here are some pics. The cursive font that says "Vocal Effects" is as it should be and the plain font saying "Vocal Effects" is how it's looking on my phone.

This is how it's supposed to look:

Any advice would be so appreciated. Thanks, Christie : )

tuanphan · June 8, 2023

On 6/3/2023 at 10:35 AM, ChristieD said:

Hi, I am having issues with a font not appearing on my phone, however it looks as it should on the live site on my desktop and on both squarespace editing views, desktop and mobile. I have gone in a changed it, then changed it back and saved and it still seems to not be working. Here are some pics. The cursive font that says "Vocal Effects" is as it should be and the plain font saying "Vocal Effects" is how it's looking on my phone.

This is how it's supposed to look:

Any advice would be so appreciated. Thanks, Christie : )

Can you share link to this page? We can check easier

colleenraney · October 21, 2023

I'm seemingly in the same boat and need a code assist to make my custom font work on mobile. Thanks in advance for any help you can give me. I appreciate it.

diademflowers.com

@font-face {

font-family: 'Kinfolk';

src: url('FontUhttps://static1.squarespace.com/static/5e6812bd4469345cf9dd85b0/t/63a54f2bcb6dbc0745a500ed/1671778091644/FontsFree-Net-Kinfolk_Reg.ttfRL');

}

h1, h2, h3 {
font-family: 'Kinfolk' !important;
}

Web_Solutions · October 22, 2023

5 hours ago, colleenraney said:

I'm seemingly in the same boat and need a code assist to make my custom font work on mobile. Thanks in advance for any help you can give me. I appreciate it.

diademflowers.com

@font-face {

font-family: 'Kinfolk';

src: url('FontUhttps://static1.squarespace.com/static/5e6812bd4469345cf9dd85b0/t/63a54f2bcb6dbc0745a500ed/1671778091644/FontsFree-Net-Kinfolk_Reg.ttfRL');

}

h1, h2, h3 {
font-family: 'Kinfolk' !important;
}

Replace your code with the code below.

@font-face {
    font-family: 'Kinfolk';
    src: url('https://static1.squarespace.com/static/5e6812bd4469345cf9dd85b0/t/63a54f2bcb6dbc0745a500ed/1671778091644/FontsFree-Net-Kinfolk_Reg.ttf');
}

h1, h2, h3 {
    font-family: 'Kinfolk' !important;
}

Kgendron · November 9, 2023

Hi there,

This solution isn't fixing the font on mobile for me. I tried to adjust the file and the code to not have spaces, but that caused the desktop font to disappear so I kept the quotes around it. I'd love your opinions. website is mountainoven.com

Thanks in advance!

Here is my code:

font-face {
font-family: 'Muara Rough';
src: url('https://static1.squarespace.com/static/64a8450ebdbb364ed6bc3b4d/t/653417e709a7de5b879d2390/1697912808640/Muara+Rough.otf');
}
h1 {font-family: 'Muara Rough';}

Edited November 9, 2023 by Kgendron

Web_Solutions · November 9, 2023

On 11/9/2023 at 10:07 PM, Kgendron said:

Hi there,

This solution isn't fixing the font on mobile for me. I tried to adjust the file and the code to not have spaces, but that caused the desktop font to disappear so I kept the quotes around it. I'd love your opinions. website is mountainoven.com

Thanks in advance!

Here is my code:

font-face {
font-family: 'Muara Rough';
src: url('https://static1.squarespace.com/static/64a8450ebdbb364ed6bc3b4d/t/653417e709a7de5b879d2390/1697912808640/Muara+Rough.otf');
}
h1 {font-family: 'Muara Rough';}

You didn't add @ sign before the font-face. Also if you use TTF file instead of OTF file then it will work perfectly.

here is the link to download the TTF file

https://static1.squarespace.com/static/63f08707a1ab1979c11e7d14/t/654d0d8581e6680da1a3a37c/1699548554401/Muara-Rough.ttf

Edited December 16, 2023 by Web_Solutions

leahlind · November 10, 2023

Hello! I am new to CSS, but am having the same issue. My h2 font (About Us) is not showing up on mobile but works fine on desktop. I have tried the solutions, but i must be missing something. Any suggestions or help would be much appreciated. Thanks in advance!

Site: https://masterpiece-pools.squarespace.com

Edited November 10, 2023 by leahlind
Add visual

Web_Solutions · November 10, 2023

1 hour ago, leahlind said:

Hello! I am new to CSS, but am having the same issue. My h2 font (About Us) is not showing up on mobile but works fine on desktop. I have tried the solutions, but i must be missing something. Any suggestions or help would be much appreciated. Thanks in advance!

Site: https://masterpiece-pools.squarespace.com

You have made some error on your code. I have fixed it. Replace all your code with the below code.

@font-face {
    font-family: 'JuliusSansOne-Regular';
    src: url(https://static1.squarespace.com/static/651b0f22a845bd64b0e89d93/t/651b13b67ed2717966f0e821/1696273334308/JuliusSansOne-Regular.ttf);
}
@font-face {
    font-family: 'Ephesis';
    src: url(https://static1.squarespace.com/static/651b0f22a845bd64b0e89d93/t/651b26736254fc42e9de6bd2/1696278131625/Ephesis-Regular.ttf);
}


h1, h4, .sqs-block-button-element, .button.sqs-system-button.sqs-editable-button, .a.btn, input.button, .user-items-list .list-section-title p {
    font-family: 'JuliusSansOne-Regular' !important;
}

h3, h2 strong em {
    font-family: 'Ephesis' !important;
}

h2 strong em {
    font-weight: 400;
    font-style: initial;
    font-size: 4.6rem;
}

.user-items-list .list-section-title p {
    color: #3b6c7f;
}

.form-wrapper .checkbox .option {
    float: left !important;
    width: 30% !important;
}

.sqs-block-button-element:hover {
    background-color: #fff !important;
}

#collection-634d2451e98a0b7dbaa88e44 h2 {
    font-size: 8vw;
}

@media only screen and (max-width: 640px) {
    h2 {
        font-size:2rem;
        line-height: 1.3;
    }
}

div.header-nav-item>a:hover,div.header-nav-folder-item>a:hover {
    border-bottom: 1px solid #000;
}

div.header-nav-folder-item>a {
    display: inline-block;
}

.header-actions .btn:hover {
    background-color: #bae3e8;
    color: #3b6c7f !important;
    opacity: 1 !important;
}

ConaVideoProductions · December 15, 2023

Had a similar issue, If you have duplicated your site you may need to update the URL for the font. That solved my issue as the URL changed after I duplicated.

SabrinaTayla90 · December 15, 2023

Hi Paul,

I am really struggling with my custom font. When I view my website on my MacBook in desktop view and mobile view, the font is perfect. When I open my Squarespace app on my iPhone to view my website, the font is completely different.

All my CSS cording appears correct. The fonts are uploaded as ttf.

I have not yet published the website.

I will be so grateful for all your help.

paul2009 · December 15, 2023

34 minutes ago, SabrinaTayla90 said:

I am really struggling with my custom font.

What is the site URL? It isn't included by default when you post 🙂

CreateEveryday · February 16

Hi! I am also having a similar issue with my custom font 'Botanica'. It works fine on desktop but does not show up correctly on mobile or tablet. Here is my website URL and code snippet below:

www.gonzalezcaicedowedding.com

@font-face {
font-family: 'Brown Sugar';
src: url('https://static1.squarespace.com/static/641377c923334d1a80dffdeb/t/64d1b0ce22c9037a026c2f97/1691463887061/Brown+Sugar+.ttf');
}
@font-face {
font-family: 'Brown Sugar';
src: url('https://static1.squarespace.com/static/641377c923334d1a80dffdeb/t/64d1b0ce22c9037a026c2f97/1691463887061/Brown+Sugar+.ttf');
}
@font-face {
font-family: 'Brown Sugar';
src: url('https://static1.squarespace.com/static/641377c923334d1a80dffdeb/t/64d1b0ce22c9037a026c2f97/1691463887061/Brown+Sugar+.ttf');
}
h1 {
font-family: 'Brown Sugar' !important;
letter-spacing: .05em;
}
h2 {
font-family: 'Brown Sugar' !important;
}
h3, h4 {
font-family: 'Botanica'
!important;
}
p, {
font-family: 'josefin sans'
!important;
}
.header-title-text, .header-menu-nav-item--collection {
font-family: 'Brown Sugar' !important;
}
.portfolio-hover-item-content {
font-family: 'Botanica'
!important;
letter-spacing: .5px;
font-size: 40px;
}

tuanphan · February 18

On 2/17/2024 at 3:26 AM, CreateEveryday said:

Hi! I am also having a similar issue with my custom font 'Botanica'. It works fine on desktop but does not show up correctly on mobile or tablet. Here is my website URL and code snippet below:

www.gonzalezcaicedowedding.com

@font-face {
font-family: 'Brown Sugar';
src: url('https://static1.squarespace.com/static/641377c923334d1a80dffdeb/t/64d1b0ce22c9037a026c2f97/1691463887061/Brown+Sugar+.ttf');
}
@font-face {
font-family: 'Brown Sugar';
src: url('https://static1.squarespace.com/static/641377c923334d1a80dffdeb/t/64d1b0ce22c9037a026c2f97/1691463887061/Brown+Sugar+.ttf');
}
@font-face {
font-family: 'Brown Sugar';
src: url('https://static1.squarespace.com/static/641377c923334d1a80dffdeb/t/64d1b0ce22c9037a026c2f97/1691463887061/Brown+Sugar+.ttf');
}
h1 {
font-family: 'Brown Sugar' !important;
letter-spacing: .05em;
}
h2 {
font-family: 'Brown Sugar' !important;
}
h3, h4 {
font-family: 'Botanica'
!important;
}
p, {
font-family: 'josefin sans'
!important;
}
.header-title-text, .header-menu-nav-item--collection {
font-family: 'Brown Sugar' !important;
}
.portfolio-hover-item-content {
font-family: 'Botanica'
!important;
letter-spacing: .5px;
font-size: 40px;
}

You haven't declared @font-face for Botanica yet

CreateEveryday · February 19

I thought it was declared for h3, h4? How do I declare it?

tuanphan · February 20

17 hours ago, CreateEveryday said:

I thought it was declared for h3, h4? How do I declare it?

It is custom font or Squarespace font? If custom font, you need to add a code like this

@font-face {
	font-family: Botanica;
	src: url(upload Botanica font to your site and paste font file url here);
}

CreateEveryday · February 23

Well I would like to have two fonts declared "Brown Sugar" for H1, H2 and "Botanica" for H3, H4. Where should I place this code snippet in my original code?

cookiemonster · February 26

Hmm I too am having the same issue of custom font appearing on the desktop site and preview of the mobile site but not on my actual iPhone. I initially uploaded the otf file (which worked for desktop), then tried both otf and ttf...if anyone has any pro tips for the mobile version I'd greatly appreciate it 🙂. Below is my code.

@font-face{
font-family: 'paperlane';
src:
url(https://static1.squarespace.com/static/65a8981e4856083a4c3f6c33/t/65d7f844c8b03007c917b181/1708652612155/Paperlane-Regular.otf);}

@font-face{
font-family: 'paperlane';
src:
url(https://static1.squarespace.com/static/65a8981e4856083a4c3f6c33/t/65d7f83c87964c3ca6fe3c0e/1708652604496/Paperlane-Regular.ttf);}

h1,h2, h4 {
font-family: 'paperlane'!important;}

CreateEveryday · February 27

Got it! Thanks!

amanda.j.murray · February 27

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/

ncast21 · February 28

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!

Edited February 28 by ncast21
added viewable link

tuanphan · March 2

On 2/26/2024 at 10:40 AM, cookiemonster said:

Hmm I too am having the same issue of custom font appearing on the desktop site and preview of the mobile site but not on my actual iPhone. I initially uploaded the otf file (which worked for desktop), then tried both otf and ttf...if anyone has any pro tips for the mobile version I'd greatly appreciate it 🙂. Below is my code.

@font-face{
font-family: 'paperlane';
src:
url(https://static1.squarespace.com/static/65a8981e4856083a4c3f6c33/t/65d7f844c8b03007c917b181/1708652612155/Paperlane-Regular.otf);}

@font-face{
font-family: 'paperlane';
src:
url(https://static1.squarespace.com/static/65a8981e4856083a4c3f6c33/t/65d7f83c87964c3ca6fe3c0e/1708652604496/Paperlane-Regular.ttf);}

h1,h2, h4 {
font-family: 'paperlane'!important;}

The font files url doesn't exist. If you copy url and paste on browser, it will show nothing.

You try upload new one & replace url again

Custom not appearing on mobile

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Web_Solutions

paul2009

ejenks

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources