Google Web Fonts, es un directorio de fuentes fascinantes, cómo indica su denominador anglosajón, Fonts, que podemos insertar o implantar fácilmente en Blogger, y con ello, mejorar sustancialmente el atractivo de nuestro blog, mediante las fuentes instaladas en nuestra plantilla de Blogger. Éstas fuentes, también se pueden usar en diversos programas de diseño gráfico cómo Photoshop, AAA Logo, Corel Draw, etcétera. Porqué, en la Web de Google Web Fonts, se pueden descargar las fuentes seleccionadas, para luego usar las fuentes que deseas, en un programa de diseño gráfico, que te permita añadir fuentes externas. Pero éste no es el motivo del escrito de ésta entrada, el motivo lo dice el título del post, así que vayamos a implantarlo en Blogger, sigue los pasos que verás:
Primeramente escogeremos la fuente a usar en Blogger:
- Entra en Google Web Fonts.
- Y ahora selecciona la fuente que más te guste.
- Una vez escogida la fuente predilecta, le das al botón: Add to Collection.
- Cómo prueba, yo he elegido la fuente denominada Pacifico.
- Una vez presionado el botón Add to Collection, en la parte inferior se te aparecerán unos botones que dicen: Chosse, Review, y Use, seleccionar el botón Use, o hacer clic en dicho botón.
- Ahora debes de copiar y pegar el siguiente código que verás seguidamente:
- Y lo debes de pegar en tu plantilla de Blogger, entre las etiquetas <head> y </head>.
- Cabe advertir que también es extrapolable y se puede aplicar en una web, igualmente.
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
Y en el segundo código CSS, nos dice, cómo integrar la fuente:
font-family: 'Pacifico', cursive;
Este código deberás de pegarlo en donde desees, si quieres que esta fuente afecte a cada una de las secciones de tu blog, pégalo en las zonas como content-wrapper, header-wrapper, main-wrapper, sidebar-wrapper, footer-wrapper, h1, h2, h3, h4, h5, h6, o "p" etcétera.
Y ahora veremos un ejemplo de integración en el blog:
h1 { font-family: 'Pacifico', arial, serif; }Ejemplo de la fuente usada, es decir "Pacifico" en un Lorem Ipsum:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu neque quis eros sodales placerat. Vestibulum non dapibus neque. Cras tristique nulla ac nulla ultricies egestas. Morbi sed consectetur felis, non dictum risus. Sed tincidunt placerat tellus nec venenatis. Morbi sit amet accumsan erat, vestibulum luctus ante. Maecenas tellus odio, porta a magna nec, rhoncus faucibus nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean vel porttitor lectus. Proin condimentum justo ac elit viverra, at fermentum felis mattis.
Aliquam erat volutpat. Nunc mollis tempus magna quis tincidunt. Phasellus porttitor placerat interdum. Quisque velit augue, tempus at faucibus id, consectetur eu arcu. Integer hendrerit non mi in tempor. Nulla nec varius nulla. Sed faucibus sapien rhoncus, congue risus nec, sollicitudin tortor. Mauris cursus sed ipsum at posuere. Nam varius dolor in consequat bibendum.
Quisque eu neque consequat, vehicula tortor vel, egestas tellus. Nulla rutrum erat sit amet lectus lacinia malesuada. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer accumsan id arcu nec tincidunt. Phasellus vestibulum dui sit amet turpis semper, quis aliquet sem pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed dictum lacus rhoncus urna molestie facilisis sit amet a nulla. Aenean in malesuada nunc.
Integración de la fuente en Blogger, según secciones:
- Entra en Blogger.
- Y ahora ves a Plantilla & Editar HTML.
- Puedes añadir; font-family: 'Pacifico', sans-serif !important; en las secciones que desees.
- Por ejemplo; lo puedes añadir en #main-wrapper (sección entradas), #sidebar-wrapper (columna lateral), #footer-wrapper (pie de página), en el body {font-family: "Tu fuente" !important;}, en parráfos "p" o en "h1".
- Las anteriores secciones, las encontrarás antes de la etiqueta ]]></b:skin>:
- La secciones pueden cambiar de nombre o no encontrarlas cómo las ves en el ejemplo :
- En esas secciones una vez encontradas, añadirás el font-family: 'fuente', arial, cómo los ejemplos:
#main-wrapper {
font-family: 'Pacifico', arial, serif; /* Sección entradas */
}
#sidebar-wrapper {
font-family: 'Pacifico', arial, serif; /* Sidebar o Columna Lateral */
}
#footer-wrapper {
font-family: 'Pacifico', arial, serif; /* Footer o pie de página */
}
body {font-family: 'Pacifico', arial, serif, !important;} /* Cuerpo de la página */
.post-title {font-family: 'Pacifico', arial, serif, !important;} /* Títulos de los posts */
h1 {font-family: 'Pacifico', arial, serif, !important;} /* Selector H1 */
p {font-family: 'Pacifico', arial, serif, !important;} /* Parráfos */Ahora, os desvelaré un truco para que la fuente cargue más rápido:
- En el siguiente código de la fuente, extrae la URL de la fuente:
- Por ejemplo: "http://fonts.googleapis.com/css?family=Pacifico".
- Ese enlace de la fuente, lo añades a la barra de direcciones de tu navegador.
- Una vez hecho eso, verás un código CSS @font-face que es una propiedad CSS3.
- Pues bien, copia ese código de la fuente, en éste caso es "Pacifico".
- Y lo pegas en la sección de tu blog de Blogger, antes de ]]></b:skin>
- Esto hará que la carga de la fuente sea mucho más rápida y alojarás la fuente en tu plantilla.
- Sin la necesidad de usar un enlace externo de otra web y así evitas los redireccionamientos de destino.
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url(http://themes.googleusercontent.com/static/fonts/pacifico/v5/yunJt0R8tCvMyj_V4xSjafesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}Google Web Fonts
Get free premium widgets for your blog and website.
Puzzle Bobble
Karate Blazers
Puzzle De Bloques
Magical Cat Adventure