Qué es el carácter tofu (Tofu)
Este artículo se lee en unos 4 minutos.
Cuando aparece un □ en pantalla de repente, se trata del llamado «carácter tofu» - la forma en que se muestra un carácter que la fuente no soporta.Cuando la pantalla se llena de □ o ⌷, parece un bug, pero en realidad el motor de renderizado está comunicando honestamente «no tengo este carácter». Es un fenómeno frecuente con emojis y caracteres decorativos; conocer las soluciones permite tomar decisiones de diseño y UI más racionales.
Definición
El carácter tofu es el cuadrado en blanco o la figura de marcador de posición que se dibuja como sustituto cuando la fuente no posee el glifo correspondiente a un punto de código Unicode. Técnicamente es el nombre coloquial del «.notdef glyph» (glifo no definido) en las especificaciones Unicode y OpenType.
El apodo «tofu» se popularizó entre desarrolladores web y tipógrafos porque su aspecto recuerda a un bloque blanco de tofu. Google bautizó su familia tipográfica diseñada para cubrir todos los caracteres del mundo como «Noto» (No Tofu = eliminar el tofu), en referencia a este término.
Causas del carácter tofu
1. La fuente no tiene el carácter
La causa más típica. Cuando la fuente especificada en el CSS de la página web no posee el glifo para un punto de código Unicode concreto, el navegador prueba las fuentes de respaldo en orden; si ninguna tiene el glifo, muestra el tofu.
2. La fuente del sistema es antigua
Los emojis más recientes (como los de Unicode 14.0 en adelante) no están incluidos en las fuentes del sistema de versiones antiguas del SO. En Android 8 o anterior, iOS 12 o anterior y Windows 10 (antes de cierta fecha) los emojis más nuevos pueden aparecer como tofu.
3. Fallo de respaldo por no especificar fuentes
Si en el CSS solo se indica un font-family sin un respaldo genérico (como sans-serif), el SO puede no ser capaz de deducir una fuente adecuada y mostrar tofu.
4. Caracteres decorativos (áreas extendidas de Unicode)
Los caracteres decorativos habituales en el arte con emojis, como 𓆩 𓆪 𖣘 ৎ, se encuentran en el Plano Suplementario Multilingüe o en el Área de Uso Privado (PUA) de Unicode, zonas que las fuentes estándar rara vez cubren. Son los que más fácilmente se convierten en tofu en dispositivos antiguos.
Variantes visuales del tofu
| Visualización | Entorno | Significado |
|---|---|---|
| □ | La mayoría de SO | Glifo .notdef estándar |
| ⌷ | Algunas fuentes | Visualización alternativa de no definido |
| ? | Dispositivos antiguos | Signo de interrogación |
| U+1F33B (hex) | Vista de depuración | Muestra el punto de código como texto |
Soluciones
1. Asegurar la cobertura con fuentes web
Distribuir Noto Color Emoji de Google Fonts o Twemoji como fuente web permite mostrar emojis sin depender de la fuente del dispositivo del usuario. Es la práctica estándar cuando la marca necesita mantener coherencia visual.
2. Optimizar la pila de fuentes
Especificar varias fuentes en orden en el CSS para que los caracteres no soportados se complementen con la siguiente fuente.
font-family: "Hiragino Sans", "Yu Gothic", "Noto Color Emoji", sans-serif;3. Elegir caracteres con alta compatibilidad
En el arte con emojis, antes de usar caracteres decorativos conviene plantearse «¿puedo sustituirlos por símbolos ampliamente soportados (⌒ ⊹ ✧ ☆)?». Si realmente se necesitan decoraciones elaboradas, hay que verificar previamente que se muestren en los dispositivos del público objetivo.
4. Alternativa con texto
Si la probabilidad de tofu es alta, se puede usar JavaScript para detectar caracteres no soportados y reemplazarlos por imágenes o texto alternativo. El coste de implementación es mayor, pero resulta útil al incrustar comentarios de redes sociales en la web.
Comportamiento en la práctica
- Android antiguo: los caracteres decorativos 𓆩 𖣘 se convierten fácilmente en tofu
- Windows antiguo: los emojis en general aparecen en monocromo o como tofu
- Algunas distribuciones Linux: la fuente por defecto no soporta emojis y se produce tofu
- iOS antiguo: los emojis más recientes (Unicode 15.0 en adelante) pueden aparecer como tofu
Errores comunes
- ❌ «El tofu es un bug» → ✅ Es una señal normal de «no soportado»
- ❌ «Cambiar de fuente lo soluciona» → ✅ La nueva fuente también necesita tener ese glifo
- ❌ «Con una fuente web se ve en todos los dispositivos» → ✅ Algunos navegadores pueden fallar al descargarla
Términos relacionados
- Emoji - el ejemplo más representativo de lo que se convierte en tofu en dispositivos antiguos
- Unicode - la base conceptual del «punto de código no soportado» que indica el tofu
- Arte con emojis - el escenario donde hay que tener en cuenta el riesgo de tofu al usar caracteres decorativos