Jump to content

Custom Menu Font strangely fatter on some screens, making it look bad

Recommended Posts

I added a custom font to my website's menu using CSS code.

The issue: On some screens (mobile and some monitors), Squarespace is making the font strangely fatter, which ruins the look of the font. It seems like it may be an accessibility function? Anyone ever seen something like this?

 

How it should look  (preview of mobile while editing the code on a laptop)

Screenshot2023-06-14at1_07_40PM.png.1df9b79f1c6d0a46d6c5261d933ac0c2.png

Screenshot2023-06-14at1_08_44PM.png.5824716dc17938e0709ff39c1be3016c.png

 

 

How it actually looks  (live on iPhone 14 pro) :

IMG_C07FE8CD3BEA-1.thumb.jpeg.3f15076baa58c92d9bb96fa4c3a4567e.jpeg

IMG_4297.jpg.71d992948fda0085612024ec8c1c2a48.jpg

---

 

The CSS Code:

@font-face {
font-family: BORNA SEMIBOLD;
src: url(https://static1.squarespace.com/static/6358cea32e183d318f6e4d8e/t/646d72e4bfcab25d51876af8/1684894436589/borna-semibold-webfont.ttf);
}

 

//Style Mobile Menu Font
.header--menu-open .header-menu-nav-folder-content a  {font-family: BORNA SEMIBOLD}

 

 

 

Link to comment
  • Replies 2
  • Views 280
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • 2 weeks 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.