Font looks blurry on Firefox

user_5774848 0
Viewed 5960

It just ok with chrome and opera. But it looks blurry on Internet explorer and Firefox. I researched and apply these css, but still no luck. My firefox and Internet explorer versions are up to date. I'm not using google font. Here is my styles. 

@font-face {
  font-family: 'Gotham-Bold';
  src: url('../fonts/Gothambold/Gotham-Bold.eot');
  src: url('../fonts/Gothambold/Gotham-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/Gothambold/Gotham-Bold.woff') format('woff'), url('../fonts/Gothambold/Gotham-Bold.ttf') format('truetype'), url('../fonts/Gothambold/Gotham-Bold.svg#') format('svg');
}

body{
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-smooth: always;

font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;
}

View in firefox. enter image description here

View in chrome enter image description here Still no luck. Any ideas?

firefox css html
2 Answers

Text that appears blurry or pixelated in Firefox may be due to ClearType not being turned on if using Windows. To turn it on:

  1. From the Windows search bar, search for 'Adjust ClearType Text'
  2. Check the box to Turn on ClearType and click 'Next'
  3. Follow the prompts to tune the ClearType settings and click 'Finish'.

I had the same issue and this worked for me. Source.

user_83786170
Related