What's the right font-stack for degrading an @font-face defined web-font?

Get Started
1

Before paying for an online svc, I’m experimenting locally with webfont setup & performance.

Atm, I’m interested in building the optimal font stack for a defined webfont.

For local testing, I’ve created a local instance of Helvetica Neue in web-font format.

The @font-face spec I use is:

	@font-face {
		font-family: 'HelveticaNeue77BoldCondensed';
		src: url('/fonts/helveticaneue-boldcond-webfont.eot');
		src: local('☺'),
			url('/fonts/helveticaneue-boldcond-webfont.woff') format('woff'),
			url('/fonts/helveticaneue-boldcond-webfont.ttf') format('truetype'),
			url('/fonts/helveticaneue-boldcond-webfont.svg#webfontqSuETJjk') format('svg');
		font-weight: bold;
		font-style: normal;
	}

In my .css,

	body {font-family: 'HelveticaNeue77BoldCondensed'}

works as expected, DL’ing the font to the browser for display, as required. Of course, there’s no font-stack for degradation.

Reading a slew of various articles offering their ‘best’ font stacks, each seems to offer a different stack, with different numbers & identities of fonts added for degradation. Putting all the suggestions I’ve found together, addressing the specific naming of various HelveticaNeue instances on various platforms, I end up with:

	body {	font-family: 'HelveticaNeue77BoldCondensed',
		"HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue",
		"TeXGyreHerosCnBold", "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial",
		sans-serif;
	}

This seems like vast overkill … too many variations. Any particular harm in that?

Or, what’s the recommended font-stack in this particular case … and what, if any, particular logic is used to arrive at a reasonable set?

2

You’d still need some sore of prioritization … e.g., if two matches were available, which would be used first.

With greedy matching, the first match gets used first.

Sure. What’s trying “less hard” specifically look like?

It would have your @fontface and then possibly one or two mentions of Helvetica Neue. Yes, that one in particular is known for having several different names cross-platform… you picked a good one! : ) Trying less hard would indeed mean fewer people getting the font you want. I do hope someone who’s been dealing more regularly with fonts and web typography jumps in with a better idea.

Fwiw, in this ‘test’ case, I’m using Helvetica Neue Condensed Bold. That font’s widths are significantly different than ‘just’ Helvetica. I.e., using Helvetica instead will noticeably alter page layout.
I can imagine, but as a computer user without those fonts, I’ll never see it. The page will look very different… and even with an ideal font-stack, that’ll just happen anyway.

I wasn’t trying to discourage you, but especially with this particular font, it looks like a long road.

3

The best match I can find for Neue Helvetica 77 is “ITC Franklin Gothic Demi Condensed” (also “Franklin Gothic Demi Cond”). I believe this is reasonably common. A good backup would probably be “Arial Narrow Bold”, which is similar enough in shape and style.

But ultimately, you have to accept that sometimes people will see the resulting page differently - they may have a completely different set of fonts (eg on Linux), or their browser or platform may size the text slightly differently, or they may have a different default font size, or they they may have a different windows size … if your layout is so flaky that it completely falls apart when someone looks at it in a slightly different font, your priority should be fixing the layout to something more robust.

4

if your layout is so flaky that it completely falls apart when someone looks at it in a slightly different font, your priority should be fixing the layout to something more robust.

There’s a rather big difference between a layout being “flaky”, and wanting to best manage font degradation so as to best preserve site look and feel.

That, itself, is certainly part of robust site design.

My question is about the process of choosing the best font-stack, not about whether it’s possible/probable that end-users might see a different font.

5

You’d still need some sore of prioritization … e.g., if two matches were available, which would be used first.

Sure. What’s trying “less hard” specifically look like?

Fwiw, in this ‘test’ case, I’m using Helvetica Neue Condensed Bold. That font’s widths are significantly different than ‘just’ Helvetica. I.e., using Helvetica instead will noticeably alter page layout.

Which is, after all, the point of font-stacks – and getting them right – in the first place, making sure to degrade within similar height/width font families.

6

I’m not sure what the best font stack for something trying to be as specific as this is, but it sure makes me wish wildcard and/or regular expressions were allowed in font declarations.

like
(^(Hevetica)[\s-]Neue[\s-](Bold)?[\s-]*(Condensed)?)

I’m pretty sure a lot of people will tell you the “recommended” solution is not to try so hard to get everyone seeing the same font. I do not believe I have Helvetica Neue on my computer (ubuntu) and not sure if I could tell the difference between that and Helvetica (which I do have because I downloaded it) unless the two were sitting side by side anyway. Typonerds of course know the difference immediately : )

7

I’m curious, the long-winded version you posted above: have you tested it? If it works on many machines and the design is that important to you, then at least if nothing better shows up (I’m starting to think not) then you have something that at least works. It does look like a lot of code, but I suppose I’d do it if I were that strict on my typography.

Maybe Alex Dawson will chime in, I think (not sure) that he’s been dealing with @font-face recently.

8

Some, not exhaustively. Yes, it works. At least though a couple of degradation steps.

HelveticaNeue is just an example – albeit a “long winded” one.

Again, my question is about general process/approach to the ‘right’ font-stack for a given font. How many, which ones, criteria for adding to the stack.

I’m assuming (a) it’s not voudou, & (b) there’s experience in these forums with it.

There’s guidance elsewhere (http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/) which does not directly address the addition of DL-able webfonts to the stack, and whether that changes best-practices.