androidcssgoogle-chromefontsmobile-chrome

Font family "cursive" doesn't work in chrome mobile v47


I'm wondered why it doesn't work in chrome mobile browser v47 (latest atm), since it perfectly works at desktop one including different mobile device modes in developer tools.

Is there workarounds exist? At least, what it's original name I can find for the download?

Check this up:

<style>

* {
  font-family: cursive;
}

</style>

<div>
  I should be cursive even on mobile devices
</div>

JSFiddle

Notice, it works in developer tools but doesn't from real mobile device one.


Solution

  • Never rely on generic family keywords to actually be "a specific font". There is no requirement for the browser to load a font that matches the keyword, technically it just needs to load "a" font. The CSS specification is very explicit about this:

    "Generic font families are a fallback mechanism, a means of preserving some of the style sheet author's intent in the worst case when none of the specified fonts can be selected. For optimum typographic control, particular named fonts should be used in style sheets.

    "All five generic font families are defined to exist in all CSS implementations (they need not necessarily map to five distinct actual fonts)."

    With my emphasis added to the part that explains that you are responsible for getting the right font loaded.