banner
hace 3 años
3142 Views

Herramienta Google Fonts

Autor:
google-fonts
banner

 

En esta ocasión explicaremos uno de los apartados mas importantes de un proyecto web, este sin duda tiene que ver con la tipografía.

 

Google pone una amplia variedad de tipografías gratuitas a nuestra disposición, gracias a su Herramienta Google Fonts; herramienta imprescindible para los diseñadores web.

GoogleFonts

La Herramienta Google Fonts nos permite añadir tipografías de manera muy fácil e intuitiva, añadiendo un código facilitado por Google Fonts en nuestra web, tendremos la tipografía cargada y lista para usar.

Google Fuentes

Sin mas explicaciones veamos su funcionamiento:

Cuando accedemos a la web de Google Fonts, vemos las primeras tipografías y menús. Estos menús permiten filtrar las propiedades de la tipografía que estamos buscando; así como poder visualizar nuestra tipografía en diferentes diseños, como; en palabras, frases, párrafos y póster.

La interface, sencilla y muy intuitiva; realmente ayuda a la hora de buscar tipografías muy especificas.

Una vez que hayamos encontrado la tipografía, nos fijaremos en los cuatro botones que se sitúan en la esquina inferior derecha de nuestra tipografía.

De color azul tendremos la posibilidad de guardar las tipografías que mas nos gusten en nuestra colección de Google Fonts. Los demás botones permiten; ver todos los estilos de la tipografía, Quick-use y la opción Pop out, para visualizar los estilos en una ventana.

Para añadir nuestra tipografía, deberemos darle a Quick-use. Una vez dentro podremos seleccionar los estilos que queremos importar a nuestra web. Seleccionados estos, ya tendremos el código de la tipografía generado.

<link href = ‘https: //fonts.googleapis.com/css familia = Abiertas + Sans?’ rel = ‘hoja de estilo’ type = ‘text / css “>

Debemos añadir este código en la sección <head></head> de la web. Realizado este paso ya tendríamos la tipografía web importada a nuestro proyecto.

Solo nos faltaría añadir el estilo en nuestro archivo css.

font-family: ‘Open Sans’, sans-serif;

De esta manera hemos conseguido importar la tipografía web y utilizarla de manera muy sencilla. Gracias a esta herramienta los diseñadores web ganamos rapidez y eficiencia en nuestros desarrollos web.

Espero que utilicéis esta herramienta que Google nos proporciona de manera gratuita, ya que realmente facilita mucho el diseño de la tipografía web, punto importante este el de la tipografía en el mundo del diseño web.

Sendoa

Sendoa

¡Aúpa! Me llamo Sendoa y soy un apasionado del Diseño y Desarrollo Web.

Fundador de WebSdcStudio.es; mi blog personal, donde expongo diferentes contenidos de ayuda, consejos, trucos, recursos... sobre el mundo del Diseño y Desarrollo Web.
Sendoa

Latest posts by Sendoa (see all)

Articulos Relacionados

Tags Artículos:
·
Artículos Categorías:
Recursos Web
banner

Deja un Comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Left Menu Icon
Web Sdc Studio
Right Menu Icon