Fuentes árabes para web: 12 fuentes probadas (2026)

Para la mayoría de interfaces web, la mejor fuente árabe es IBM Plex Sans Arabic o Noto Sans Arabic: las dos se leen bien a 14px, sus números se alinean en las columnas de una tabla y ambas traen un alfabeto latino a juego. Elige Cairo o Almarai si quieres un estilo más suave, Noto Kufi Arabic o El Messiri para títulos, y Amiri solo para textos largos. Las 12 fuentes de esta guía son gratuitas en Google Fonts con licencia SIL Open Font License, y todas se cargan en Next.js con next/font.

No copiamos esta lista de otro ranking. Compusimos la misma tarjeta de dashboard en árabe (un título, dos indicadores, una tabla, un párrafo y dos botones) con cada fuente, la capturamos en Chrome 156, medimos los números, el interlineado y el peso de los archivos, y montamos la configuración de Next.js que verás abajo sobre Next.js 16.4.5. Revisado en noviembre de 2026.

Cómo probamos las fuentes

Cada fuente tuvo la misma tarea: una tarjeta de dashboard oscura en árabe, de derecha a izquierda, de 560px de ancho. Lleva un título de 20px, una cifra de ingresos de 30px con números latinos, una segunda cifra con números arábigo-índicos (٠١٢٣), una tabla de pedidos de dos filas a 14px, un párrafo de 15px con «Next.js API» en mitad de la frase árabe, y dos botones. Cada fuente se cargó desde Google Fonts con tres pesos (regular, medio y negrita, o los más cercanos que tenga), con el interlineado fijado de forma explícita para poder comparar las tarjetas.

Después medimos tres cosas en el mismo navegador:

• Los números: si «1111» y «0000» ocupan el mismo ancho, con y sin font-variant-numeric: tabular-nums, en números latinos y arábigo-índicos.
• El interlineado por defecto: la altura de una línea en árabe con line-height: normal, como múltiplo del tamaño de fuente.
• El peso: el archivo woff2 que Google Fonts envía a Chrome para el subconjunto árabe en peso 400, y el ancho de la misma frase árabe al mismo tamaño.

Las licencias, pesos y ejes salen de los datos del catálogo de Google Fonts y del archivo de licencia de cada fuente en el repositorio google/fonts, consultados el 5 de noviembre de 2026.

Fuentes árabes para web: la comparativa

Las 12 son gratuitas para uso comercial con SIL Open Font License 1.1 y admiten latín además de árabe. «Se alinean» quiere decir que, en una columna de precios con números latinos, cada número ocupa el mismo ancho.

Fuente	Ideal para	Pesos	Variable	Archivo árabe, peso 400	Números latinos alineados
IBM Plex Sans Arabic	Dashboards, interfaces densas	7 (100 a 700)	No	32,7 KB	Sí, por defecto
Noto Sans Arabic	Dashboards, texto corrido	100 a 900	Sí (peso, ancho)	47,8 KB	Sí, por defecto
Cairo	Títulos, interfaces cercanas	200 a 1000	Sí (peso, inclinación)	13,1 KB	Sí, por defecto
Tajawal	Páginas de marketing ligeras	7 (200 a 900, sin 600)	No	8,7 KB	No
Almarai	Títulos, interfaces simples	4 (300, 400, 700, 800)	No	17,8 KB	No
Readex Pro	Texto fácil de leer	160 a 700	Sí (peso, HEXP)	9,6 KB	No
Rubik	Marcas con esquinas redondeadas	300 a 900, con cursivas	Sí	17,0 KB	Con tabular-nums
Alexandria	Títulos con presencia	100 a 900	Sí	12,1 KB	Con tabular-nums
Vazirmatn	Interfaces, también persa	100 a 900	Sí	20,6 KB	Sí, por defecto
El Messiri	Títulos	400 a 700	Sí	11,8 KB	No
Noto Kufi Arabic	Títulos, textos grandes	100 a 900	Sí	42,8 KB	Sí, por defecto
Amiri	Solo lectura larga	400 y 700, con cursivas	No	105,9 KB	Sí, por defecto

