Safari does ellipsis in wrong font

Question

I've setup a demo as follows:

<div>Bar Foo</div>

And styles:

div {
    width: 100px;
    overflow: hidden;
    border: 1px solid black;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 50px;
    font-family: 'Pacifico', cursive;
}

Now, In Chrome the dots of the ellipsis are in the correct font, but in Safari the dots are in a different font. Is there a way to fix this ?

Answer 1

The central issue is that the Pacifico font as used in the demo* does not include an ellipsis character (U+2026). Safari uses that character when text-overflow: ellipsis is active. Because the character is not present in the active font, the font-fallback mechanism selects a different font that does contain the character and that is what is rendered.

This does not occur under Chrome because Chrome apparently synthesizes an ellipsis using the glyph shape of the period (U+002E) character (it's not clear to me whether Chrome always does this, or only in cases where the font doesn't include U+2026).

*Note: the complete Pacifico font on Google fonts does appear to contain U+2026, so it's something to do with the font getting subsetted when using webfont.js as in this demo.