Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje22-10-2011, 18:59 (UTC)    
Título del mensaje: TUTORIAL - Colocar mas Fuentes en nuestra Pagina.

En este tutorial, explicare como usar mas tipografias en nuestra pagina web con los recursos que ofrece Google Font

Paso 1 Para empezar nos vamos a ir ah
http://www.google.com/webfonts
Nos aparecera una lista de tipografias que podremos usar.

Paso 2 Yo eleji la primera que nos sale

Y le daremos click en
Quick-use
y nos llevara a donde esta la fuente que elejimos. Yo les mostrare una parte de los que nos aparecera

No mostrare todo. Pero ahora nos tendremos que ir mas abajo hasta llegar a 3. Add this code to your website:. Y nos saldra este cuadro

Nos saldran 3 secciones a elejir:
Standard @import Javascript
Nosotros nos quedaremos con Standarf- Los 3 son lo mismo.

Paso 3 Ahora nos hiremos a nuestro editor html
Ahora volveremos a la pagina de google y copiaremos el codigo que nos sale en Standard

y lo pegaremos en el editore (FUENTE HTML)


Paso 4 Ahora nos hiremos nuevamente a google font hasta llegar a la parte de 4. Integrate the fonts into your CSS: y el codigo que nos es importante. Lo copiaremos y lo pegaremos en este codigo
Cita:
<h1><span style=" aqui lo pegaremos al codigo">texto</span></h1>

Ami el codigo que me toco es este:

Y con el codigo anterior que teniamos que pegar me quedo haci
Cita:
<h1><span style="font-family: 'Linden Hill', serif;">texto</span>

Y lo pegamos en el editor html debajo del que ya habiamos pegado.
Luego el resultado nos va quedar haci

y haci es como podemos hacer con todas las fuentes que queramos.

Otra alternativa.
Cuando elijamos una tipografia de GF, pegaremos el codigo css que nos da, yo pondre el que use para este tutorial:
Código:
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Linden+Hill" />

lo pegaremos por ensima de la pagina.

Y Luego nos vamos a ir mas abajo de donde nos aparece ese codigo ( 4. Integrate the fonts into your CSS: )
y en la perte derecha nos sale este codigo

lo pegaremos en code css sin style. Haci cuando escribamos en cualquier tamaño ( h1 ) ya nos salga con la tipografia elejida.

Deceas ver una vista previa;http://brianpwg.es.tl/T%EDpografias.htm

Bueno, espero que les haya gustado.
El tutorial no esta trucado ni nada, es propio.
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group