-1

I have noticed that at Google Fonts they never use fantasy as fallback class in font-family. For all script and typical fantasy fonts, they use cursive.

I wonder if this is a hint that chrome does not support fantasy as fallback class? For that to be the case, fallback font-classes would have to be handled by the browser via implemented lists for typical serif, sans-serif etc. fonts. Alternatively, the browser could query the os for such lists?

What happens when the browser needs to fallback to say a serif font on the clients system? How will it get info on the installed serif fonts?

I haven't been able to find an aswer to this, so I hope that someone here might know about it. I know web safe fonts and all that are probably about to become things of the past, but they still have some relevance.

Stephen Miller
  • 503
  • 3
  • 11

2 Answers2

1

Typefaces don't map to any generic font families mechanically. They're only categorized that way in their family names and on font listings such as Google Fonts and Adobe Typekit.

You could create a font stack that consists of a sans-serif family, a serif family, and ends with the fantasy keyword:

font-family: Helvetica, 'Times New Roman', fantasy;

And browsers would treat it the same: use whichever family comes first that is supported, or fall back to the generic family if it comes to that.

I would expect all browsers to implement at least the five generic families defined in CSS2.1 and css-fonts-3: serif, sans-serif, cursive, fantasy, and monospace. But which faces each generic family maps to exactly is less predictable — for one, most browsers actually offer the user the ability to change their preferred default serif, sans-serif and monospace families. And even then, the entire list of installed fonts is available for selection in every category, which suggests that even browsers can't (or at least don't) differentiate between categories of fonts.

The default preferences that a browser ships with are based on assumptions of which fonts are most likely to be preinstalled on any given system.

I can't answer why Google Fonts doesn't seem to specify fantasy in any of its font stacks.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
0

I've set up a test case:

http://codepen.io/jaycrisp/pen/NxOrOy

.cursive {
  font-family: cursive;
}

.fantasy {
  font-family: fantasy;
}

I see different fonts in chrome on mac, so that shows that chrome does support the fantasy keyword. I see the same font on Safari and Chrome too.

I'm seeing papyrus for the fantasy font, which I think is a Mac OS bundled font. I'm also seeing the same font on Firefox and Safari.

I would guess that the reason google font uses cursive instead of fantasy is that if you're using such a font, you're probably going for a very specific look to your site. Replacing this font with something like papyrus is going to totally ruin it. Well, using Papayrus will totally ruin your site anyway, but that's another matter.

JamieC
  • 567
  • 3
  • 11
  • Nice test. If I do this on a pc, I get different results in Chrome and Firefox with fantasy. Firefox is the one apparently not handling fantasy correctly. – Stephen Miller Feb 05 '16 at 16:39
  • @StephenMiller I don't think that it's necessary handling it incorrectly. The [spec](https://www.w3.org/TR/CSS2/fonts.html#fantasy-def) only gives a description of the font types and some examples. It's up to the browser to determine what to use. – JamieC Feb 05 '16 at 16:42
  • So I guess Firefox determines not to handle fantasy at all: It seems to fall back to sans-serif no matter if i try to use fantasy as generic family or request a non-existing font with no fallback. – Stephen Miller Feb 05 '16 at 16:50
  • Firefox does render them differently for me on mac OS. Maybe you don't have a suitable font installed. – JamieC Feb 06 '16 at 09:24