4

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

Improve this question
6
  • 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 Jul 5 '12 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... – Digital Lightcraft Jul 5 '12 at 8:12
  • Have u tried compare them on iMac? I guess Safari developers used Apple hardware for it and then ported to Windows. – Boris Ivanov Jul 5 '12 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 – Digital Lightcraft Jul 5 '12 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' Jul 5 '12 at 8:53
10

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.

Improve this answer
4
  • AH! ok that makes sense then. So - is there any way in google web fonts to check IF there is a bold provided? – Digital Lightcraft Jul 5 '12 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 Jul 5 '12 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' Jul 5 '12 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 Jul 5 '12 at 20:01
1

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:

Improve this answer
1
  • Thanks Simone I have used these before, however in this instance they make no difference. – Digital Lightcraft Jul 5 '12 at 8:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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