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 bolder (horribly chunky) in Safari than in the other big 4.

The font I'm using is Telex from Google web fonts via CSS font-face

enter image description here

  • I dont have access to Safari to test this, but if you are using CSS, just wondering why are you using <strong> rather than font-weight:700; anyway... IF I had access to safari I would test font-weight at 500, 600, 700, 800, 900. The browsers I use show 700-900 the same. See if Safari shows it more approvingly.
    – BillyNair
    Commented Jul 5, 2012 at 8:05
  • good question, the reason is that a good amount of the text content in the site is editable by an admin console, usinf FreeTextBox - which is great, but to make things bold, it can only apply <B> or <STRONG>, not CSS styles. The menu above however, is static - the reason for using <STRONG> over a CSS style is purely laziness on my part! (dreamweaver: Ctrl + B) It was fine in Arial across all browsers, but the management wanted to go with a non standard font. I will apply a css style to the menu titles and see what happens... Commented Jul 5, 2012 at 8:12
  • Have u tried compare them on iMac? I guess Safari developers used Apple hardware for it and then ported to Windows. Commented Jul 5, 2012 at 8:24
  • 1
    @Whitty: I have not - I don't have access to one... I used to have one, but my latest laptop purchase steered back towards a windows machine, as i got 3x the spec for less money than a mac Commented Jul 5, 2012 at 8:39
  • Screenshots are nice, but what is the HTML/CSS behind what you're doing here? No need for the entire thing; one of the heading/list chunks should be enough, and the one or two CSS rules directly responsible. (I'm assuming you can't just link to the entire page since this is in dev.)
    – Su'
    Commented Jul 5, 2012 at 8:53

2 Answers 2


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.

  • AH! ok that makes sense then. So - is there any way in google web fonts to check IF there is a bold provided? Commented Jul 5, 2012 at 10:17
  • 1
    Similar things happen if try to use Tahoma or Lucida Grande with font-style:italic: not available in these fonts, so the browser comes up with something you really don’t want to see.
    – fuxia
    Commented Jul 5, 2012 at 10:29
  • 1
    The previews over at Google Webfonts will tell you how many styles are available, between the font and author names. If a given font has more than one(and a lot don't), then there will also be an extra "see all styles" widget on the same line.
    – Su'
    Commented Jul 5, 2012 at 10:32
  • Thank you Su'! that is something I never even bothered to think about. If I bolded a font and didn't like it I looked for a new font. I haven't run into a client that was dead set on a font so what ever worked was good enough. I will need to keep this in mind!
    – BillyNair
    Commented Jul 5, 2012 at 20:01

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:

  • Thanks Simone I have used these before, however in this instance they make no difference. Commented Jul 5, 2012 at 8:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.