Safari Font-Weight Issue , Text Too Bold

Safari font-weight issue , text too bold

For rendering bold text consistently across browsers, your font should explicitly contain bold characters. Otherwise, browsers probably try to make bold variants of characters based on their normal variants, and results are inconsistent across browsers since they likely have different algorithms for such conversion.

Also note that text rendering may be different on different platforms on system level (e.g. Windows, Mac OS). Such differences are OK and do not typically need to be fixed.

See also topic about -webkit-font-smoothing property.

Font weight turns lighter on Mac/Safari

So I fixed my problem with applying:

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

Now my font is consistent on every browsers.

Safari font rendering issues

Safari has an issue with fonts. The easiest fix for the duplicate text issue is clarifying the font-weight:

font-weight: 400;

Using Lucho's Javascript's text stroke solution along with specifying font-weight will make your text the same as it is on Chrome.

@font-face problem with font-weight in Safari

As explained here, you have to add

font-weight: normal;
font-style: normal;

inside the @font-face declaration and then use the font-weight:600; on your anchor.

safari css bold font too bold

There is technically nothing you can do about this. Here's an article on the topic of crappy Safari font smoothing

There are workarounds though

• Use images instead of text
• Make the font look thinner

Font Weight (incorrectly) Lighter in Mac Safari Only

With the comments / prodding from @JukkaK.Korpela, I discovered a few things:

First, the root of the problem is this:

-webkit-backface-visibility: hidden;

Which was added to the code to solve an animation problem per this answer: iPhone WebKit CSS animations cause flicker

Don't know how to solve the font and solve the flicker, but I can at least choose which one to solve now.

Second, as an avid Firefox/Firebug user, I had tried using Firebug Lite in Safari, as well as another extension for Safari, and they did not work. So, for all of you out there who may be trying to troubleshoot Safari-only issues, here's a big tip:

Safari's "Develop" tool. Didn't know about it at all until I did some searching today, but it's a menu item in the toolbar. If you don't see it, then go to Preferences->Advanced, and check the "Show Develop Menu in Toolbar"

With that tool, I was able to troubleshoot and solve this quickly.

Safari on iOS unable to show a normal CSS font as bold

Safari won't display a font out of its available font-weights.

So if that font doesn't have bold type then it won't be bold in safari.

Same font except its weight seems different on different browsers

Be sure the font is the same for all browsers. If it is the same font, then the problem has no solution using cross-browser CSS.

Because every browser has its own font rendering engine, they are all different. They can also differ in later versions, or across different OS's.

UPDATE: For those who do not understand the browser and OS font rendering differences, read this and this.

However, the difference is not even noticeable by most people, and users accept that. Forget pixel-perfect cross-browser design, unless you are:

1. Trying to turn-off the subpixel rendering by CSS (not all browsers allow that and the text may be ugly...)
2. Using images (resources are demanding and hard to maintain)
3. Replacing Flash (need some programming and doesn't work on iOS)

---

UPDATE: I checked the example page. Tuning the kerning by text-rendering should help:

text-rendering: optimizeLegibility; 

More references here:

1. Part of the font-rendering is controlled by font-smoothing (as mentioned) and another part is text-rendering. Tuning these properties may help as their default values are not the same across browsers.
2. For Chrome, if this is still not displaying OK for you, try this text-shadow hack. It should improve your Chrome font rendering, especially in Windows. However, text-shadow will go mad under Windows XP. Be careful.

---

Related Topics