Una de las primeras cosas que debemos tener en cuenta sin duda es la tipografía principal de nuestro blog, sobre todo si queremos hacer un buen proyecto con nuestro sitio.
Implementar Google Font es muy sencillo, primero vamos a tener en cuenta ciertas cosas:
Lo ideal sería usar un par de fuentes o quizás tres como mucho, ya que no es recomendable usar tantas debido a que la carga de nuestro espacio se hará muy lento, con 2 o 3 la carga será excelente.
La primera y la más importante es sin duda la fuente que usaremos en el post-body que es en si el cuerpo de cada post.
La segunda fuente será la que identificará los encabezados de los títulos <h1> <h2> <h3> etc.
Se puede usar una tercera fuente para algunas otras cosas como: enlaces, archivos del blog, etiquetas etc. Pero esto es opcional.
Bien ya que tenemos en cuenta esas tres cosas vamos a implementar Google Font, lo primero que haremos es ir hasta el sitio oficial Google Font
Implementar Google Font es muy sencillo, primero vamos a tener en cuenta ciertas cosas:
Lo ideal sería usar un par de fuentes o quizás tres como mucho, ya que no es recomendable usar tantas debido a que la carga de nuestro espacio se hará muy lento, con 2 o 3 la carga será excelente.
La primera y la más importante es sin duda la fuente que usaremos en el post-body que es en si el cuerpo de cada post.
La segunda fuente será la que identificará los encabezados de los títulos <h1> <h2> <h3> etc.
Se puede usar una tercera fuente para algunas otras cosas como: enlaces, archivos del blog, etiquetas etc. Pero esto es opcional.
Bien ya que tenemos en cuenta esas tres cosas vamos a implementar Google Font, lo primero que haremos es ir hasta el sitio oficial Google Font
Ahora solo hay que elegir la fuente de nuestro gusto, una vez elegida pichamos el botón a la derecha que dice “add to collection” esto si queremos guardar la fuente, hecho esto pinchamos el botón pequeño que dice “Quick-use”.
A continuación nos mostrará 4 pasos el primero es la elección del grosor de de la fuente, esto es opcional así que si quieren lo omiten.
La segunda muestra el tipo de carácter que vendrá en la fuente, como el nuestro es latín lo dejamos tal cual como está.
Ahora el primer cogido será el que cargue la fuente en el blog, copiamos el código que es algo como esto:
<link href='http://fonts.googleapis.com/css?family=Play:400,700' rel='stylesheet' type='text/css'>
Ahora lo que haremos es ir hasta la plantilla, y buscar esta línea <head>
Ahora vamos a agregarle una llave de cierre al final del código, ya que de esta manera el blog podrá leerlo. El ejemplo es el marcado en rojo
Queda de esta manera:
<link href='http://fonts.googleapis.com/css?family=Play:400,700' rel='stylesheet' type='text/css'/>
Y lo pegamos justo debajo de esta línea <head>
Bien con eso ya tenemos la fuente en el blog, ahora el último paso es buscar esta línea: .post-body {
Y justo debajo pegamos el estilo que nos provee Google Font.
Como dijimos ese es el cuerpo del post, ahí ponemos modificar el color del texto, el alto y el porcentaje, en esa parte pegamos el estilo, quedaría algo como esto:
.post-body {
font-size: 110%;
line-height: 1.4;
position: relative;
color: #fff;
font-family: 'Play', sans-serif;
}
Guardamos la plantilla y listo con eso ya tenemos la fuente; para otras fuentes se hace el mismo procedimiento, si es para los títulos deben buscar las líneas correspondientes ejemplo: h1.post-title, .comments h4 etc, y justo debajo pegar el estilo que provee Google Font, con eso ya tenemos fuentes estéticas, livianas y atractivas.
¿Fácil? Yo creo que sí.
No hay comentarios:
Publicar un comentario