IPhone: how to deal with the fact that Futura Bold is not available

HTML & CSS
1

Hello

I would like some advice on constructing a font-family involving Futura which will display nicely on the iPhone for bold text.

My site, www.swingoutlondon.co.uk uses a font-family of Futura, falling back to Trebuchet MS. Futura generally only displays on Macs, and looks lovely, but isn’t installed on most windows machines, in which case Trebuchet is an acceptable substitute.

Unfortunately on the iPhone, only Futura Medium, Futura Medium italic, and Futura Condensed Extra Bold are installed by default - there is no simple Bold version of the font. Futura Condensed Extra Bold has a completely different shape to the rest of the font and looks pretty horrible to my eyes, but this is what is used for bold Futura text in Safari on the iPhone.

I can think of 2 options, each with their own problems:

  1. Forget about Futura and use good old sturdy Trebuchet throughout (but that would be a cop-out)
  2. Replace all instances of “font-weight:bold” with a new font family declaration of “Trebuchet MS Bold” (but what do I do about the base sans-serif font? Also, there would be a slight visual clash between bold text in Trebuchet and body text in Futura)

Any advice, both general and specific, would be gratefully received.

P.S. I’m guessing I can do some sort of conditional include to only apply these styles to iPhone-type user agents, but I’m sure I can find that out for myself, so I won’t bother you kind people with it

2

Glad we managed to help. At least you have a way forward!

3

Actually, that seems pretty obvious now. I’m mainly talking about headers and dt’s, but of course it makes sense to define a different style and just apply it to all the h1/h2/dt elements.

Thankyou bluedreamer

I’ve since realised that the Mac doesn’t actually have Futura bold either, but firefox and chrome artificially attempt to “bulk out” fonts which don’t have an explicit bold style. Opera on the mac simply ends up ignoring the bold.

I think I’m going to leave the CSS as it is, and have a mobile-specific stylesheet which doesn’t use bold, or doesn’t use futura depending on the element.

4

Why don’t you add a separate font-family style for <STRONG> tags to get your desired result?

Or if it’s just for presentation purposes wrap the text in a SPAN tag, eg:

This is my text, <span class="makemebold">this is bolded</span>

span.makemebold {font-family: sans-serif; font-weight: bold;}
5

Calm down deathshadow- You seem to have massively misunderstood me:

I’m just purely talking about presentation in CSS: The site works perfectly fine on iPhone and in browsers. Perhaps my post wasn’t clear enough, but All I’m saying is that I don’t like the font which the iPhone uses for bold text and I’d like to make it LOOK different.

The font-face doesn’t MATTER, most CSS doesn’t really MATTER, but I would like my site to look Nice if I can!

Please explain what you mean by “attempting to go pixel perfect with the exact font” - I don’t understand what that means, and I don’t think I was suggesting anything of the sort…

Finally, how could changing the font-face or font-weight declarations possibly be “bad for accessibility”???

Please read my post properly before being so dismissive.

6

DON’T!!! Do not design your page so that the font-face matters, that’s how. Even attempting to go pixel perfect with the exact font is bad design, bad accessibility, and a waste of time.

7

Thanks for the reply bluedreamer, but you haven’t understood my query - I probably wasn’t clear enough.

The Normal font I want is on the iPhone, but I’d like to see if I can use a different font for Bold… Please re-read my post and see if you have any ideas.

8

If your favourite font isn’t available on a device like the iPhone just pick another font stack including fonts that are available to meet your aims.