Cómo usar fuentes variables en un sitio web de WordPress

Seamos honestos. Si usa una sola fuente en su sitio, sin variaciones de peso, altura o espacio, las personas se aburrirán. No leerán tus cosas. Por lo tanto, debe usar fuentes variables en su sitio. Incluso si elige usar solo una fuente, puede cambiarla lo suficiente a través del CSS para convertirse en una multitud de opciones de fuentes. ¿Qué es una fuente variable? Las fuentes variables son fuentes únicas que pueden ser modificadas por CSS de acuerdo con 5 criterios o ejes diferentes. Cada eje controla una cierta faceta de la apariencia de fuente y tiene una etiqueta CSS adecuada.
Peso (wght en CSS)
Inclinación (SLNT en CSS)
Cursivo (Ital en CSS)
Tamaño óptico (OPSZ en CSS)
Ancho (wght en CSS)
Y luego está el grado de pseudo eje, representado por grado en CSS. Desearía poder decirte qué grados se escriben en mayúsculas cuando se usan en tus hojas de estilo … pero no puedo. Es lo que es. Además, las diferentes compañías pueden introducir (y son) nuevos ejes a medida que se desarrolla la tecnología. Por lo tanto, podremos hacer mucho con ellos en el futuro. Cuando combina todos esos ejes diferentes, puede hacer que cualquier tipo de patrón haga lo que quiera hacer, incluso animarlos como SVG. (Recuerde, esto también incluye fuentes de iconos como la nuestra).
¿Por qué usar fuentes variables? La respuesta corta es que son mucho más eficientes que incorporar y hacer más fuentes en su sitio. Se resume la documentación de Google: las fuentes variables de OpenType nos permiten almacenar más variantes de una familia de tipos en un solo archivo de fuentes. Monotype realizó un experimento combinando 12 fuentes de entrada para generar ocho pesos, en tres anchos, tanto en el estilo cursiva y romana. El almacenamiento de 48 fuentes individuales en un solo archivo de fuentes variables significó un descuento del 88% en el tamaño del archivo. (su énfasis) El uso de fuentes variables en WordPress, así que ahora, cuando sabemos que las fuentes variables son bastante fantásticas, el siguiente paso es su incorporación en nuestro flujo de trabajo y en los sitios de WordPress. Paso 1 Lo primero que debe hacer es instalar la fuente en su sitio web. Puede usar un complemento como usar cualquier fuente, cargarla directamente a través de la interfaz Divi si es miembro de ET, conectarlo usando @ Font-Facility o renunciar completamente a complementos y temas y hacerlo de una manera antigua.
No importa cómo lo haga, una vez que lo tenga en su sitio, el uso de fuente es realmente bastante fácil. Para hacer esto, cargué la fuente de gingham gratis a través de la división porque esto usa. El resultado final es el mismo.

Paso 2 Debido a que las fuentes variables se basan en CSS, querrá ir a donde haya agregado el CSS personalizado. Esto podría estar en un archivo Custom.css, un stylesheet.css, en el CSS adicional de su personalizador de WordPress o incluso en la parte inferior de la pestaña general del tema de la división (la mayoría de los temas también tienen un cuadro similar). Ingresará este código (con el nombre de las fuentes variables que usa). @Font -Face {Font -Family: ‘Gingham’;
SRC: URL (‘Gingham.wof2’) formato (‘WOF2’),
} Se verá así en la ventana CSS.
Todo esto no le permite usar la fuente en su sitio web.
El paso 3 ahora es el momento de estilizarlo de alguna manera. Puede hacer lo que quiera con él, y el estilo se puede aplicar a cualquier clase o identificación. Como puede ver, se aplica a cualquier div .et_pb_text. Puede aplicarlo por todo el cuerpo o H1, H2, H3 o incluso su elección. Después de todo, estas son fuentes variables. Hay dos formas en que puedes abordar esto. El primero es una sola línea CSS efectiva que utiliza configuraciones de variación de fuentes. H3 {

Font-Family: ‘Gingham’, Helvetica, Sans-Serif;


Tamaño de fuente: 35px;
Font-Variation-Settings: ‘Wght’ 700, ‘WDTH’ 75;
} Puede agregarlos con otros CSS, al igual que el flotador o un eje o cualquier otra cosa.
Alternativamente, puede insertar los ejes en líneas individuales. H3 {
Font-Family: ‘Gingham’, Helvetica, Sans-Serif;
Tamaño de fuente: 35px;
WDTH: 900;
Wght: 100;
}
Ambos hacen lo mismo al final.
Crédito de la imagen: Guía de desarrolladores de Google
¿Dónde encuentro fuentes variables? Encontrar fuentes variables es un poco más difícil que acceder a las fuentes de Google (especialmente porque ninguna de las fuentes de Google es variable). Debido a que la tecnología es nueva, las fuentes variables no están tan extendidas. Deben hacerse individualmente debido a todas las interacciones entre los ejes, de modo que en los lugares que ofrecen, generalmente son premium para la compra. Tiene acceso a algunos de Typekit con una suscripción creativa en la nube.

V-Fonts.com es un director con muchos lugares diferentes para obtener fuentes variables. Se une a las diferentes fuentes a lo que dibujo.
Monotype vende fuentes variables e incluso hay una demostración gratuita de su meta fuente FF.
Se dicen fuentes variables gratuitas, puede obtener algunas fuentes individuales gratuitas. Estos son los recomendados por el delicioso sabor y siempre talentoso Kenny Sing.
Gingham es lo que usé anteriormente. Kenny me puso sobre ella y es buena.
League Mono también es una buena opción para una fuente variable simple pero versátil.
La página de Renner dice que es una obra maestra moderna. ¿Quién soy yo para discutir?
Eso debería hacerte por ahora. Debido a que las fuentes variables son como docenas de fuentes envueltas en una sola caja, descarglas a lo anterior y tenga acceso a más opciones de las que pueden contar.
Recuerde que lo único que debe considerar al usar fuentes variables en su sitio de WordPress es esto: no todos los navegadores aún aceptan Firefox, por ejemplo, tiene algunos problemas con ellos. Entonces, si tiene la intención de hacer una fuente variable de una parte invaluable de su sitio web, probablemente quiera un plan de emergencia para las personas en Firefox … o Microsoft Edge. Pero de nuevo, probablemente ya tenga una de ellas debido a las personas que todavía están corriendo. 6. Terminar las fuentes variables aportan mucho valor a la mesa con muy poco trabajo. Es genial poder estilizarlos con atributos CSS, ya que podría agregar en negrita o cursiva. Y a medida que más navegadores comienzan a reconocer los diferentes ejes que se desarrollan para ellos, las fuentes variables serán algo que desea experimentar: si no se abraza con ambos brazos. ¿Qué piensa sobre las fuentes variables? Crédito por imagen presentada Artículo Tyler Finck / Tylerfinc.com