Usar fuentes variables

Las fuentes variables son una tecnología de fuentes avanzada que permite que un solo archivo de fuente contenga múltiples estilos y variaciones, como diferentes grosores, anchos y tamaños ópticos. A diferencia de las fuentes tradicionales, que requieren archivos separados para cada estilo (por ejemplo, negrita, cursiva, condensada), una fuente variable puede ajustar estas características dinámicamente dentro de un solo archivo.

Las fuentes variables tienen varias ventajas sobre las fuentes tradicionales:

• Control: Con las fuentes tradicionales, estás limitado a características predeterminadas. Por ejemplo, es posible que tengas que elegir entre un grosor de 400 o 600. Con las fuentes variables tienes un control total, lo que te permite elegir un grosor de 475 si es lo mejor para tu diseño.
• Rendimiento: Al usar un solo archivo de fuente que incluye todas las variaciones, las fuentes variables pueden reducir el número de solicitudes HTTP y el tamaño total del archivo necesario para cargar diferentes estilos de fuente, lo que mejora el rendimiento del sitio web.
• Tipografía adaptable: Las fuentes variables permiten ajustes dinámicos a la tipografía basados en el tamaño de la pantalla, la resolución o las preferencias del usuario. Por ejemplo, una fuente podría volverse más condensada en pantallas más pequeñas para ahorrar espacio o aumentar el contraste en tamaños más pequeños para una mejor legibilidad.
• Integración CSS: Las fuentes variables se pueden controlar mediante CSS. Las propiedades como `font-weight`, `font-stretch` y `font-style` se pueden ajustar con valores más allá del conjunto fijo habitual, lo que proporciona un control más granular. Esto también significa que puedes agregar animaciones a las fuentes variables.

Añadir fuentes variables

Antes de usar fuentes variables, debes importarlas usando el administrador de WP. 

Nota: Las fuentes variables tienen varias variables que puedes usar para ajustarlas. El ancho y el grosor son los dos más utilizados y estos dos son compatibles con Elementor.  

Para añadir una fuente variable:

1. Localiza una fuente variable que te gustaría usar y descárgala a tu PC. Es posible que debas descomprimir el archivo.
   Las fuentes variables están disponibles en varios proveedores, incluido Google Fonts. En Google Fonts puedes verificar el grosor y el ancho mínimo y máximo haciendo clic en Type Tester y usando los controles deslizantes para determinar los valores mínimo y máximo.
   
   Registra el grosor y el ancho mínimo y máximo de la fuente. Lo necesitarás más tarde.
   
2. Ve al administrador de WP y navega a Elementor>Fuentes personalizadas.
   Aparece la pantalla de Fuentes personalizadas.
   
3. Haz clic en Añadir nuevo.
   
4. Haz clic en Añadir fuente variable.
   Aparece la pantalla de carga.
   
5. Haz clic en Cargar y navega a la ubicación del archivo de fuente.
   
6. Selecciona el archivo de fuente variable y, en la parte inferior derecha, haz clic en Seleccionar archivo ttf.
   
7. En el cuadro de texto Introducir familia de fuentes, dale un nombre a la fuente.
   
8. Marca Ancho e introduce el ancho mínimo y máximo de tu fuente. Esta información está disponible en el creador de la fuente.
9. Marca Grosor e introduce el grosor mínimo y máximo de tu fuente. Esta información está disponible en el creador de la fuente.
   
   Note

   Debes establecer un grosor y/o ancho mínimo y máximo para que la fuente se comporte correctamente. No todas las fuentes contienen tanto la variable de ancho como la de grosor. En estos casos, simplemente marca la variable relevante.
   
   
10. Haz clic en Publicar/Actualizar.
    Ahora puedes usar esta fuente en el editor de Elementor.

Usar fuentes variables en el editor de Elementor

Una vez que hayas instalado las fuentes variables, puedes usarlas en cualquier widget que tenga una opción de tipografía. En el ejemplo siguiente, usaremos una fuente variable en el widget de encabezado.

Para usar fuentes variables en un widget:

1. Arrastra un widget que tenga texto al lienzo.
   
2. En el panel, selecciona la opción Tipografía. Esta opción generalmente se encuentra en la pestaña Estilo.
3. Haz clic en el icono de lápiz .
   Aparece una lista de fuentes y opciones de fuente.
   
4. Selecciona una fuente variable. Estas fuentes se encuentran en la parte superior de la lista de fuentes en una sección etiquetada como Fuentes variables.
   
5. Usa los controles deslizantes de Ancho y/o Grosor para determinar la apariencia de la fuente.
   Tu texto ahora aparece exactamente como lo deseas.