El uso de tipografías personalizadas en Webflow permite mejorar la identidad visual de un sitio web y hacerlo más atractivo. Aunque Webflow ofrece una gran selección de fuentes de Google Fonts, también permite subir tipografías personalizadas en formatos como WOFF, TTF y OTF.
En esta guía, te explicaremos cómo agregar y usar fuentes personalizadas en Webflow de manera sencilla.
1. ¿Qué opciones de tipografía tiene Webflow?
Webflow permite usar diferentes tipos de fuentes en un proyecto:
- Google Fonts (disponibles de manera predeterminada en Webflow).
- Adobe Fonts (Typekit) (requiere integración con una cuenta de Adobe).
- Fuentes personalizadas (subiendo archivos propios en formato WOFF, WOFF2, TTF o OTF).
Si se necesita una tipografía que no está en Google Fonts ni en Adobe Fonts, se debe subir manualmente el archivo de fuente.
2. Cómo subir una fuente personalizada en Webflow
Para subir una tipografía personalizada en Webflow, sigue estos pasos:
Paso 1: Descarga el archivo de la fuente
Asegúrate de contar con los archivos en los formatos WOFF o WOFF2, ya que son los más optimizados para web. Aunque Webflow acepta TTF y OTF, estos formatos pueden no ser la mejor opción para rendimiento y compatibilidad.
Si el archivo está en otro formato, se puede convertir con herramientas como:
Paso 2: ¿Cómo subir una fuente personalizada a Webflow?
- Abre Webflow y accede al panel de configuración del proyecto (Project Settings).
- Dirígete a la pestaña Fonts.
- En la sección Custom Fonts, haz clic en el botón Upload.
- Selecciona los archivos de la tipografía desde tu ordenador.
- Una vez cargada, Webflow aplicará automáticamente la fuente a tu proyecto.
3. ¿Cómo usar una fuente personalizada en Webflow?
Una vez que la tipografía ha sido cargada, se puede aplicar a elementos específicos del diseño.
Método 1: Usando el panel de estilos
- Abre el Designer de Webflow.
- Selecciona el elemento al que quieres aplicar la fuente (por ejemplo, un encabezado o un párrafo).
- En el panel de estilos (Style Panel), busca la sección Typography.
- En el desplegable de fuentes, busca la tipografía personalizada y selecciónala.
Método 2: Usando clases globales
Si deseas usar la tipografía en todo el sitio de manera consistente, aplica la fuente a las etiquetas globales:
- Dirígete al Style Panel.
- Selecciona la etiqueta global en la pestaña Selector (por ejemplo,
Body (All Pages)). - Aplica la fuente personalizada en la sección Typography.
- Esto asegurará que todos los textos hereden la fuente de manera automática.
4. ¿Cómo cargar fuentes desde un servidor externo en Webflow?
Otra opción es cargar la fuente desde un servidor externo usando CSS personalizado. Este método es útil si la tipografía está alojada en otro dominio o si se quiere cargar desde Google Fonts manualmente.
Ejemplo de código CSS para usar una fuente externa
@font-face {
font-family: 'MiFuente';
src: url('https://mi-servidor.com/mifuente.woff2') format('woff2'),
url('https://mi-servidor.com/mifuente.woff') format('woff');
font-weight: normal;
font-style: normal;
}Luego, se puede aplicar la fuente usando CSS en Webflow:
body {
font-family: 'MiFuente', sans-serif;
}Para añadir este código en Webflow:
- Ir a Project Settings > Custom Code.
- En la sección Head Code, pegar el código dentro de
<style>...</style>. - Guardar y publicar los cambios.
5. ¿Cómo conseguir el mejor rendimiento de tus fuentes en Webflow?
- Usar solo los estilos necesarios: Evita cargar múltiples variantes de una tipografía si no son necesarias, ya que esto puede afectar al rendimiento del sitio.
- Optimizar archivos: Si es posible, usa WOFF2 en lugar de TTF u OTF para mejorar la velocidad de carga.
- Pruebas de compatibilidad: Verifica que la tipografía se vea correctamente en diferentes dispositivos y navegadores.
Agregar tipografías personalizadas en Webflow es un proceso sencillo y flexible, permitiendo subir fuentes manualmente o integrarlas mediante CSS. Optimizar la carga de fuentes mejora la estética y la velocidad del sitio, contribuyendo a una mejor experiencia de usuario.
Siguiendo estos pasos, es posible implementar cualquier tipografía y garantizar que se vea profesional y coherente en toda la web.
Aunque añadir una tipografía en Webflow puede resultar sencillo, si tu página web no utiliza estilos coherentes a lo largo del diseño, puede que te interese contar con la ayuda de una agencia experta en Webflow, y para aprovechar la adición de tu nueva tipografía para hacer un repaso a tu sistema de diseño y estilos, cosa que podría incrementar la optimización de tu página web.
