How to how emoji render: os fonts vs web fonts
- Step 1Inspect the fallback chain — Browser Dev Tools → Computed → font-family. The chain typically: "YourBrand", -apple-system, ..., "Apple Color Emoji". Browsers walk this list per character — for emoji characters, they jump to the OS emoji font automatically.
- Step 2Check OS emoji fonts — macOS/iOS: Apple Color Emoji. Windows 10+: Segoe UI Emoji. Android 9+: Noto Color Emoji. Linux desktops: Noto Color Emoji or fallback. Each is preinstalled and renders colour emoji natively.
- Step 3Pick your strategy — If your design wants OS-native emoji: remove emoji from your custom font (Emoji Remover). If you ship branded chromatic emoji: keep COLR/CPAL tables and add Apple Color Emoji to the fallback for older OSes.
Frequently asked questions
Why do some sites show monochrome emoji?+
Either the site's CSS uses font-feature-settings or text-rendering tricks that defeat OS fallback, or the OS lacks colour emoji (very old Linux distros). The default behaviour on modern devices is colour emoji via OS.
Can I force OS emoji even when my font has emoji?+
Yes — list "Apple Color Emoji", "Segoe UI Emoji" before your custom font in the font-family declaration. The browser tries those first for emoji codepoints. Or just remove emoji from your custom font (cleaner).
What about COLRv1 chromatic glyphs in my brand font?+
If your brand font ships chromatic emoji you want users to see, don't remove them. Use Colour Table Remover only if you specifically want to strip chromatic data. Most teams keep COLR/CPAL for branded emoji.
Privacy first
Every JAD Font tool runs entirely in your browser using opentype.js and the wawoff2 WASM Brotli encoder. Your fonts never leave your device — verified by zero outbound network requests during processing.