When do emoji fonts work if listed after sans-serif?

Question

My understanding has been that sans-serif would give you the operating system default sans-serif font and that every OS would support this. In what scenario would emoji fonts listed after sans-serif be reachable?

Github 2017-08-09

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

Jacob C. · Accepted Answer · 2017-08-11T22:24:05.340

3

See Fallback fonts on special characters "What you described is the default behaviour of a browser - it should naturally fall back to basic font for missing characters. However, sometimes custom fonts use blank characters, in that case you can try using the unicode-range"

So if the earlier fonts don't contain the characters (or have those characters masked done by a unicode-range statement in the @font-face rule), it falls back to fonts that do.

@font-face {
  font-family: 'Sometimes';
  src: local('Times New Roman');
  unicode-range:
    /*upper*/ U+41, U+43, U+45, U+47, U+49, U+4B, U+4D, U+4F, U+51, U+53, U+55, U+57, U+59,
    /*lower*/ U+62, U+64, U+66, U+68, U+6A, U+6C, U+6E, U+70, U+72, U+74, U+76, U+78, U+7A ;
}

p {
  font-family: Sometimes, cursive;
}

In the above example (see jsfiddle), I've made only odd uppercase letters (ACEGIKMOQSUWY) and even lowercase letters (bdfhjlnprtvxz) to show up as Times New Roman.

edited Aug 11 '17 at 22:24

answered Aug 10 '17 at 01:50

Jacob C.

333
1
15

You mean if the user has none of the fonts before `sans-serif` and on their OS they have set their default font to be something custom that has black characters? – ryanve Aug 10 '17 at 01:56
@ryanve your question is phrased confusingly. It goes from left to right -- whatever isn't satisfied by the first ones is looked for in the next, then the one after that, etc. – Jacob C. Aug 10 '17 at 16:09
Right—but don't fonts fallback as a whole or do different characters potentially fallback differently? – ryanve Aug 10 '17 at 18:45
1

The latter. Different characters fall back individually. See this example I've made using unicode-range: https://jsfiddle.net/4b80dk25/ – Jacob C. Aug 11 '17 at 22:16
Great example—thanks! For the emoji fonts to be reachable in my example then it'd have to be characters that are blank in all of the prelisted fonts. How likely is that? Are the possible characters finite? Does Arial include all characters? – ryanve Aug 12 '17 at 01:28
You can check which major fonts support some of the major symbol/emoji-containing blocks here: http://www.fileformat.info/info/unicode/block/ They're spead across several blocks: Emoticons, Miscellaneous Symbols, Miscellaneous Symbols and Pictographs, Supplemental Symbols and Pictographs, Transport and Map Symbols, Dingbats. Open a browser tab for each, then at the bottom of each click "Fonts that support this block". Arial does not include all those. Here's its coverage, according to fileformat: http://www.fileformat.info/info/unicode/font/arial_unicode_ms/blocklist.htm – Jacob C. Aug 15 '17 at 01:40
1

As for possible characters being finite: https://stackoverflow.com/questions/5924105/how-many-characters-can-be-mapped-with-unicode – Jacob C. Aug 15 '17 at 01:41

score 1 · Answer 2 · edited Aug 18 '17 at 14:57

Reverse the order. The font you prefer goes first, then fallback fonts follow. The browser will stop looking through the font list as soon as it finds something that works.

I set up an example below, where each of .first .second and .third use custom fonts.

.fourth also has those fonts listed but I set my preference to sans-serif by loading it first.

The result is that even when I have all of those custom fonts in the list for font-family for the class .fourth, the browser stops at sans-serif.

span {
  font-size: 30px;
  display: block;
  margin: 2em auto;
}

.first {
  font-family: 'Caveat';
}

.second {
  font-family: 'Cedarville Cursive';
}

.third {
  font-family: 'Permanent Marker';
}

.fourth {
  font-family: sans-serif, 'Permanent Marker', 'Cedarville Cursive', 'Caveat';
}

<link href="https://fonts.googleapis.com/css?family=Caveat|Cedarville+Cursive|Permanent+Marker" rel="stylesheet">

<span class="first">I haz kode </span>
<span class="second">I haz kode </span>
<span class="third">I haz kode </span>
<span class="fourth">I haz kode </span>

I get `Script error.` in Chrome 60 but it works in Firefox and I can see. I get what you did and that aligns with my existing understand...that fonts after sans-serif are unreachable. — ryanve, Aug 10 '17 at 20:05

When do emoji fonts work if listed after sans-serif?

Github 2017-08-09

2 Answers2