Miedito de qué ¿de aprender?

Tutoriales de Strata 3D, aplicaciones Adobe y otras yerbas. ¡Aprende!
Imagen

Incorporar Tipografías de Google (Google Fonts) en WordPress

Google nos ofrece las mentadas Google Fonts: tipografías gratuitas que se pueden utilizar en nuestros sitios, vinculándolas externamente. Incluirlas en nuestros sitios es razonablemente sencillo. Aquí explicamos cómo hacerlo en WordPress, pero como verán, es muy simple de hacer en cualquier sitio web.

Lo primero que hemos de hacer es ir a donde están las tipografías de Google. Aquí es donde escogemos qué colección utilizaremos. Se recomienda escoger una o dos tipografías, ya que cada una de ellas tiene un impacto en el tiempo de carga.

Digamos que queremos utilizar la tipografía New Rocker.

Para incorporarla debemos añadir un enlace a la tipografía y luego utilizarla en nuestro CSS.

Podemos hacer clic en el botón Quick Use que está en el muestrario de tipografías. Se abre una página que nos da el código de enlace, que en este caso es:

<link href='http://fonts.googleapis.com/css?family=New+Rocker' rel='stylesheet' type='text/css'>

Este código lo debemos poner en el encabezado de nuestra página. En WordPress (usando el tema Twenty Eleven como ejemplo) hacemos esto desde el editor en el archivo header.php, incorporando la línea de código antes de </head>.

El siguiente paso es incluir la tipografía en el CSS. En WordPress editamos style.css y buscamos “15px” Eso nos debería llevar rápidamente a esta regla:

body, input, textarea {
 color: #373737;
 font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
 font-weight: 300;
 line-height: 1.625;
}

Ahí editamos la propiedad font. Quedaría así:

body, input, textarea {
 color: #373737;
 font: 15px  'New Rocker', cursive;
 font-weight: 300;
 line-height: 1.625;
}

Con eso todo nuestro sitio WordPress quedará con la tipografía escogida.

Es así de simple :)

Recordemos que también podemos utilizar otras tipografías web, como las de Adobe.

¡Saludos!

url: http://www.miedito.org

Deja una respuesta

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Salir /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Salir /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Salir /  Cambiar )

Conectando a %s