Menu icon Foundation
Antialiasing class isn't working

I really like how the font in the documentation is antialiased (topbar, buttons, etc). I found a $font-smoothing: antialiased; option in the SCSS but uncommenting this doesn't appear to change anything on my site. I dug into the code and it appears that this adds:

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

to the stylesheet. But this doesn't make my font antialiased.

I found an old issue for 4.1.3 at https://github.com/zurb/foundation/issues/2250 and adding:

body { -webkit-font-smoothing: antialiased; }

works but it doesn't appear that the second solution in that link (adding an antialiased class) is working anymore. Are others have a similar experience?

Antialiasing class

I really like how the font in the documentation is antialiased (topbar, buttons, etc). I found a $font-smoothing: antialiased; option in the SCSS but uncommenting this doesn't appear to change anything on my site. I dug into the code and it appears that this adds:

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

to the stylesheet. But this doesn't make my font antialiased.

I found an old issue for 4.1.3 at https://github.com/zurb/foundation/issues/2250 and adding:

body { -webkit-font-smoothing: antialiased; }

works but it doesn't appear that the second solution in that link (adding an antialiased class) is working anymore. Are others have a similar experience?

Hermann Dettmann over 4 years ago

As I stumbled upon the same issue and ended up here I want to share my solution for this. The variable $font-smoothing: antialiased in _settings.scss didn't work for me either but I used the class .antialiased from _global.scss as an @extend in my stylesheet like this:

h1,h2,h3,h4,h5,h6,p,label{
  @extend .antialiased;
}

Maybe this helps someone...