Los tamaños son de un solo peso. Cada peso estático extra es otro archivo de tamaño parecido, mientras que una fuente variable es un único archivo más grande que cubre todo el rango.

Las 12 mejores fuentes árabes para interfaces web

Las cuatro primeras, en la misma tarjeta:

1. IBM Plex Sans Arabic

Para: dashboards, paneles de administración, tablas y formularios. Fue la más estrecha de las sans serif de la prueba: la misma frase quedó un 20 % más estrecha que en Alexandria, así que una celda de tabla admite más texto antes de saltar de línea. Se lee bien en filas de tabla a 14px, y su interlineado por defecto (1,5) se parece al de una fuente de interfaz latina.

Pesos: 7 pesos estáticos, de 100 a 700. No es variable, así que pide solo los pesos que uses. Latín: incluye el latín de IBM Plex Sans y combina con IBM Plex Sans o Inter. Números: los latinos son tabulares por defecto; los arábigo-índicos son proporcionales, incluso con tabular-nums.

2. Noto Sans Arabic

Para: dashboards y texto corrido. Es el árabe sin contraste de Google, parte de la colección Noto, que busca cubrir todos los sistemas de escritura, así que las páginas que mezclan idiomas mantienen la coherencia.

Pesos: variable, de 100 a 900, con un eje de ancho de 62,5 a 100. Latín: combina con Noto Sans, Inter o DM Sans. Números: latinos y arábigo-índicos tabulares por defecto; entre las sans serif, solo Noto Kufi Arabic hace lo mismo. Ojo con su interlineado por defecto: 2,11, el más alto de las 12, así que fija siempre el tuyo.

3. Cairo

Para: títulos, landing pages e interfaces cercanas. Mohamed Gaber la creó ampliando al árabe la familia latina Titillium Web, con un estilo inspirado en el cúfico y ascendentes y descendentes cortos. Los pesos finos sirven para texto y los gruesos para titulares.

Pesos: variable, de 200 a 1000, más un eje de inclinación (-11 a 11). Latín: su latín es Titillium Web, úsala con ella o sola. Números: latinos tabulares por defecto, arábigo-índicos proporcionales.

4. Tajawal

Para: páginas de marketing ligeras y etiquetas cortas. Un diseño geométrico de bajo contraste firmado por Boutros, y el archivo árabe más pequeño de la prueba (8,7 KB en peso 400).

Pesos: 7 pesos estáticos: 200, 300, 400, 500, 700, 800 y 900. No hay 600, así que font-semibold cae en un peso vecino. Latín: su propio latín geométrico, pensado para convivir con otras fuentes latinas. Números: siempre proporcionales, en los dos alfabetos. Evítala en columnas de cifras.

Las cuatro siguientes:

5. Almarai

Para: títulos e interfaces simples y aireadas. Boutros la dibujó para leer en pantalla, con bajo contraste y aberturas amplias. Nuestra SaaS Template la usa para los títulos en árabe.

Pesos: 4 pesos estáticos: 300, 400, 700 y 800. No hay peso medio, así que construye la jerarquía con regular y negrita. Latín: su propio latín sans serif. Números: siempre proporcionales. Su interlineado por defecto es el más justo de las 12 (1,11): los signos diacríticos pueden tocar la línea de arriba si no lo fijas.

6. Readex Pro

Para: texto donde importa la facilidad de lectura, como la ayuda o el onboarding. Nadine Chahine y Thomas Jockin la diseñaron con el método de Lexend, la familia latina creada para reducir el ruido visual.

Pesos: variable, de 160 a 700, más un eje HEXP que ensancha las letras. Latín: Lexend es su pareja natural. Números: siempre proporcionales, mantenla fuera de las tablas de datos.

7. Rubik

Para: marcas que quieren las esquinas ligeramente redondeadas de Rubik en los dos idiomas. Una sola familia cubre latín, árabe, hebreo y cirílico.

Pesos: variable, de 300 a 900, con cursivas. Latín: integrado, una familia basta para los dos alfabetos. Números: latinos proporcionales por defecto, tabulares con font-variant-numeric: tabular-nums. Los arábigo-índicos siguen proporcionales.

8. Alexandria

