Cuando se lanzó Google Web Fonts por primera vez, escribimos un tutorial rápido. Desde entonces, el servicio ha sido completamente revisado y es hora de un recorrido completo desde cero.
Únase a nosotros para comenzar desde el principio y discuta qué es el servicio Google Web Fonts y cómo puede comenzar a utilizarlo en su sitio hoy. Denos unos minutos de su tiempo y lo abriremos al increíble mundo de las increíbles fuentes web gratuitas.
¿Por qué Google Web Fonts?
Una vez, la web estaba llena de fuentes aburridas y estándar. Con el fin de garantizar la compatibilidad con el mayor número de usuarios, los diseñadores web se vieron obligados a limitar sus opciones de fuente de texto en vivo a los tipos de letra que se encuentran comúnmente en la mayoría de las máquinas.
"La licencia de fuentes realmente puede ser un desastre, por lo que la incorporación directa de fuentes aleatorias en una página web no siempre es una buena idea".Esto no fue lo peor del mundo en aras de la coherencia y la legibilidad, pero realmente limitó la creatividad tipográfica de la web en su conjunto. Con CSS3, la mayoría de los navegadores comenzaron a admitir @ font-face, una forma de entregar fuentes personalizadas a una página web. Desafortunadamente, las licencias de fuentes realmente pueden ser un desastre, por lo que incrustar directamente fuentes aleatorias en una página web no siempre es una buena idea.
Servicios de fuentes web
Como solución, surgieron una serie de servicios de fuentes web de @ font-face, el mejor y más famoso de los cuales es Typekit. Typekit tenía una solución hermosa: navegue a través de su extensa biblioteca de fuentes, luego simplemente copie y pegue algo de código para implementarlas en su sitio.
? Typekit tenía una solución hermosa: navegue a través de su extensa biblioteca de fuentes, luego simplemente copie y pegue algo de código para implementarlas en su sitio. ?El único problema con servicios como este es que la estructura de costos, $ 49- $ 99 si quiere más de dos sitios, prohíbe que muchos diseñadores los utilicen. Google apareció e hizo lo que siempre hace: tomó un servicio premium y lo ofreció de forma gratuita.
La calidad y variedad de los tipos de letra que encontrará en servicios premium como Typekit son comprensiblemente mucho mejores de lo que puede obtener de forma gratuita, pero si no están dentro del presupuesto, Google Web Fonts es absolutamente su mejor opción.
La línea de fondo
Aquí está lo esencial: Google Web Fonts es una forma completamente gratuita y súper fácil de implementar fuentes no estándar en su sitio web de una manera con licencia y soporte ampliamente soportado.
Conoce las fuentes web de Google
Ahora que tienes la idea, es hora de ir y echar un vistazo a la página de fuentes web de Google.
Lo que estás viendo aquí es muy parecido a una aplicación de fuente estándar. Es básicamente una lista enorme de todas las fuentes disponibles con varias funciones de vista previa y filtrado. Tenga en cuenta que, en el momento de escribir este artículo, hay 506 familias de fuentes separadas en la biblioteca. No está mal para un servicio gratuito!
Personalizando tu vista previa
La parte más grande de esta página está ocupada por las vistas previas de fuentes. Cuando elige una fuente, es absolutamente crucial verla de manera similar a como la va a implementar. Algunas fuentes se ven muy bien para los titulares, pero absolutamente horribles como copia de cuerpo.
? Cuando elige una fuente, es absolutamente crucial verla de manera similar a como la va a implementar. ?Afortunadamente, Google Web Fonts le permite personalizar su vista previa para que coincida con su caso de uso. Puede ingresar texto de vista previa personalizado y cambiar el tamaño de la vista previa.
Cuando realmente quiero ver bien una fuente que voy a usar para un titular, me gusta usar la palabra? Word? ver. El diseño de la cuadrícula aquí también es la mejor manera de navegar por muchas fuentes rápidamente.
La parte más importante es asegurarse de obtener una vista previa de cualquier copia del cuerpo que vaya a utilizar en la vista de párrafo. Sinceramente, es una buena idea evitar el uso de una fuente personalizada si tiene mucha copia del cuerpo, pero hay muchos casos de uso legítimos aquí, así que solo tenga cuidado.
Clasificación y filtrado
Como vimos anteriormente, hay más de quinientas familias tipográficas para analizar. Puede ser una tarea brutal si simplemente se desplaza por ellos uno por uno, pero las opciones de filtrado y clasificación aquí pueden simplificar dramáticamente este proceso y ayudarlo a identificar exactamente lo que necesita.
Clasificación por popularidad y fecha de adición
Una cosa rápida que puede hacer de inmediato es cambiar el método de clasificación. Me gusta ver lo que es popular o recientemente agregado. También es útil que pueda ordenar fácilmente cuántos estilos hay en la familia. Esto le permite agarrar una familia versátil que se puede utilizar en varios anchos y estilos.
Filtrado por características y estilo.
De lejos, la manera más útil de mejorar sus resultados es usar las opciones de filtrado. Esto es especialmente útil si conoce el tipo de letra que desea implementar. Por ejemplo, si sabe que quiere una fuente manuscrita, puede desactivar todos los otros tipos de los resultados.
No se detiene ahí, Google va aún más lejos al permitirle ajustar los resultados según el grosor, inclinación y ancho de los caracteres. Esa es una característica realmente genial que nunca he visto en ningún otro lugar.
Elegir fuentes
Google ha establecido un sistema bastante versátil para elegir e implementar varias fuentes, lo que significa que hay varias formas de realizar varias tareas. No hay correcto o incorrecto aquí, solo lo que funciona mejor para usted y su flujo de trabajo único.
Una forma de trabajar es atravesar y golpear el? Uso rápido? Botón cuando veas una fuente que te guste. Esto lo llevará a una página que le muestra cómo usar esa fuente, que veremos más adelante. También puedes usar el? Pop out? para ver una ventana informativa que le informa más sobre la fuente.
Si va a utilizar varias fuentes, entonces la forma más eficiente de trabajar será usar la? Colección? característica. A medida que encuentre diferentes fuentes que le gustaría usar, presione "Agregar a la colección". para ver la fuente agregada a su lista en la parte inferior de la pantalla.
Desde aquí, ¿puedes? Bookmark? o? Descargar? su colección utilizando los controles en la parte superior de la pantalla, o elija entre? ¿Revisar? ¿y use? Botones en la parte inferior de la pantalla.
Usando fuentes
Una vez que esté listo para ver estas fuentes en acción, salte a? ¿Usar? lengüeta. Lo primero que verá aquí es una lista de las fuentes de su colección con la capacidad de activar y desactivar sus diversas opciones. También hay un medidor útil que calcula el impacto que tendrán estas fuentes en el tiempo de carga de su página.
Desde aquí, implementar las fuentes es tan simple como copiar y pegar algo de código. Tendrá tres opciones para elegir para la incorporación inicial: Estándar, @import y JavaScript.
- Estándar - Este es un enlace de hoja de estilo estándar que colocará en la parte principal de su archivo HTML. Esto le ahorra el paso de agregar la regla @import a su archivo CSS porque esencialmente está agregando una hoja de estilo que ya lo tiene.
- CSS - Si no desea vincular a la hoja de estilo generada automáticamente en su encabezado, use la regla de importación de CSS que se muestra en la segunda pestaña.
- JavaScript - El código aquí es parte de WebFont Loader, que es una biblioteca de JavaScript desarrollada por Google y Typekit que le dará más control sobre la carga de fuentes. Puedes leer más sobre esto aquí.
Una vez que haya importado las fuentes correctamente, entonces todo lo que queda es implementar las fuentes en su familia de fuentes CSS como siempre lo haría. El fragmento de esto está cerca de la parte inferior:
Un ejemplo
Ahora que entendemos todos los fragmentos y lo que hacen, les mostraré cómo implemento una colección de fuentes. Lo primero que querrás hacer es agarrar el fragmento de código HTML y tirar cerca de la parte superior de tu código HTML así:
A continuación, salta al CSS. Lo que vamos a hacer aquí es bastante diferente de lo que vimos anteriormente. Aquí está el código:
Primero, utilicé la abreviatura de la fuente CSS para ahorrar espacio. Esto nos permite escribir todas las características de nuestra fuente en una sola línea, lo que es genial.
El primer valor que ves es? 400? tanto en el h1 como en el párrafo. Inserté esto para asegurarme de que el navegador muestre estas fuentes en los pesos en los que estaban destinadas a mostrarse, y vimos antes que el peso previsto es 400.
A continuación, establezco el tamaño de fuente seguido de la altura de la línea. Tenga en cuenta que no usé ningún tipo de unidades para la altura de la línea, este es un buen truco que aplicará una altura de línea relativa que cambia con el tamaño de la fuente.
Finalmente, inserto las fuentes de Google y uso mis propias copias de seguridad porque no creo que debas usar las opciones predeterminadas del navegador para "cursiva". que es lo que usa Google en su fragmento.
Eso es realmente todo lo que necesitamos hacer. Cargue su vista previa en vivo en un navegador y debería ver que sus fuentes personalizadas se muestran perfectamente.
Ve a usarlo!
Acaba de aprender todo sobre cómo usar las fuentes web de Google, ahora es el momento de salir y poner este conocimiento en uso en su propio sitio. Examine las fuentes disponibles y piense cómo puede mejorar la tipografía en sus proyectos. Siempre recuerda que, con fuentes personalizadas, menos es más. Vaya fácil y use esta herramienta selectivamente.
Si tienes problemas para elegir, asegúrate de revisar nuestra colección de 10 fantásticas combinaciones de fuentes de Google que puedes copiar (¡también en la segunda parte!).
Fuentes de Google
Google Fonts es una biblioteca de más de 800 tipos de letra diferentes, completamente listos para ser integrados en su proyecto web. Esta serie analiza qué es Google Fonts y comparte ejemplos interesantes y combinaciones de fuentes que pueden llevar su proyecto al siguiente nivel.