Agregar fuentes o tipografías en Divi sin problemas

En este tutorial te mostraré cómo agregar fuentes o tipografías personalizadas a Divi sin problemas, y de paso vamos a solucionar ese error tan molesto que aparece cuando intentas subir un archivo de fuente: "Lo sentimos, este tipo de archivo no está permitido por motivos de seguridad". Es uno de los obstáculos más comunes con los que se topa cualquier persona que está armando su sitio web con Divi y quiere darle una identidad visual propia con tipografías que no vienen incluidas por defecto.

La tipografía es uno de los pilares del diseño web. Por más que tengas una paleta de colores impecable y una estructura limpia, si la fuente no acompaña la personalidad de tu marca, el resultado se siente genérico. Divi incluye cientos de fuentes de Google Fonts listas para usar, y eso cubre la mayoría de los casos, pero llega un momento en que tu cliente te pasa su manual de marca con una tipografía corporativa específica, o tú mismo quieres usar una fuente premium que compraste, y ahí es cuando necesitas saber subirla correctamente.

Por qué WordPress bloquea los archivos de tipografía

Antes de meternos en la solución, quiero que entiendas por qué pasa esto, porque entender el "por qué" te va a ayudar a tomar mejores decisiones en tu sitio. WordPress trae por defecto una lista blanca de tipos de archivo permitidos para subir a la biblioteca de medios. Esa lista incluye imágenes (JPG, PNG, WebP), documentos (PDF, DOCX), audio y video, pero NO incluye los formatos de fuente más comunes como .ttf (TrueType Font) ni .otf (OpenType Font).

Esto no es un error ni un descuido del equipo de WordPress: es una medida de seguridad deliberada. Permitir la carga de cualquier tipo de archivo abre la puerta a que alguien con acceso al panel suba archivos potencialmente peligrosos. Por eso el mensaje habla literalmente de "motivos de seguridad". WordPress prefiere ser conservador y dejar que tú, de forma consciente, amplíes esa lista solo con los formatos que realmente necesitas.

Los dos formatos que vamos a habilitar son los que Divi necesita para cargar tipografías personalizadas. El .ttf es el formato TrueType clásico, compatible prácticamente con todo. El .otf es OpenType, un poco más moderno y con mejor soporte para características tipográficas avanzadas como ligaduras y variantes estilísticas. Si tienes la opción, el .woff y .woff2 son aún más livianos para web, pero Divi acepta perfectamente .ttf y .otf desde su panel de carga de fuentes, así que con habilitar esos dos te alcanza para la inmensa mayoría de los casos.

Consejo: Antes de subir cualquier fuente, asegúrate de tener la licencia para usarla en web. Muchas tipografías premium se venden con licencia de escritorio (desktop) pero requieren una licencia web (webfont) aparte. Usar una fuente sin la licencia correcta puede traerte problemas legales con tu cliente.

Método 1: Con un plugin (el más seguro y recomendado)

Este es el método que explico en el video y el que más recomiendo por ser seguro, limpio y reversible. Para agregar fuentes o tipografías en Divi sin que haya problemas, primero debemos indicarle a WordPress que permita la carga de archivos .ttf o .otf, y eso lo vamos a lograr con un plugin gratuito que se encarga exactamente de esta tarea.

Para agregar el plugin ve a tu panel de WordPress > Plugins > Agregar nuevo, y allí busca el plugin Mime Types Plus:

Al instalar y activar el plugin debemos ir a su configuración. Aquí los pasos son muy simples: solo agrega el tipo de archivo a la lista. En este caso, para las tipografías deberás agregar esta información:

• Extensión: ttf - otf (sin el punto)
• Mime Type: Tipografía o fuente
• Tipo de archivo: document

Le das a "Añadir", ¡y listo! Después de esto, podrás ir al Divi Builder y cargar las tipografías que quieras sin que WordPress te bloquee la subida. La gran ventaja de este método es que queda registrado como un plugin activo: si en algún momento quieres revertir el cambio, simplemente lo desactivas y WordPress vuelve a su configuración por defecto. No tocaste nada del código del sitio, así que es totalmente seguro incluso si no te sientes cómodo trabajando con archivos PHP.

Cómo cargar la fuente en el Divi Builder paso a paso

Una vez habilitada la carga de archivos, el proceso dentro de Divi es muy intuitivo. Abre cualquier módulo que tenga opciones de texto (un módulo de texto, un encabezado, un botón) y ve a la pestaña de Diseño. Busca la sección de fuente del texto y, en el menú desplegable donde eliges la tipografía, vas a ver hasta arriba un botón que dice "Subir" o muestra un ícono de carga. Al hacer clic ahí, Divi te abre la biblioteca de medios para que selecciones tu archivo .ttf o .otf.

Una vez subida, la fuente queda disponible en todo el sitio bajo la categoría "Subido" dentro del selector de tipografías de Divi. Esto significa que no tienes que volver a cargarla cada vez: ya queda registrada globalmente y la puedes asignar a cualquier módulo, o mejor aún, configurarla como fuente predeterminada del cuerpo o de los títulos desde Divi > Opciones del tema > General. Así toda tu web hereda la tipografía sin que tengas que ir módulo por módulo.

