Menu icon Foundation
Rails Foundation 5 Header Fonts Appear Bold / Bigger?

Can anybody shed some light? I have two applications now where suddenly all header tags,

-

the fonts randomly changed one day. When I say changed, they don't look the same they look bold / thicker. I'm not sure if it's the same font, they just are thicker.

It happened to one of my rails app's and I've spent ages trying to fix it. I ended up starting a new app, everything was fine then one day it randomly happened to this one? Very frustrating. I will post a picture of h1 text so you can compare to h1 on foundation docs.

Any help appreciated.

Thanks

Lee

Screen shot 2014 02 19 at 15.08.36

railsFoundationheaderfontsboldbiggerh1h2h3h4h5cssstylesheets

Can anybody shed some light? I have two applications now where suddenly all header tags,

-

the fonts randomly changed one day. When I say changed, they don't look the same they look bold / thicker. I'm not sure if it's the same font, they just are thicker.

It happened to one of my rails app's and I've spent ages trying to fix it. I ended up starting a new app, everything was fine then one day it randomly happened to this one? Very frustrating. I will post a picture of h1 text so you can compare to h1 on foundation docs.

Any help appreciated.

Thanks

Lee

Screen shot 2014 02 19 at 15.08.36
Rafi Benkual almost 6 years ago

Since you are using Rails, maybe something's is happening with the asset pipeline?

Chris Aliipule almost 6 years ago

I'm not using Rails and I have this issue. My top-bar text is thicker than I want it to be. I was really thrown off because it flies under Chrome Developer Tools' radar. This issue doesn't show up on the Foundation demos. I found the answer on Google.
https://groups.google.com/forum/#!topic/foundation-framework-/ytrW6fC-yAU

It was first noticed on Foundation 4.08. This bit of CSS can fix it:
CSS
body {-webkit-font-smoothing: antialiased;}

The purported settings are:
SASS
$header-text-rendering: optimizeLegibility;
$paragraph-text-rendering: optimizeLegibility;

That bit of SASS above outputs CSS like this:
CSS
p {
text-rendering: optimizeLegibility;
}

This shouldn't affect my top-bar because it's not a paragraph or heading element. I'm enabling antialiased fonts and moving on.

MORE READING
http://foundation.zurb.com/docs/components/typography.html
http://aestheticallyloyal.com/public/optimize-legibility/
https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering
http://css-tricks.com/forums/topic/text-rendering-optimizelegibility/#post-164817
http://stackoverflow.com/questions/7968795/is-it-safe-to-use-the-css-rule-text-rendering-optimizelegibility-on-all-text