Custom not appearing on mobile

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 😕

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

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

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 : )

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

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

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

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

43 minutes ago, 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 did 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

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

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