Consejo: Sube las variantes que realmente vas a usar (regular, bold, italic) como archivos separados y asígnalas correctamente. Si solo subes la versión "regular" y luego pones un texto en negrita, el navegador va a "fingir" la negrita engrosando los trazos artificialmente, y el resultado se ve sucio. Cargar la variante bold real marca una diferencia enorme en el acabado.

Método 2: Modificando el PHP de WordPress (menos seguro)

En este método resolveremos el mismo problema pero por la vía del código. Quiero ser claro de entrada: este método es el menos recomendado de los dos. Aun así, lo muestro para que tengas una opción adicional, sobre todo si por alguna razón no puedes o no quieres instalar el plugin. Lo vamos a hacer modificando unas pequeñas líneas relacionadas con la configuración de WordPress. Mira cómo lo hacemos.

Paso 1: Haz copia de seguridad de tu WordPress

Como vamos a meter código al sitio, siempre recomiendo que antes hagas una copia de seguridad por si algo sale mal. Esta es una regla que aplico sin excepción en cualquier intervención que toque código: el respaldo es tu red de seguridad. Si tienes un plugin de backups instalado, genera una copia completa antes de continuar; y si trabajas con un buen hosting, lo más probable es que ya tengas copias automáticas, pero nunca está de más asegurarte.

Paso 2: Instala el plugin Code Snippets

Code Snippets te permitirá insertar código PHP en tu sitio web sin necesidad de ir a tocar los archivos base del tema. Con este plugin nos olvidamos de hacer temas hijos o todo ese enredo: simplemente lo instalamos y podemos insertar allí el código con seguridad. La ventaja es enorme, porque si el snippet causa un problema, Code Snippets detecta el error y desactiva el fragmento automáticamente, evitando que tu sitio se caiga por completo (la famosa pantalla blanca de la muerte).

Paso 3: Snippet PHP para agregar fuentes personalizadas

Copia el código de acá abajo y pégalo según los pasos anteriores en Code Snippets. También lo puedes hacer directamente en tu archivo functions.php, solo que si lo pones ahí y actualizas el tema Divi, se perdería. Por eso recomiendo Code Snippets, o en su defecto el functions.php de un child theme, que sí sobrevive las actualizaciones.

//agrega este código en functions.php, subes la fuente y luego eliminas el código
define('ALLOW_UNFILTERED_UPLOADS', true);

Esta constante, ALLOW_UNFILTERED_UPLOADS, le dice a WordPress que permita la subida de cualquier tipo de archivo, sin filtrar. Por eso es el método menos seguro: mientras esté activa, cualquier usuario administrador puede subir cualquier formato, lo cual amplía la superficie de riesgo del sitio. La recomendación clave acá es que actives el snippet, subas tu fuente, y luego lo desactives de inmediato. No lo dejes prendido permanentemente. A diferencia del Método 1, donde el plugin permite solo los formatos específicos que tú definiste, esta constante abre la puerta a todo, así que úsala de forma puntual y vuelve a cerrarla.

¡Y listo! Superfácil, ¿verdad? Con este snippet podrás cargar fuentes personalizadas en Divi sin ningún tipo de problema. Solo recuerda eliminar el código una vez que hayas terminado de subir tus tipografías.

¿Cuál de los dos métodos te conviene?

Si tuviera que recomendarte uno sin pensarlo dos veces, sería el Método 1 con Mime Types Plus. Es más limpio, más seguro y más fácil de mantener en el tiempo. Habilita exactamente los formatos que necesitas, queda documentado como un plugin activo en tu lista, y cualquier persona que herede el mantenimiento del sitio entiende de inmediato qué hace y por qué está ahí. Para entornos de cliente, donde la previsibilidad y la seguridad importan, es la opción profesional.

El Método 2 lo dejaría para situaciones muy puntuales: estás en un sitio donde no quieres sumar otro plugin a la lista, necesitas subir una sola fuente rápidamente y tienes la disciplina de desactivar la constante apenas termines. En manos de alguien que sabe lo que hace, es perfectamente válido. Pero si tienes la menor duda, ve por el plugin. La diferencia de esfuerzo es mínima y el margen de seguridad es mucho mayor.

Hay un punto adicional que vale la pena mencionar: en muchos hostings administrados y entornos corporativos, la constante ALLOW_UNFILTERED_UPLOADS viene deshabilitada a nivel de servidor por seguridad, y simplemente no surte efecto aunque la agregues. Si pruebas el Método 2 y sigue sin dejarte subir la fuente, casi seguro es por esto. En ese caso, el Método 1 con el plugin es tu camino, porque opera a través de los filtros internos de WordPress y no depende de esa constante global.

Casos de uso reales: cuándo vas a necesitar esto

