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

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

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

---

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}

The problem may come from the custom font. Do you have any other font format? (eg: woff, woff2,..)

Hi tuanphan,  thanks for the idea. I do, I will try!