Jump to content

Headings are bolder on mobile, help

Recommended Posts

Hey everyone!

I have two font issues going on that only manifest when I look at my website on my iPhone. Mobile mode does not show it on the desktop, and the fonts work as they should when navigate the website on the desktop. I have custom fonts that I've designated for headings and body copy.

Problem 1: 
The headings are appearing extra extra bold on mobile. How can I cancel out this weight so that the font is viewed as its designed? 

Problem 2:
Body copy and color are reverted to whatever template font I have set for the website. How do I force my custom font to show up on mobile? 

Again, I'm only seeing these issues on my mobile phone. 

First screenshot is how it SHOULD look on mobile. Second screenshot is the problem. 
 

Screenshot 2023-04-25 at 9.51.18 AM.png

IMG_8564.PNG

Link to comment
  • Replies 7
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Additionally, here's my code: 


h1 {font-family: 'EmysAltBlack'
  !important;
}

h2 {font-family: 'EmysAltBold'
  !important;
}

h3 {font-family: 'EmysAltBold' !important;
}

h4 {font-family: 'EmysAltReg' !important;
}

p {font-family: 'Andes'
!important;
}

Link to comment

If your font does not have dedicated bold style then on desktop the browser tries to render it automatically whereas on mobile devices it causes problem. You can try including: 

-webkit-font-smoothing: antialiased;

if that does not help, then please provide some more details about how are you including your custom font in the site. does your @font-face declaration has bold style or not.

To give an example, here is the declaration of font with the same name and different weights:
https://www.smashingmagazine.com/2013/02/setting-weights-and-styles-at-font-face-declaration/#style-linking

The link is pointing to the section where they have used two different files for different weights of the font. So when we use weight 700, it uses  Ubuntu-B-webfont.eot font to render bold style and when you use weight 400, it uses Ubuntu-RI-webfont.eot for normal style. This way, the browser doesn't have to emulate the bold font from normal style.

Edited by Vicks
Link to comment

Vicks, here's the rest of the CSS where the custom typeface is loaded and labeled. Ubuntu shouldn't be anywhere on my site, the two typefaces should be Emy's Alt and Andes. Emy's Alt has three weights I want used: Black, Bold, and Regular as shown below. I appreciate you looking into this!

 

@font-face {
    font-family: 'EmysAltBlack';
    src: url('https://static1.squarespace.com/static/62defd12f69ade46d9236166/t/63efa7a9e63e4552bfd5b0ca/1676650409134/emyslabalt-black.otf');
    }

@font-face {
    font-family: 'EmysAltBold';
    src: url('https://static1.squarespace.com/static/62defd12f69ade46d9236166/t/63efa85934eb1063a437e7a3/1676650585248/emyslabalt-bold.otf');
    }

@font-face {
    font-family: 'EmysAltReg';
    src: url('https://static1.squarespace.com/static/62defd12f69ade46d9236166/t/63efa863add14e30df6c2382/1676650595901/emyslabalt-regular.otf');
    }

@font-face {
    font-family: 'Andes';
    src: url('https://static1.squarespace.com/static/54dc343ce4b0c2bd84e1460e/t/5f4d3d06c711810c2e62b238/1598897414385/Latinotype+-+Andes.otf');
    }


/* Font Styles */

h1 {font-family: 'EmysAltBlack'
  !important;
}

h2 {font-family: 'EmysAltBold'
  !important;
}

h3 {font-family: 'EmysAltBold' !important;
}

h4 {font-family: 'EmysAltReg' !important;
}

p {font-family: 'Andes'
!important;
}

.main-nav a {
   font-family: 'EmysAltBold' !important;
}

#site-title {font-family: 'EmysAltBlack'
  !important;
}

Link to comment
  • 7 months later...

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.