Using @font-face to Select Vector Emoji Instead of System Bitmap Fallback #6
Description
By default, PlutoBook (like most browsers) will fall back to the system’s built-in emoji font, usually a bitmap font such as Segoe UI Emoji or Apple Color Emoji. While these fonts display colorful emoji, they are raster-based and can appear blurry when enlarged. To achieve crisp, scalable emoji in PlutoBook documents, you can embed a vector emoji font using the CSS @font-face rule.
System Bitmap Emoji (Default Fallback)
Without a custom emoji font, PlutoBook uses the platform default, resulting in bitmap rendering.
<!DOCTYPE html>
<html>
<style>
body {
font-family: serif;
font-size:500px;
text-align: center;
}
</style>
<body>
<span>🎡</span>
</body>
</html>Expected output:
Vector Emoji via @font-face
PlutoBook supports CSS @font-face declarations, allowing you to load a vector color font such as Google’s Noto Color Emoji (COLRv1).
This ensures emoji render sharply and scale cleanly in generated PDFs and images.
<!DOCTYPE html>
<html>
<style>
@font-face {
font-family: emoji;
src: url('Noto-COLRv1.ttf');
}
body {
font-family: serif, emoji;
font-size:500px;
text-align: center;
}
</style>
<body>
<span>🎡</span>
</body>
</html>Expected output:
Conclusion
In PlutoBook, using @font-face to load a vector emoji font gives you precise control over color emoji rendering. Instead of relying on system bitmap fallbacks, you can produce scalable, resolution-independent vector emoji that are ideal for high-quality PDF output and consistent cross-platform results.