: Why is in Safari significantly bolder than other browsers? I am just about to go live with a new website - and during cross browser testing i noticed that the bold fonts in safari are FAR

@Angie530

This is happening because Telex doesn't actually provide a bold weight, which means the browsers synthesize it, and that doesn't always come out so great. (Note as @toscho points out below, this is a general problem, not limited to Google Webfonts or even just font embedding.) WebKit/Safari seems to especially suck at this and in the mobile version you'll sometimes actually see the text doubled with a slight offset like you're applying a fake drop-shadow.

There isn't much you can do about it. See this JSFiddle which has your example block above with Telex applied and showing your problem, then a second font that does have a proper bold(which behaves), and then a third font that again has no bold and shows the behavior you're mentioning. If you're set on using Telex and this is unacceptable, then I'd suggest you pick another device, such as a color change, to call out the headings instead.

Vote Up Vote Down

@Miguel251

All browsers have presentation defaults, but no browsers have the same defaults.

For this reason, most designers use a reset CSS file before start coding the real design.
There are several reset tools available, the most famous are:


reset.css
normalize.css

Vote Up Vote Down