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

Anuncio

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

Siga leyendo para descubrir cómo usar cualquiera de los Fuentes web de Google en tu sitio.

Antecedentes

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 ahí con Windows o Mac. Sin embargo, en general, los diseñadores web se apegarán a las cadenas de familias de fuentes probadas y probadas, como descrito por 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: logotipo, encabezados, etc. Los inconvenientes son:

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

Entonces, ¿hay una mejor solución? ¿Uno que nos permita usar un conjunto de fuentes gratuitas universalmente disponibles, 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 Google Web Fonts hace que sea fácil de comparar y elegir, luego le brinda todo el código que necesita para incrustar la fuente a través de Javascript o CSS, más sobre eso más adelante.

Empezando

Dirígete a la Sitio de fuentes weby haga clic comenzar 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 en la parte superior ajusta solo el texto de vista previa. Si tiene un párrafo de texto específico en el que desea probarlo, por ejemplo, cambie a la pestaña de párrafo y pegue su texto.

Como mencioné, es mejor que no elijas nada demasiado elegante para el texto de contenido principal, así que quédate con familias serif o sans-serif si realmente quieres buscar algo único allí.

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

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

En el modo de revisión, se muestra una variedad de tamaños de fuente y un párrafo o texto de título. El sistema también tomará una decisión inteligente sobre qué mostrarle, según el caso de uso típico de esa fuente; pero puede cambiar el modo de vista previa si lo desea.

Desplácese hacia la derecha para ver otras fuentes en su colección actual; haz clic en la X en la esquina 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 podría verse cuando se combina en un diseño de página básico.

De acuerdo, elegido. ¿Cómo los uso?

Con su colección reducida, haga clic en el revisión botón en la gran barra azul. Si se fue por la borda e incluyó demasiados (en realidad, manténgalo en 2 como máximo), el indicador de impacto de carga de la página lo advertirá.

Desplácese hacia abajo para obtener 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 hacerlo. Para WordPress, lo agregará a header.php si eliges de esta manera. No lo recomiendo
• @importar: este método va directamente a su archivo de hoja de estilo, que es donde especificaremos las fuentes para varios elementos de la página de todos modos, así que personalmente lo recomiendo. Para los temas de WordPress, colóquelo en style.css justo después de la sección de información del tema
• Javascript: autoexplicativo: coloque el código en cualquier lugar de su tema. El beneficio de usar este método es que la fuente se cargará de forma asincrónica: el sitio se mostrará primero en la fuente alternativa y luego cambiará una vez que la fuente se haya cargado por completo. Si bien el tiempo de carga inicial de la página será más rápido, creará un cambio repentino discordante para el usuario que quizás no desee.

Ese es el paso 1. El paso 2 es especificar la fuente donde desea que se use. No tenemos espacio para un tutorial completo de CSS aquí (sugiero estos 5 sitios de aprendizaje CSS Los 5 mejores sitios para aprender CSS en línea Lee mas ; y el mío 5 pequeños pasos en el tutorial de CSS 5 pasos de bebé para aprender CSS y convertirse en un hechicero CSS increíbleCSS 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 estilo y contenido. En la forma moderna, XHTML define la estructura semántica ... Lee mas ), pero basta con decir que ajustará cualquier elemento de su hoja de estilo que diga Familia tipográficay asegúrese de incluir el estilo de copia de seguridad sugerido por 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: en comparación, se trata del tamaño de una imagen jpeg de tamaño mediano 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 que, como muchos de ustedes, tiendo a meterlos en mi disco duro. por si acaso, ¿sabes? Ahora puedo hacer uso de algunas fuentes únicas en mis proyectos web. Estoy emocionado. Por favor, ¡no descuides las fuentes en 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.