Fuentes de Google para Páginas Web

Directorio de Fuentes de GoogleGoogle Web Fonts es un directorio de fuentes o tipografías online para páginas web que cualquiera puede utilizar de forma gratuita. El Directorio de Fuentes de Google es un proyecto para webmaster y diseñadores de páginas web que permite un acceso sencillo a una amplia selección de tipografías o fuentes de calidad.

Fuentes gratuitas y de código abierto

Todas las fuentes del Directorio de Fuentes de Google son de código abierto. Esto significa que son de libre uso, independientemente de si estás trabajando en un proyecto privado o comercial.

¿Cómo usar las fuentes del Directorio de Google?

Sólo necesitamos 3 pasos para comenzar a usar las fuentes en nuestra página web:

1. Elegimos la fuente: Buscamos entre cientos de familias de fuentes, y añadirmos las que nos gustan para nuestra página web a nuestra colección.

Google Directorio Fuentes

2. Revisión de las fuentes de la colección: Compara entre todas las fuentes de tu colección, para ver los estilos en un diseño web dinámico.

Fuentes Google para páginas web

3. Usamos las fuentes seleccionadas para la página web: Copia el código necesario que ofrece en tres formas distintas, y ya estás listo para añadir la fuente a tus páginas web.

Google Fuentes páginas web

Implementar una tipografía de Google Web Fonts en nuestra página web

Una vez seleccionada la tipo que quieres, para configurarla en tu páginas web, Google nos ofrece tres formas distintas:

1. Stantdar: A través de la etiqueta Link, como cualquier otro estilo css, (dentro de las etiquetas head de la página web).

2. @import: Haciendo un include de la fuente directamente en el archivo de estilos css (ejemplo style.css).

3. Javascript: A través de un script de javascript (dentro las etiquetas head de la página web).

Para usar la fuente o tipografía seleccionada e implementada, solamente hay que indicarlo en la propiedad Font-family:

[Directorio de fuentes de Google para páginas web]

Comentarios

Enviado por ObiWan (no verificado) el

Genial, me gusta porque no te distraes con detalles que lían.
Tengo un par de preguntas. La primera es que, si decido incluir nuevas, por ejemplo en algunos títulos, pero no en los párrafos, cómo lo hago? Tengo que tener instalada la fuente en mi ordenador? Debería diseñar la página con las fuentes instaladas y luego tocar el código?

Y la segunda cuestión es que dices:
"Para usar la fuente o tipografía seleccionada e implementada, solamente hay que indicarlo en la propiedad Font-family"...
vale, dónde se pone esto? en el head?

Se me da bastante bien diseñar pero de código no tengo ni idea (como nos suele pasar a casi todos). Sólo toco algunas cositas y me pone nervioso hacerlo por si me cargo algo.

De todos modos, muchas gracias por molestarte en subir este artículo de una forma tan directa.

Enviado por Jorge - Ideas F... (no verificado) el

Hola ObiWan,
para definir diferentes fuentes como diferentes estilos para los elementos de la página web, debes utilizar css ya sea con un archivo externo .css o incluyendo los estilos dentro del ′head′. De esta forma creas clases con diferentes fuentes que puedes asignar a diferentes etiquetas, como un título o un párrafo.

ejemplo de estilo con css desde un archivo externo:

<link rel="stylesheet" type="text/css" href="ruta_archivo/web.css" />// esto va en el head

archivo web.css:

@charset"utf-8";
p{ font-family:Verdana, Geneva, sans-serif; color:#000; text-align:justify;}

Enviado por Cristian (no verificado) el

exactamente lo que estaba buscando @import, ya tengo toda la página realizada y quieren incluir una fuente nueva de google, incluir el el head uno por uno es un terrible dolor de cabeza!
Saludos!