Cómo usar las fuentes de Google en su próximo proyecto web y por qué debería hacerlo

La elección de la fuente es una decisión de diseño integral en cualquier sitio web, pero la mayoría de las veces estamos contentos con la misma familia de serif y sans-serif. Si bien el cuerpo principal del texto siempre debe ser algo optimizado para facilitar la lectura, a menos que desee que los lectores tengan un dolor de cabeza, los títulos y el texto destacado pueden ser su espacio para agregar un diseño único con un toque de fuente..

Sigue leyendo para saber cómo usar cualquiera de las fuentes web de Google en tu sitio..

Fondo

Con CSS, puede especificar una cadena de fuentes para usar si la preferida no está disponible. Esto le permite tener una primera opción, quizás una fuente menos común pero gratuita; luego tenga copias de seguridad en su lugar que siempre estarán allí con Windows o Mac. En general, sin embargo, los diseñadores web se apegarán a las cadenas de familias de fuentes probadas y comprobadas, como lo describen las escuelas w3.

En el pasado, si se deseaba una fuente diferente, los diseñadores se veían obligados a crear imágenes para el texto en su lugar: logotipo, encabezados, etc.

• Las imágenes no se escalan bien.
• Las imágenes no son legibles por los lectores de pantalla.
• No puedes resaltar el texto en imágenes..
• Los motores de búsqueda no pueden “leer” imagenes.
• La carga de imágenes ralentiza la página web.

Entonces, ¿hay una mejor solución? Una que nos permite utilizar un conjunto de fuentes gratuitas disponibles universalmente, sin recurrir a imágenes?

Fuentes web de Google

La respuesta viene de Google. Google Web Fonts es esencialmente una colección de (en el recuento actual)., 489) fuentes optimizadas almacenadas en la nube, que pueden integrarse en sus proyectos web (o incluso simplemente descargarse para usar en su computadora).

Además, el sitio de fuentes web de Google facilita la comparación y la selección, luego le brinda todo el código que necesita para incrustar la fuente a través de Javascript o CSS. Más sobre esto más adelante..

Empezando

Dirígete al sitio de fuentes web y haz clic en empezar a elegir fuentes empezar.

La interfaz se explica por sí misma: a la izquierda puede buscar palabras clave específicas; y filtrar por tipo de fuente básica; o filtrar por factores específicos como el grosor de la letra. La barra de la parte superior solo ajusta el texto de vista previa. Si tiene un párrafo específico de texto en el que quiere probarlo, por ejemplo, cambie a la pestaña de párrafo y pegue en su texto.

Como mencioné, es mejor que no escojas nada demasiado sofisticado para el texto del contenido principal, así que quédate con las familias serif o sans-serif si realmente quieres ir por algo único..

Cuando vea uno que le guste, simplemente agréguelo a su colección..

Haga clic en el revisión botón para entrar en modo de revisión y comparar todas sus opciones.

En el modo de revisión, se le muestra una variedad de tamaños de fuente y un texto de encabezado o de párrafo. El sistema también hará una elección inteligente sobre la cual mostrarle, dependiendo del caso de uso típico de esa fuente; Pero puedes cambiar el modo de vista previa si quieres..

Desplácese hacia la derecha para ver otras fuentes en su colección actual; haga clic en la X en la parte superior derecha para rechazarlos.

Prueba de conducción es un modo particularmente interesante que combinará todas las fuentes en su colección para mostrar cómo se vería cuando se combina en un diseño de página básico.

OK, Elegido. ¿Cómo los uso??

Con su colección reducida, haga clic en revisión Botón en la barra azul grande. Si se excedió e incluyó demasiados (en realidad, manténgalo a 2 como máximo), el indicador de impacto de carga de la página le avisará.

Desplácese hacia abajo para agarrar el código relevante. Hay 3 opciones aquí:

• Estándar (enlace rel = método): esto debe pegarse en la sección HEAD de su sitio, por lo que deberá sentirse cómodo con HTML para hacer esto. Para WordPress, lo estarás agregando a header.php Si así lo eliges. No lo recomiendo.
• @importar: este método va directamente a su archivo de hojas de estilo, que es donde especificaremos las fuentes para varios elementos de la página de todos modos, así que personalmente lo recomiendo. Para temas de WordPress, colóquelo en style.css justo después de la sección de información del tema
• Javascript: explica por sí mismo: coloca el código en cualquier lugar de tu tema. La ventaja de utilizar este método es que la fuente se cargará de forma asíncrona: el sitio se mostrará primero en la fuente alternativa, luego se cambiará una vez que la fuente se haya cargado por completo. Aunque el tiempo de carga de la página inicial será más rápido, creará un cambio repentino para el usuario que quizás no desee.

Ese es el paso 1. El paso 2 es especificar la fuente donde se quiere usar. Aquí no tenemos espacio para un tutorial completo de CSS (sugiero estos 5 sitios de aprendizaje de CSS Los 5 mejores sitios para aprender en línea CSS los 5 mejores sitios para aprender en línea de CSS Lea más, y mis propios 5 pasos de bebé en el tutorial de CSS 5 Pasos de bebé para Aprendiendo CSS y convirtiéndose en un Kick-Ass CSS Sorcerer 5 Baby Steps to Learning CSS y Convertirse en un Kick-Ass CSS Sorcerer CSS es el cambio más importante que las páginas web han visto en la última década, y allanó el camino para la separación de estilos y estilos. contenido. De manera moderna, XHTML define la estructura semántica ... Leer más), pero basta con decir que estará ajustando cualquier cosa en su hoja de estilo que diga Familia tipográfica, y asegúrese de incluir el estilo de copia de seguridad como lo sugiere Google.

Optimizado

El uso de una fuente no estándar que el usuario necesita descargar agregará una pequeña cantidad de tiempo a la carga de su página, eso es inevitable. Sin embargo, una fuente web típica de Google es de aproximadamente 100 KB, para comparación, se trata del tamaño de una imagen jpeg de tamaño medio y de buena calidad. Al igual que las imágenes, la fuente web se almacenará en caché en el navegador del usuario, por lo que solo la carga inicial de la página se retrasará ligeramente.

Resumen

Lo admito, me encantan las fuentes. Espero como muchos de ustedes, tiendo a guardarlos en mi disco duro. - por si acaso tu sabes?! Ahora puedo usar algunas fuentes únicas en mis proyectos web, estoy emocionado. Por favor, No descuides las fuentes de tu sitio web.!

Si tiene alguna pregunta sobre la implementación de fuentes web en su sitio web, no dude en preguntar en los comentarios y veré si puedo ayudarlo..