Para: títulos con presencia y textos de hero. Es la compañera árabe de Montserrat y la fuente más ancha de la prueba: ideal en tamaño grande, costosa en espacio dentro de una tabla.

Pesos: variable, de 100 a 900. Latín: combínala con Montserrat. Números: latinos tabulares con tabular-nums, arábigo-índicos proporcionales.

Las cuatro últimas:

9. Vazirmatn

Para: interfaces de aplicaciones, sobre todo si el producto también sirve a lectores de persa. Nació en 2015 con el nombre Vazir como fuente persa y árabe para la web y las aplicaciones.

Pesos: variable, de 100 a 900. Latín: su latín es Roboto, así que combina con Roboto. Números: latinos tabulares por defecto, arábigo-índicos tabulares con tabular-nums.

10. El Messiri

Para: títulos con carácter. Su árabe es curvo, inspirado en el naskh trazado con pincel, y da calidez a una página en tamaño grande.

Pesos: variable, de 400 a 700. Latín: su latín y su cirílico vienen de Philosopher. Números: siempre proporcionales, y su siete y su ocho arábigo-índicos tienen formas redondeadas de U y de ∩: pruébala con tus precios reales antes de usarla cerca de cifras.

11. Noto Kufi Arabic

Para: títulos y textos grandes. Google la describe como un cúfico simplificado pensado sobre todo para tamaños grandes, y combina de forma natural con Noto Sans Arabic para el texto.

Pesos: variable, de 100 a 900. Latín: combina con Noto Sans o Inter. Números: latinos y arábigo-índicos tabulares por defecto, como Noto Sans Arabic.

12. Amiri

Para: solo lectura larga: artículos, documentación, páginas legales, textos literarios o religiosos. Es un naskh clásico que recupera los tipos de la imprenta de Bulaq, en El Cairo, de principios del siglo XX. En tamaños pequeños de interfaz se ve apretada, como muestran la tabla y los botones de la tarjeta.

Pesos: 400 y 700, con cursivas. Latín: tiene un latín con serifas, combínala con una serif latina. Números: los dos juegos son tabulares por defecto. Dos avisos: se ve más pequeña que las sans serif (la misma frase quedó un 12 % más estrecha que en IBM Plex Sans Arabic), así que súbela unos 2px, y su archivo árabe es el más pesado de la lista, 105,9 KB por peso.

¿Qué fuentes árabes tienen números tabulares?

En un dashboard, revisa los números antes que nada. Una columna de precios solo se alinea si cada número ocupa el mismo ancho. Seis de las 12 fuentes lo hacen por defecto con números latinos, dos lo hacen con font-variant-numeric: tabular-nums y cuatro nunca.

• Números latinos tabulares por defecto: IBM Plex Sans Arabic, Noto Sans Arabic, Cairo, Vazirmatn, Noto Kufi Arabic, Amiri.
• Tabulares con tabular-nums: Rubik, Alexandria.
• Siempre proporcionales: Tajawal, Almarai, Readex Pro, El Messiri. En la imagen, su «1,111.00» es claramente más corto que «8,888.00».
• Números arábigo-índicos tabulares: Noto Sans Arabic, Noto Kufi Arabic y Amiri por defecto, Vazirmatn con tabular-nums.

Añade tabular-nums (la clase tabular-nums de Tailwind) a cada celda, indicador y precio de todas formas. No cuesta nada en las fuentes que ya son tabulares y arregla Rubik y Alexandria.

Qué números mostrar es otra decisión. Muchos productos en árabe usan números latinos (0 a 9) en todas partes, mientras que las configuraciones regionales de Arabia Saudí y Egipto usan por defecto los arábigo-índicos (٠ a ٩). Lo decide la configuración regional cuando formateas con Intl.NumberFormat: en Chrome 156 y Node.js 24, "ar" y "ar-AE" dan 1,248.5, "ar-SA" y "ar-EG" dan ١٬٢٤٨٫٥, y "ar-DZ" da 1.248,5. Añade -u-nu-latn ("ar-SA-u-nu-latn") para forzar números latinos.

Cómo cargar una fuente árabe en Next.js con next/font

