Is it possible to hide missing characters of typefaces?

Viewed 89

Let's say this is my website:

* {
  font-family: Papyrus, nothing;
  font-size: 30px;
  line-height: 100%;
}
Qui legit haec est mirabilis ❤

Now, the ❤ is not written in Papyrus, because it's no glyph of this font. I would like to generally hide all glyphs that do not exist in the font file. Taking the notdef glyph of the font file instead would be also fine. I want to use it for an editable text area later. So doing it manually doesn't help me.

How is it possible to do that?

2 Answers

You can use Adobe Blank as the fallback value in the font-family declaration. This way, any glyphs not in the Papyrus font won't be rendered on the page.

* {
  font-family: Papyrus, "Adobe Blank";
  font-size: 30px;
  line-height: 100%;
}
<head>
  <!-- Include the Adobe Blank Font -->
  <link rel="stylesheet" media="screen" href="http://fontlibrary.org/face/adobe-blank" type="text/css"/>
</head>

<p>Qui legit haec est mirabilis ❤</p>
<p>Qui legit haec est mirabilis❤</p>

I don't Know That's Possible or not but you can try this Which will print your emoji and if you have many emojis then you can create a common class and then you can do select normal font to print all emoji

* {
  font-family: Papyrus, nothing;
  font-size: 30px;
  line-height: 100%;
}
Qui legit haec est mirabilis <span style="Calibri"> ❤
</span>

Related