Webfont Smoothing and Antialiasing in Firefox and Opera

by

As Opera is powered by Blink since Version 15.0 -webkit-font-smoothing: antialiased does also work on Opera.

Firefox has finally added a property to enable grayscaled antialiasing. After a long discussion it will be available in Version 25 with another syntax, which points out that this property only works on OS X.

-moz-osx-font-smoothing: grayscale;

This should fix blurry icon fonts or light text on dark backgrounds.

.font-smoothing {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

You may read my post about font rendering on OSX which includes a Sass mixin to handle both properties.

More Related Contents:

  1. Why should we include ttf, eot, woff, svg,… in a font-face
  2. Create webfont with Unicode Supplementary Multilingual Plane symbols
  3. Converting and rendering web fonts to base64 – keep original look
  4. Fix custom font line-height with CSS
  5. Transparent text cut out of background
  6. Are eot, ttf, and svg still necessary in the font-face declaration?
  7. Same font except its weight seems different on different browsers
  8. Font Awesome 5 Choosing the correct font-family in pseudo-elements
  9. How to import Google Web Font in CSS file?
  10. Wait for fonts to load before rendering web page
  11. What does the forward slash mean in the CSS font shorthand?
  12. Is there any “font smoothing” in Google Chrome?
  13. How do I install a custom font on an HTML site
  14. Downloading a Google font and setting up an offline site that uses it
  15. @font-face anti-aliasing on windows and mac
  16. How can I determine what font a browser is actually using to render some text?
  17. 3D CSS transform, jagged edges in Firefox
  18. CSS: bolding some text without changing its container’s size
  19. Font size in CSS – % or em? [duplicate]
  20. Webpack “OTS parsing error” loading fonts
  21. Icon fonts not loading in IE11
  22. Make text height 100% of div?
  23. Non-Standard fonts in web?
  24. How to add fonts to create-react-app based projects?
  25. When setting a font-size in CSS, what is the real height of the letters?
  26. Font weight turns lighter on Mac/Safari
  27. How to prevent different browsers rendering fonts differently?
  28. How do I style a specific word with CSS in an HTML element?
  29. How to add a custom font to Rails app?
  30. -webkit-font-smoothing property has no effect in Chrome

Leave a Comment