Carga una fuente por alfabeto, da a cada una una variable CSS y cambia de fuente según el idioma en CSS. next/font/google descarga los archivos durante el build y los sirve desde tu propio dominio, así que el navegador no hace ninguna petición a Google. Montamos el código siguiente sobre Next.js 16.4.5 y revisamos el HTML y el CSS que genera.

// app/fonts.ts
import { Inter, IBM_Plex_Sans_Arabic } from "next/font/google";

// Latin: a variable font, so no weight list is needed.
export const inter = Inter({
  subsets: ["latin"],
  display: "swap",
  variable: "--font-latin",
});

// Arabic: a static font, so list only the weights the UI uses.
export const plexArabic = IBM_Plex_Sans_Arabic({
  subsets: ["arabic"],
  weight: ["400", "500", "700"],
  display: "swap",
  variable: "--font-arabic",
  preload: false,
});

// app/[locale]/layout.tsx
import { inter, plexArabic } from "../fonts";
import "../globals.css";

export default async function LocaleLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  return (
    <html
      lang={locale}
      dir={locale === "ar" ? "rtl" : "ltr"}
      className={`${inter.variable} ${plexArabic.variable}`}
    >
      <body>{children}</body>
    </html>
  );
}

/* app/globals.css */
html {
  font-family: var(--font-latin), system-ui, sans-serif;
}

/* Arabic first, Latin second: Latin words inside Arabic text use Inter */
html[lang="ar"] {
  font-family: var(--font-arabic), var(--font-latin), system-ui, sans-serif;
}

Qué hace cada opción y qué vimos en el build:

• subsets: ["arabic"]: indica el subconjunto que se precarga. El CSS generado incluye igualmente los demás subconjuntos, cada uno tras un unicode-range, así que el navegador solo descarga un archivo si la página tiene caracteres de ese rango.
• weight: obligatorio en fuentes estáticas como IBM Plex Sans Arabic, Tajawal, Almarai y Amiri. Las variables (Noto Sans Arabic, Cairo, Alexandria y el resto) no lo necesitan: un archivo cubre todo el rango.
• display: "swap": es el valor por defecto en next/font; lo escribimos para que se vea. El texto aparece enseguida con una fuente de respaldo y luego cambia.
• variable: crea --font-arabic, que usas en CSS o en el @theme de Tailwind.
• preload: false: con el valor por defecto (true), nuestra página en inglés precargaba 4 archivos de fuente, 3 de ellos los pesos árabes, unos 101 KB que un lector en inglés no usa. Con preload: false en la fuente árabe, las dos páginas precargan solo Inter, y las páginas en árabe siguen cargando los archivos árabes en cuanto aparece texto árabe. Deja el valor por defecto si la mayoría de tus visitas leen en árabe.

Variable no siempre significa más ligera. Los tres pesos estáticos de IBM Plex Sans Arabic sumaron unos 101 KB, mientras que el único archivo variable de Noto Sans Arabic (subconjunto árabe, solo eje de peso) pesó 162 KB. Una fuente variable compensa a partir de cuatro pesos, o si animas el peso.

next/font también escribe una fuente de respaldo basada en Arial con métricas ajustadas (para IBM Plex Sans Arabic, size-adjust: 101.17%), para que el diseño no salte cuando llega la fuente real. Si prefieres alojar tú los archivos, next/font/local recibe una ruta src y una lista declarations para el unicode-range; así lo hacen nuestras plantillas de inmobiliaria, alquiler vacacional y venta de entradas, cuyo build no necesita red.

Para el diseño de derecha a izquierda en sí (propiedades lógicas, la variante rtl:, lo que no debe invertirse), consulta la guía RTL de Tailwind CSS.

Interlineado, espaciado entre letras y tamaño de fuente en árabe

Fija un interlineado explícito, deja el espaciado entre letras en 0 y no reduzcas el árabe por debajo del tamaño que usas en inglés. Estas son las razones, con números de la prueba.

Interlineado

line-height: normal significa «lo que diga el archivo de la fuente», y las fuentes árabes no se ponen de acuerdo. Medida en Chrome a 100px, una línea en árabe ocupaba:

