Seamos honestos. Si usa una sola fuente en su sitio web sin variación en el peso, la altura o el espaciado, la gente se aburrirá. No leerán tus cosas. Es por eso que necesita usar fuentes variables en su sitio. Incluso si elige usar solo una fuente, puede modificarla lo suficiente a través de CSS para que se convierta funcionalmente en una multitud de opciones de fuente.
Las fuentes variables son fuentes individuales que CSS puede modificar de acuerdo con 5 criterios o ejes diferentes. Cada eje controla una faceta particular de la apariencia de la fuente y tiene una etiqueta CSS correspondiente.
- Peso ( peso en CSS)
- Inclinación ( slnt en CSS)
- Cursiva ( ital en CSS)
- Tamaño óptico ( opsz en CSS)
- Ancho ( peso en CSS)
Y luego está el pseudo-eje Grade, representado por GRAD en CSS. Desearía poder decirle por qué Grade está escrito en mayúsculas cuando se usa en sus hojas de estilo… pero no puedo. Es lo que es. Además, diferentes empresas pueden introducir (y lo hacen) nuevos ejes a medida que se desarrolla la tecnología. Así que hay mucho que podremos hacer con estos en el futuro.
Al combinar todos esos ejes diferentes, puede hacer que cualquier tipo de letra haga prácticamente cualquier cosa que desee hacer, incluso animarlos como SVG. (Tenga en cuenta que 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 incrustar y mostrar varias fuentes en su sitio. La documentación para desarrolladores de Google lo resume muy bien:
Las fuentes variables OpenType nos permiten almacenar múltiples variaciones de una familia tipográfica en un solo archivo de fuente. Monotype realizó un experimento al combinar 12 fuentes de entrada para generar ocho pesos, en tres anchos, en los estilos cursiva y romana. El almacenamiento de 48 fuentes individuales en un solo archivo de fuente variable significó una reducción del 88 % en el tamaño del archivo . (énfasis suyo)
Uso de fuentes variables en WordPress
Entonces, ahora que sabemos que las fuentes variables son fantásticas, el siguiente paso es incorporarlas a nuestro flujo de trabajo y sitios de WordPress.
Paso 1
Lo primero que tienes que hacer es instalar la fuente en tu sitio web. Puede usar un complemento como Use Any Font , cargarlo directamente a través de la interfaz Divi si es miembro de ET, vincularlo usando @font-face , o renunciar a los complementos y temas por completo y hacerlo a la antigua.
Independientemente de cómo lo haga, una vez que lo tenga en su sitio, usar la fuente es bastante fácil. Para esto, he subido la fuente gratuita Gingham a través de Divi porque esa es la que uso. El resultado final es el mismo.
Paso 2
Dado que las fuentes variables se basan en CSS, querrá ir a donde haya agregado su CSS personalizado. Eso podría estar en un archivo custom.css , un stylesheet.css , en el CSS adicional del personalizador de WordPress , o incluso en la parte inferior de la pestaña General de Opciones de tema Divi (la mayoría de los temas también tienen un cuadro similar). Ingresarás este código (con el nombre de las fuentes variables que estés usando).
|
01
02
03
04
|
@font-face { font-family: 'Gingham'; src: url('Gingham.woff2') format('woff2'),} |
Se verá algo como esto en su ventana CSS.
Todo lo que hace es permitirle usar la fuente en su sitio web.
Paso 3
Ahora es el momento de darle estilo 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, este se está aplicando a cualquier división .et_pb_text . Puede hacer que se aplique a todo el cuerpo o h1, h2, h3 o incluso p. Tu elección. Son fuentes variables después de todo.
Hay dos maneras de abordar esto. El primero es una línea única y eficiente de CSS que utiliza la configuración de variación de fuente.
|
01
02
03
04
05
|
h3 { font-family: 'Gingham',Helvetica,sans-serif; font-size: 35px; font-variation-settings: 'wght' 700, 'wdth' 75; } |
También puede agregarlos con otro CSS, como float o z-axis o cualquier otra cosa.
Alternativamente, puede ingresar los ejes en líneas individuales.
|
01
02
03
04
05
06
|
h3 { font-family: 'Gingham',Helvetica,sans-serif; font-size: 35px; wdth: 900; wght: 100; } |
Ambos hacen lo mismo al final.
Crédito de la imagen: Guía para desarrolladores de Google
¿Dónde encuentro fuentes variables?
Encontrar fuentes variables es un poco más difícil que solo ir a Google Fonts (especialmente porque ninguna de las Google Fonts es variable). Debido a que la tecnología es nueva, las fuentes variables no están tan extendidas. Deben fabricarse individualmente debido a todas las interacciones entre los ejes, por lo que en los lugares que las proporcionan, generalmente son fuentes premium para comprar.
-
Adobe Typekit ofrece una serie de fuentes variables para que elijas. Obtiene acceso a algunos de TypeKit con una membresía de Creative Cloud.
- V-Fonts.com es un directorio de muchos lugares diferentes para obtener fuentes variables. Se vinculan a las diferentes fuentes de lo que extraen.
- Monotype vende fuentes variables e incluso hay una demostración gratuita de su fuente FF Meta .
Fuentes variables gratuitas
Dicho esto, puede obtener algunas fuentes individuales gratuitas. Estos son los recomendados por el deliciosamente sabroso y siempre talentoso Kenny Sing.
- Gingham es lo que usamos arriba. Kenny me puso en eso, y es bueno.
- 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 bastarte por ahora. Debido a que las fuentes variables son como docenas de fuentes empaquetadas en una caja, descárguelas y tendrá acceso a más opciones de las que puedo contar.
Tenga en cuenta
Lo único que debe tener en cuenta al usar fuentes variables en su sitio de WordPress es esto: no todos los navegadores las admiten, pero Firefox, por ejemplo, tiene algunos problemas con ellas. Entonces, si planea hacer que la parte variable de una fuente variable sea una parte invaluable de su sitio web, probablemente querrá un plan de contingencia para las personas en Firefox… o Microsoft Edge. Pero, de nuevo, probablemente ya tengas uno de esos porque las personas todavía usan IE 6.
Terminando
Las fuentes variables aportan mucho valor a la mesa con muy poco trabajo por parte del usuario. Poder diseñarlos con atributos CSS de la misma manera que podría agregar negrita o cursiva es maravilloso. Y a medida que más navegadores comiencen a reconocer los diversos ejes que se están desarrollando para ellos, las fuentes variables serán algo con lo que al menos querrá experimentar, si no abrazar con ambos brazos.
¿Qué piensas sobre las fuentes variables?
Crédito de la imagen destacada del artículo Tyler Finck / tylerfinck.com