font-family for Futura Condensed Extra Bold not working

Question

I feel like a muppet for asking this but how can i get Futura Condensed Extra Bold to show up in CSS.

Before someone says it, yes I am aware that those Windows people out there wont be able to see it but this is for the Mac community, anyway at this stage i can't even see it and I have the font installed on my system.

So I have tried so many variations of this phrase but none work. I've tried with and without quotes, spaces, dashes, all sorts but it's still not working.

font-family: "Futura-CondensedExtraBold", sans-serif;

Here is a screenshot of the installed font, as you can see the name i used matches the PostScript name too.

Screenshot of Font Book

Amar

+1 for feeling like a Muppet. I don't really know what it means to feel like a Muppet, but it made me smile. – Burke

Why don't you try with including that font into CSS with @font-face? – Tinware

Because the end result of this will be a HTML Email and unfortunately no support for font-face – Amar

Futura is also a licensed font, so you'd be breaking licensing terms (i.e.: stealing) by embedding it with @font-face. – Maccarone

Answer 1

Most people who are using Futura on the web are loading through services like Typekit. So if you are seeing this typeface frequently on sites you like it is for this reason. I recommend trying that service or one similar so everyone can see it. I believe there is a free personal one and it is just a script install. Then your

font-family: "Futura-CondensedExtraBold", sans-serif;

would work. Just check what Typekit uses to load this. I believe there's would be

font-family: "futura-pt-condensed", sans-serif; font-weight: 600;

https://typekit.com/fonts/futura-pt-condensed

Boride

Answer 2

Probably the name is not the one under which browsers know it. This may differ from the PostScript name. Try using a tool for listing installed fonts (see its explanations) to determine the name. My guess is that it might be "Futura Condensed ExtraBold".

Deadman

Answer 3

Font names are also notoriously inconsistent, so that might be one problem. Have you tried @font-face? It's a more reliable way of referencing non-standard fonts. Head on over to http://www.fontsquirrel.com/fontface/generator

You'll need an OTF or TTF of your font. It'll do the rest for you and zip up a demo and the converted fonts.

Sigh

Answer 4

Had a similar issue myself. In Firefox you may need to use just "Futura" with font-stretch and font-weight properties. Webkit/Blink recognize the hyphenated font. This has worked for me cross browser on a Mac:

font-family: "Futura-CondensedExtraBold", Futura, sans-serif;
font-stretch: condensed;
font-weight: bold;

Email web clients strip out css, so do test it.

Waltman

Answer 5

Aside from the iconic Futura Condensed Extra Bold, they also use Trade Gothic Condensed Bold on headings at nike.com

Shauna