CODEWITHSUNDEEP
cssfontsoperating-systememojifont-family
ryanve
ryanve

Reputation: 52531

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

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"

Upvotes: 5

Views: 2378

Answers (2)

I haz kode
I haz kode

Reputation: 1635

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>

Upvotes: 1

Jacob C.
Jacob C.

Reputation: 364

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.

Upvotes: 4

Related Questions