CODEWITHSUNDEEP
cssfontssassfont-size
user122222
user122222

Reputation: 2419

Font is not displayed correctly in different zooms and display sizes

I'm using: font-family: "Helvetica LT Bold",sans-serif; font in my page 

@font-face {
font-family: "Helvetica LT";
src: url("/assets/fonts/HelveticaLTStd-Roman.ttf") format("ttf"),
     url("/assets/fonts/HelveticaLTStd-Roman.woff") format("woff"),
     url("/assets/fonts/HelveticaLTStd-Roman.woff") format("otf");
font-weight: normal;
font-style:  normal;

}

@font-face {
font-family: "Helvetica LT Bold";
src: url("/assets/fonts/HelveticaLTStd-Bold.ttf") format("ttf"),
     url("/assets/fonts/HelveticaLTStd-Bold.woff") format("woff"),
     url("/assets/fonts/HelveticaLTStd-Bold.otf") format("otf");
font-weight: lighter;
font-style:  normal;

}

and in different zooms the text looks crooked and is displayed incorrectly. For example, it works with chrome on 100%, 125% , but doesn't with 75%, 80% etc, Edge doesn't work a 100%. Is it possible to correct this issue somehow without changing to another font? Here;s's an example: enter image description here

you can see the letters are dispalyed weirdly

Upvotes: 2

Views: 82

Answers (1)

fish
fish

Reputation: 54

Helvetica LT isn't a web-safe font.

I had this issue a few years ago and eventually had to switch to a new font to stop this issue.

For help choosing a web safe font try this:

https://www.cssfontstack.com/

Upvotes: 1

Related Questions