• 1,11 en Almarai, 1,18 en Rubik, 1,20 en Tajawal, 1,22 en Alexandria y 1,25 en Readex Pro
• 1,50 en IBM Plex Sans Arabic, 1,56 en El Messiri, 1,57 en Vazirmatn y 1,75 en Amiri
• 1,87 en Cairo, 1,90 en Noto Kufi Arabic y 2,11 en Noto Sans Arabic

Pasar de Almarai a Noto Sans Arabic con normal casi duplicaría la altura de cada línea. Con valores explícitos (1,5 en títulos, 1,8 en el párrafo, 1,5 en las filas de la tabla), las 12 tarjetas de la prueba quedaron entre 448px y 460px de alto. Un buen punto de partida: de 1,7 a 1,8 para texto en árabe, de 1,3 a 1,4 para títulos en árabe, y nunca el 1,1 habitual en titulares latinos grandes, porque los signos diacríticos árabes van encima y debajo de las letras y se recortan.

Espaciado entre letras

Déjalo en 0. Las letras árabes van unidas, y MDN advierte de que el espaciado en una escritura ligada puede hacer que el texto parezca roto. Anula cualquier espaciado heredado de los estilos latinos: html[lang="ar"] { letter-spacing: 0; }, o rtl:tracking-normal en Tailwind. El árabe tampoco tiene mayúsculas: un antetítulo en versalitas espaciadas en inglés necesita peso o color para destacar en árabe.

Tamaño de fuente

La misma frase en árabe al mismo tamaño midió 1.479px en IBM Plex Sans Arabic, 1.628px en Noto Sans Arabic, 1.841px en Alexandria y solo 1.297px en Amiri. De ahí salen dos reglas prácticas. Ajusta el tamaño del árabe a ojo, sin copiar el valor del inglés: Amiri y los demás naskh necesitan unos 2px más. Y revisa las columnas de las tablas en árabe tras cambiar de fuente, porque una fuente ancha como Alexandria parte celdas que en inglés cabían. En nuestra tarjeta, el texto de tabla a 14px se leía bien en todas las sans serif; no bajaríamos de ahí en texto de interfaz en árabe.

¿Qué fuentes árabes usan las plantillas de Aniq UI?

Nuestros dashboards se reparten entre IBM Plex Sans Arabic y Noto Sans Arabic, y la mayoría de nuestros sitios usan Noto Sans Arabic. Revisamos las llamadas a next/font y las hojas de estilo en el repositorio de cada plantilla:

Plantilla	Fuente árabe	Fuente latina
Dashboard admin con IA	IBM Plex Sans Arabic	Fuentes del sistema
Dashboard de fitness	IBM Plex Sans Arabic	Inter
Dashboard financiero	Noto Sans Arabic	Inter
LMS (sitio del alumno y admin)	IBM Plex Sans Arabic	Inter
Restaurante (sitio y admin)	IBM Plex Sans Arabic	Inter, Montserrat en títulos
Tienda e-commerce	Zain, IBM Plex Sans Arabic en el hero	Plus Jakarta Sans
Inmobiliaria (sitio y admin)	Noto Sans Arabic, Noto Naskh Arabic en títulos	Manrope, Cormorant Garamond
Alquiler vacacional (sitio y admin)	Noto Sans Arabic	Outfit
Venta de entradas (sitio y admin)	Noto Sans Arabic, Lalezar en títulos	DM Sans, Archivo Black
SaaS Template	Noto Sans Arabic, Almarai en títulos	DM Sans, Clash Display
Landing pages gratuitas	Noto Sans Arabic	Inter
Landing page 3D gratuita	Cairo	Anton

Aquí está IBM Plex Sans Arabic trabajando en el dashboard de la plantilla de restaurante: tarjetas de indicadores, un gráfico, una cola de pedidos y una tabla, con precios y números de pedido latinos dentro del texto árabe.

Y la misma fuente en tamaño de titular en el sitio del restaurante, donde el peso negrita sostiene un hero árabe de tres líneas:

Todas estas demos se pueden pasar al árabe antes de comprar. Los nueve dashboards en árabe están comparados aquí, y si estás creando un sitio de marketing, la guía para diseñar una landing page cubre las secciones y los detalles del árabe.

