Cómo utilizar las fuentes de google en tu proyecto web y por qué debe

elección de la fuente es una decisión de diseño integral en cualquier sitio web, sin embargo la mayoría de las veces estamos satisfechos con la misma familia serif viejo y sans-serif. Mientras que el cuerpo principal del texto debe ser siempre algo optimizado para facilitar la lectura a menos que desee a los lectores a un dolor de cabeza, títulos y el texto destacado puede ser su espacio para añadir un diseño único con algo de estilo de fuente.

Siga leyendo para averiguar cómo utilizar cualquiera de las fuentes web de Google en su sitio.

Fondo

Con CSS, se puede especificar una cadena de fuentes que desea utilizar si la preferida no está disponible. Esto le permite tener una primera opción - tal vez un Font- menos común pero libre luego tener copias de seguridad en el lugar que siempre estará allí con Windows o Mac. En general, sin embargo, los diseñadores web se quede con las cadenas de la familia de fuentes de probada eficacia, como se indica por las escuelas W3.

Vídeo: Como Hacer una Bibliografia de Internet en Word | Tutorial de Word

En el pasado, si se desea una fuente diferente, los diseñadores se vieron obligados a crear imágenes para el texto en su lugar - logotipo, cabeceras, etc. Las desventajas que exista:

• Imágenes no escalan bien.
• Las imágenes no pueden ser leídos por los lectores de pantalla.
• No se puede resaltar el texto en imágenes.
• Los motores de búsqueda no pueden “leer” las imágenes.
• la carga de imágenes se ralentiza la página web.

Entonces, ¿hay una solución mejor? Uno que nos Vamos a usar un conjunto universalmente disponibles de fuentes libres, sin tener que recurrir a las imágenes?

Fuentes de Google Web

La respuesta viene de Google. Google Web Fonts es esencialmente una colección de (al recuento actual, 489) Fuentes optimizadas almacenados en la nube, que se pueden incrustar en sus proyectos web (o incluso sólo descargan a utilizar en su ordenador).

Por otra parte, el sitio web de Google Fuentes hace que sea fácil de comparar y elegir, a continuación, le da todo el código necesario para incrustar la fuente a través de javascript o CSS - más sobre esto más adelante.

Empezando

Pásate por el sitio Web de Fuentes, y haga clic comenzar a elegir las fuentes empezar.

La interfaz es bastante explica por sí mismo - a la izquierda se puede buscar y Palabras Clave: filtro específico por la fuente básica de tipo o el filtro de factores específicos tales como el grosor de la carta. La barra en la parte superior ajusta sólo el texto de vista previa. Si usted tiene un apartado específico de texto que desee probarlo en, por ejemplo, cambiar a la pestaña párrafo y pegar en su texto.

Como ya he mencionado, es mejor no elegir nada demasiado sofisticado para el texto principal de contenidos, lo que se adhieren a las familias ya sea serif o sans serif que si realmente desea ir para algo único allí.

Cuando vea que más le guste, sólo tiene que añadir a su colección.

Haga clic en el revisión botón para entrar en el 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 ya sea un texto de párrafo o titular. El sistema también tomar una decisión inteligente sobre la que le muestre dependiendo del caso de uso típico de la Fuente- pero se puede cambiar el modo de vista previa, si quieres.

Desplazarse hacia la derecha para ver otras fuentes en su actual colección- haga clic en la X en la esquina superior derecha para rechazarlos.

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

OK, Elegido. ¿Cómo puedo usarlos?

Con su colección redujo, haga clic en el revisión botón en la barra grande azul. Si usted ha ido por la borda y colocado demasiados (en realidad, mantenerla a 2 en el máximo), el indicador de impacto de carga de página da una advertencia.

Vídeo: tutorial html y css | insertar tipografia externa en uns pagina web (sub)

Desplazarse hacia abajo para agarrar el código correspondiente. Hay 3 opciones aquí:

• Standard (enlace rel = método): Esto tiene que ser pegado en la sección HEAD de su sitio, por lo que tendrá que ser cómodo con HTML para hacer esto. por WordPress, se le añade a header.php Si se elige esta manera. Yo no lo recomiendo.
• @importar: este método va directamente a su archivo de hoja de estilo, que es donde vamos a estar especificando los tipos de letra para diversos elementos de la página de todos modos, así que personalmente recomiendo este. Para temas de WordPress, colocarlo en style.css justo después de la sección de información de tema
• javascript: Explica por sí mismo - colocar el código en cualquier parte de su tema. La ventaja de usar este método es que la fuente se cargará de forma asíncrona - el sitio primero se mostrará en la fuente de reserva, entonces se cambiará una vez que la fuente se ha cargado completamente. Aunque el tiempo inicial de carga de la página será más rápido, se creará un cambio repentino discordante para el usuario, que puede que no desee.

Vídeo: CAMBIAR LA TIPOGRAFÍA DE TU WORDPRESS CON EASY GOOGLE FONTS.

Ese es el paso 1. Paso 2 es para especificar el tipo de letra en el que desea que se utilicen. No tenemos espacio para un tutorial completo aquí CSS (I sugieren que estos 5 sitios de aprendizaje CSS- y mi propia 5 pasos de bebé en CSS tutorial), Pero basta con decir que usted deberá adaptar cualquier cosa en su hoja de estilo que dice Familia tipográfica, y asegúrese de incluir el estilo de respaldo según lo sugerido por Google.Los 5 mejores sitios para aprender CSS en líneaLos 5 mejores sitios para aprender CSS en líneaLee mas

optimizado

El uso de una fuente no estándar que el usuario tiene que descargar va a añadir una pequeña cantidad de tiempo para la carga de la página - que es inevitable. Sin embargo, una fuente típica web de Google está a punto de 100KB - para la comparación, esto es aproximadamente del tamaño de una imagen JPEG de tamaño mediano buena calidad. Al igual que las imágenes, la fuente web se almacenan en caché en el navegador del usuario, por lo que sólo la carga de la página inicial se retrasó ligeramente.

Vídeo: Cómo usar fuentes Web en tus programas de Escritorio

Resumen

Lo admito - Me encanta fuentes. Espero que al igual que muchos de ustedes, tiendo a horda ellos en mi disco duro - por si acaso, ya sabes ?! Ahora realmente puedo hacer uso de algunas fuentes únicas en mis proyectos web - Estoy emocionado. Por favor, no descuidar las fuentes en su página web!

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