I am using nova-font in my website, but it looks different-in Firefox (A-bit-zoom-and-more-sharp). Is there any solution so that it looks same on both Chrome and Firefox?
Asked
Active
Viewed 78 times
4
-
Are you using px, em or rem? Sample code would be great for us to look at so we can help you out. – ScottieG May 18 '19 at 10:09
-
I'm using font size in pixels, here is a sample CSS attached. But i think font size is not the main issue typography looks a bit different in Firefox. .body { font-family: novaregular !important; color: #5a5a5a; overflow-x: hidden; font-size: 14px; font-smoothing: antialiased; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } – Ali Abbas May 20 '19 at 07:32
1 Answers
1
Font-rendering in browsers is different, so there are a few tweaks which can be done to make it less worse, but cross browser pixel perfect font rendering is yet (mid 2019) not achieved because of the different render engines in the browsers.
I can give you a few hints on how to improve your code - if you google the properties you will find more about them:
html {
/* Adjust font size */
font-size: 100%;
-webkit-text-size-adjust: 100%;
/* Font varient */
font-variant-ligatures: none;
-webkit-font-variant-ligatures: none;
/* Smoothing */
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
}
Felix Haeberle
- 1,530
- 12
- 19
-
Still Firefox font look's a lil bit edgy. One more thing i want to ask is, i have used **font-synthesis:style;** property in Firefox. It makes novabold font thinker just like in chrome. But its only working in few sections. – Ali Abbas May 20 '19 at 08:03
-
1If you find my answer helpful, please mark it as accepted. For the other question, search for StackOverflow for the same question or make a new one if it's not already asked. – Felix Haeberle May 20 '19 at 08:49