Preguntas frecuentes

¿Cuál es la mejor fuente árabe para un sitio web?

Para interfaces, IBM Plex Sans Arabic o Noto Sans Arabic: claras en tamaños pequeños, con números latinos tabulares para tablas y latín incluido. Para títulos, Cairo, Almarai o Noto Kufi Arabic. Para artículos largos, Amiri.

¿Las fuentes árabes de Google son gratuitas para uso comercial?

Sí. Las 12 fuentes de esta guía tienen licencia SIL Open Font License 1.1, que permite usarlas e integrarlas en sitios y aplicaciones comerciales. Lo único que prohíbe es vender los archivos de la fuente por separado.

¿Cairo sirve para texto corrido?

En sus pesos finos, sí: sus autores recomiendan los pesos finos para texto y los gruesos para titulares. Para un dashboard denso, IBM Plex Sans Arabic mete más texto por línea.

¿Una sola fuente puede con el inglés y el árabe?

Sí, las 12 incluyen latín. Los resultados más uniformes vienen de las fuentes cuyo latín es una familia latina conocida: IBM Plex Sans Arabic (IBM Plex Sans), Cairo (Titillium Web) y Vazirmatn (Roboto). Aun así, muchos productos combinan la fuente árabe con una latina aparte como Inter, igual que la mayoría de nuestras plantillas.

¿Números arábigo-índicos o latinos?

Los dos son correctos; elige uno para todo el producto y formatea con Intl.NumberFormat. Si usas números arábigo-índicos en tablas, elige Noto Sans Arabic, Noto Kufi Arabic, Amiri o Vazirmatn, las fuentes en las que esos números se alinean.

¿Funciona el letter-spacing en árabe?

No. Las letras árabes se unen, y separarlas rompe las uniones. Deja letter-spacing: 0 en el texto árabe y usa peso, tamaño o color para destacar.

Conclusión

Empieza con IBM Plex Sans Arabic para un dashboard y con Noto Sans Arabic para un sitio que mezcla muchos alfabetos. Añade una fuente de títulos si la marca lo pide. Después, tres cosas en el código: tabular-nums en cada cifra, un interlineado explícito y letter-spacing: 0 para el árabe. Carga cada alfabeto con next/font, cambia de fuente bajo html[lang="ar"] y desactiva la precarga del alfabeto que lee menos gente.

Plantillas listas para árabe, con las fuentes configuradas

Cada plantilla de pago de Aniq UI viene en inglés y árabe con un diseño de derecha a izquierda real, demos que puedes pasar al árabe y la carga de fuentes descrita arriba. Precios en un solo pago, con el código fuente:

• Sitios web y tiendas (restaurante, inmobiliaria, LMS, e-commerce, alquiler vacacional, venta de entradas): $39.
• Landing pages (SaaS y empresa): $39.
• Dashboards de administración: $49. El dashboard admin con IA y el de fitness cuestan $69.
• Full stack (sitio, dashboard y API juntos): $149.
• Las 10 plantillas: el pack, precio de lista $499. Consulta la página para ver la oferta actual.

Ver las plantillas o comparar los dashboards árabes RTL.

Guías relacionadas

• Guía RTL de Tailwind CSS: propiedades lógicas y la variante rtl:
• Plantillas de dashboard en árabe RTL para Next.js: 9 de Aniq UI
• Cómo diseñar una landing page: pasos y plantillas listas
• Cómo lanzar un sitio web SaaS en inglés y árabe con Next.js

Fuentes

• Next.js: referencia del módulo de fuentes next/font
• Google Fonts: fuentes con soporte para árabe
• Repositorio google/fonts: archivos de licencia y descripciones
• SIL Open Font License 1.1
• IBM Plex Sans Arabic, Noto Sans Arabic, Cairo, Tajawal, Almarai, Readex Pro
• Rubik, Alexandria, Vazirmatn, El Messiri, Noto Kufi Arabic, Amiri
• MDN: font-variant-numeric
• MDN: letter-spacing
• MDN: Intl.NumberFormat

Revisado en noviembre de 2026.