En mi experiencia trabajando con clientes en toda Latinoamérica, la necesidad de subir fuentes personalizadas aparece sobre todo en proyectos de marca. Cuando una empresa ya tiene un manual de identidad visual, casi siempre incluye una tipografía corporativa específica que no está en Google Fonts. El cliente espera que su web respete esa identidad al pie de la letra, y ahí es donde dominar este proceso te hace ver como un profesional que entiende de branding, no solo de armar páginas.

Otro escenario muy común es el de los proyectos editoriales o de portafolio donde la tipografía es protagonista del diseño. Si estás armando el sitio de una agencia creativa, un estudio de diseño o un fotógrafo, lo más probable es que la fuente sea parte central de la propuesta estética. Las tipografías de Google Fonts son excelentes, pero a veces el cliente quiere algo más exclusivo que no se vea en cada segunda web del mercado, y para eso necesitas poder cargar fuentes premium o de fundiciones independientes.

También hay un caso técnico interesante: el rendimiento. Hay quienes prefieren alojar sus fuentes localmente en lugar de cargarlas desde los servidores de Google, ya sea por privacidad (las normativas de protección de datos en algunos países lo exigen) o por velocidad. Subir las fuentes a tu propio servidor mediante este método te da control total sobre cómo y desde dónde se cargan, lo que puede ayudar a mejorar tus métricas de rendimiento y a cumplir con regulaciones de privacidad más estrictas.

🎓 Si quieres dominar Divi a fondo, desde los fundamentos hasta técnicas avanzadas de diseño y personalización, explora los cursos en uxdivi.com/cursos — están pensados para que pases de armar páginas a diseñar sitios con verdadera intención profesional.

Preguntas frecuentes

¿Las fuentes que subo a Divi cargan rápido o ralentizan mi sitio?

Depende del peso del archivo y de cuántas variantes cargues. Una fuente .ttf u .otf puede ser relativamente pesada, así que mi recomendación es subir solo las variantes que realmente vas a usar. Cargar la familia completa con 12 pesos cuando solo necesitas regular y bold es desperdiciar recursos. Si la velocidad es prioridad, considera convertir tus fuentes a formato .woff2, que pesa bastante menos, aunque eso requiere alojarlas vía CSS en lugar del cargador nativo de Divi.

¿Por qué la fuente se ve bien para mí pero un cliente la ve diferente?

Si la fuente cargó correctamente en el servidor, debería verse igual para todos los visitantes, porque ya no depende de que la tengan instalada en su computadora. Si alguien la ve distinta, casi siempre es un problema de caché: tu navegador o un plugin de caché está mostrando una versión vieja de la página. Limpia la caché del sitio y del navegador, y verifica también que asignaste la fuente correctamente en el módulo y no dejaste algún texto con la tipografía por defecto.

¿Puedo usar fuentes variables (variable fonts) en Divi?

El cargador nativo de Divi está pensado para fuentes estáticas (.ttf, .otf con un peso definido). Las fuentes variables, que permiten ajustar el grosor de forma continua, requieren un manejo más avanzado mediante CSS personalizado y la regla @font-face. Es perfectamente posible, pero ya no es un proceso de "subir y listo": entra en terreno de código. Para la mayoría de proyectos, cargar las variantes estáticas que necesitas es más que suficiente.

Subí la fuente pero no aparece en el selector de Divi, ¿qué hago?

Lo primero es verificar que el archivo se subió sin errores a la biblioteca de medios. Si WordPress te bloqueó la subida con el mensaje de seguridad, significa que el método para habilitar el formato no quedó bien aplicado: revisa que el plugin esté activo y configurado, o que el snippet del Método 2 esté funcionando. Si la fuente sí subió pero no la ves en Divi, recarga el constructor por completo y limpia la caché. En la mayoría de los casos, un refresco del builder hace que la fuente aparezca en la categoría "Subido".

Conclusión

Agregar fuentes o tipografías personalizadas en Divi es uno de esos conocimientos que parecen pequeños pero que marcan una diferencia enorme en la calidad final de tus proyectos. Ese error de "tipo de archivo no permitido por motivos de seguridad" frena a muchísima gente, y ahora ya sabes que se resuelve en un par de minutos, ya sea con el plugin Mime Types Plus (la vía segura y recomendada) o modificando la constante de WordPress (la vía rápida pero menos segura).

Lo más valioso de manejar esto es que te abre la puerta a respetar al cien por ciento la identidad visual de cualquier marca que llegue a tus manos. Ya no vas a estar limitado al catálogo de Google Fonts: vas a poder cargar la tipografía exacta que tu cliente necesita, alojarla localmente para mejorar el rendimiento o cumplir normativas de privacidad, y entregar un sitio que se ve y se siente profesional desde el primer detalle.

Si te resultó útil este tutorial, compártelo con tu comunidad de diseñadores web y déjame un comentario aquí abajo contándome qué tipografías sueles usar en tus proyectos. Y si quieres seguir profundizando en todo lo que Divi puede hacer por ti, te invito a darte una vuelta por nuestros cursos.

🎓 ¿Listo para llevar tus diseños con Divi al siguiente nivel? En uxdivi.com/planes tienes acceso a cursos completos y recursos premium que te enseñan a sacarle el máximo provecho a cada herramienta del constructor.