Cómo poner en Blogger fuentes personalizadas
Seguro que alguna vez os habéis preguntado cómo podríais usar vuestras tipografías preferidas en
vuestro blog de Blogger. Me refiero a esas que os descargáis
para usar en vuestras láminas o en vuestros diseños de scrapbooking
digital pero que no
están disponibles en Blogger. Pues aquí y ahora os
traigo la respuesta ;)
Resulta que en Blogger, en principio, solo se pueden usar
las tipografías de Google Fonts Directory.
Hay bastantes y muchas chulas. Sabéis cómo instalar las fuentes de Google
¿verdad? Bueno, por si acaso, os cuento resumidamente cómo usarlas.
Lo primero sería entrar en Google Web Fonts y seleccionar la que más os guste. Después, hacéis
click en el botón del cuadro con la flechita
("Quick-use") y os copiáis el
código (de la pestaña estándar) que aparece en el Apartado 3.
Esta línea la tendríais que incluir en
vuestra plantilla de Blogger justo debajo de <head>. En el código del Apartado 4
tenéis el nombre de la fuente
para que lo podáis incluir en vuestra página de estilo (CSS) y así usar vuestra
nueva fuente donde queráis. No me extiendo más. Si queréis, en otra entrada os
cuanto como hacerlo con más detalle.
Listo, ahora os cuento lo realmente interesante:
Cómo usar vuestras propias fuentes
en el blog de Blogger
Supongamos que vuestra tipografía favorita no está entre las fuentes de Google Fonts, o que, por ejemplo, queréis utilizar vuestra propia tipografía (o la mía) para los títulos de las entradas de vuestro blog.
Es muy fácil, ya veréis. Tenemos que utilizar la regla CSS @font-face. Con @font-face podemos decirle a los
navegadores (Firefox, Chrome, Explorer, Opera)
que vamos a utilizar una fuente subida a un servidor en nuestro blog. El
problema es que no todos los navegadores usan el mismo formato de fuentes. Así
que tendremos que convertir nuestra fuente a todos los formatos que usan los
navegadores actuales, tanto para ordenadores de sobremesa como para
móviles/tabletas. Ahora os lo explico paso a paso.
Antes de ponernos a trastear con el html, siempre es conveniente hacer un backup de nuestra plantilla.
Paso 2: Elegir la fuente que queremos utilizar
Os recomiendo que le echéis un vistazo a Fontsquirrel. En esa web tenemos muchísimas fuentes. Aunque antes de descargarlas para utilizarlas en vuestro blog, aseguraos de que no infringís su licencia de uso (copyright). Las fuentes tipográficas, como las imágenes, tienen derechos de autor. Una vez os descarguéis la fuente, veréis que viene en formato OTF o TTF. Sin problemas.
Paso 3: Generar el kit de @font-face
En este paso, generaremos el código html de
@font-face que tenemos que poner en nuestra plantilla y los
formatos extra que necesitamos de la fuente. ¿Y cómo lo hacemos? Pues primero
vamos al generador
webfont de Fontsquirrel. Ahí, añadimos nuestra fuente, hacemos click en la pestaña del acuerdo
legal, y descargamos el "kit" de fuentes.
Listo.
Dentro de la carpeta comprimida que descargamos tenemos todo lo necesario para
seguir.
Paso 4: Subir las fuentes a un servidor
Si tuviésemos nuestro propio dominio web, este paso sería inmediato. Sin
embargo, en Blogger no tenemos acceso a los servidores de Google. Así que
tenemos que emplear uno alternativo.
Mi recomendación es usar una carpeta pública en vuestra cuenta Dropbox. Sin no tenéis una ¡no sé a qué
esperáis! Aquí os explican cómo hacerlo. Este
servicio muy estable, por lo que nuestras fuentes siempre estarán accesibles. En vuestra carpeta pública tenéis que subir cuatro de los
archivos del "kit" que habéis generado antes. En
concreto, los archivos de las fuentes EOT, SVG, TTF y WOFF.
Una vez subidos, si hacéis click con el botón derecho del ratón sobre cada uno
de los archivos, veréis como primera opción "copiar link público".
Hacedlo con los cuatro y copiad las direcciones en algún sitio (por ejemplo en
el bloc de notas), ya que ahora las necesitaremos para editar nuestro código
@font-face.
Paso 5: Editar código @font-face
Dentro de la carpeta descomprimida veréis un archivo stylesheet.css. En este archivo está el código CSS que necesitamos
incluir en nuestra plantilla. Lo primero que hay que hacer es actualizar las direcciones url de los archivos de los
cuatro formatos de la fuente. Para ello tenemos que substituir
cada uno de los nombres de la fuente junto con su extensión (.woff,
.ttf, .svg y .eot) por las correspondientes direcciones url
que hemos anotado antes en el bloc de notas.
En el ejemplo de abajo deberíamos substituir el código en azul por las correspondientes direcciones url de vuestra carpeta pública de Dropbox:
@font-face {
font-family: 'pacificoregular';
src: url('pacifico-webfont.eot');
src: url('pacifico-webfont.eot?#iefix') format('embedded-opentype'),
url('pacifico-webfont.woff') format('woff'),
url('pacifico-webfont.ttf') format('truetype'),
url('pacifico-webfont.svg#pacificoregular') format('svg');
font-weight: normal;
font-style: normal;
}
font-family: 'pacificoregular';
src: url('pacifico-webfont.eot');
src: url('pacifico-webfont.eot?#iefix') format('embedded-opentype'),
url('pacifico-webfont.woff') format('woff'),
url('pacifico-webfont.ttf') format('truetype'),
url('pacifico-webfont.svg#pacificoregular') format('svg');
font-weight: normal;
font-style: normal;
}
Paso 6. Incluir código @font-face en la
plantilla de Blogger
Para añadir el código que hemos generado a vuestra plantilla html, nos tenemos
que dirigir a Blogger > Plantilla > Editar Html. Ahí copiaremos nuestro
código CSS justo encima de ]]<b:skin>
y guardaremos.
Ya está, ¡ya casi hemos acabado! Ya podemos usar nuestras nuevas fuentes. ¿Y
cómo lo hacemos? Seguid leyendo, aventureras...
Paso 7: Usar la nueva tipografía en el blog
Para usar la tipografía en el blog, tenemos que especificar en nuestra plantilla html dónde queremos usar la nueva fuente. En el código que hemos copiado en la plantilla encontraremos el nombre que tenemos que emplear para utilizarla (la fuente). El nombre es el que aparece junto a font-family. En mi caso, el nombre de la tipografía es "pacificoregular" (vosotras tendréis otro nombre).
Si ponemos el nombre de la fuente en el atributo font-family de las etiquetas (h1, h2, h3, h4) de nuestra plantilla todos los elementos que usen esas etiquetas automáticamente usarán la fuente.
Si por ejemplo queréis usarlo para los títulos, pues buscáis en la plantilla h3.post-title y cambiáis el valor de font-family por el nombre de vuestra fuente. En mi ejemplo sería:
h3.post-title, .comments h4 {
font-family: 'pacificoregular', cursive;
font-weight: 400;
font-size: 22px;
margin: .75em 0 0;
}
Si no os queréis marear con etiquetas, podéis, por ejemplo, añadir el siguiente código encima de ]]<b:skin> para utilizar siempre vuestra fuente en el texto de vuestras entradas:
.post-body,.post {font-family: pacificoregular, verdana, sans-serif;}
¡Ah! es una buena costumbre incluir fuentes alternativas. Así, en caso de que por algún motivo nuestra fuente no esté disponible, el navegador utilizará alguna de las que le dejamos como opción. En el ejemplo anterior veis que he puesto "verdana" y "sans-serif" como fuentes backup.
Cómo usar fuentes personalizadas en tu blog
Cómo cambiar la fuente de
las entradas en blogger.
En este tutorial vamos a aprender cómo podemos cambiar la tipografía de los títulos de las entradas de blogger para personalizar nuestro blog y que queden más bonitos.
En Google Fonts disponen de un montón de fuentes que puedes utilizar gratis para tu blog, (también las puedes descargar si quieres utilizarlas en programas de edición gráficos).
Lo primero es entrar a la página de google fonts y elegir una tipografía que te guste, entonces haces click sobre el botón de color azul de la derecha que dice Add to collection, al hacer esto en la parte inferior de la página te mostrará el nombre de la fuente añadida a tu colección (parte izquierda inferior) y en el lado derecho tendrás tres botones como los de la imagen siguiente:
En este tutorial vamos a aprender cómo podemos cambiar la tipografía de los títulos de las entradas de blogger para personalizar nuestro blog y que queden más bonitos.
En Google Fonts disponen de un montón de fuentes que puedes utilizar gratis para tu blog, (también las puedes descargar si quieres utilizarlas en programas de edición gráficos).
Lo primero es entrar a la página de google fonts y elegir una tipografía que te guste, entonces haces click sobre el botón de color azul de la derecha que dice Add to collection, al hacer esto en la parte inferior de la página te mostrará el nombre de la fuente añadida a tu colección (parte izquierda inferior) y en el lado derecho tendrás tres botones como los de la imagen siguiente:
Fíjate que viene marcada por defecto la opción Choose pero tenemos que elegir la opción Use.
La siguiente pantalla te dará una serie de pasos, tienes que ir al paso 3 donde hay un código como el de la imagen siguiente.
- Antes de copiar el código abre el panel de edición de blogger y ve a Plantilla, después pincha en editar html y busca la etiqueta <head> que está casi al principio del código html.
- Cuando encuentres la etiqueta copia y pega justo debajo de ella la línea de código nueva, pero antes de darle a guardar tienes que poner al final de esta nueva linea que has pegado una barra / para cerrar la etiqueta, justo después de la palabra css' (ver foto abajo).
- Guardamos la plantilla.
En el panel de google fonts (paso 4) nos queda otra línea de código que tenemos que usar pero no la copies todavía (ver foto):
Esta línea de código la tenemos que integrar en nuestro css, para ello vamos de nuevo en el menú de la izquierda a Plantilla, después le damos al botón Personalizar, Avanzado, Añadir CSS, y en el recuadro de la derecha tienes que pegar el siguiente código:
h3.post-title {
font-family: 'Amatic SC';
}
Este código de arriba sirve para cambiar y personalizar sólo el título de tu post
Si lo que quieres es usar un tipo de letra para todo el blog el código que tienes que poner en el css es el siguiente:
font-family: 'Amatic SC';
}
Este código de arriba sirve para cambiar y personalizar sólo el título de tu post
Si lo que quieres es usar un tipo de letra para todo el blog el código que tienes que poner en el css es el siguiente:
body {
font-family: 'Amatic SC';
}
Para cambiar el tipo de letra de la cabecera hay que usar el siguiente:
.header h1 {
font-family: 'Amatic SC';
}
Para cambiar el tipo de letra del cuerpo de las entradas hay que usar el siguiente:
.post-body,.post {
font-family: 'Amatic SC';
}
(El código es lo que va en rojo, lo que va en color negro es el nombre de la tipografía.)
Ahora lo siguiente es sustituir donde pone font-family... por el código
que te da en el paso 4 google fonts y que contiene el nombre y los datos de la
fuente que tu has seleccionado.
Si todo ha ido bien ya puedes previsualizar tu blog y tendrás tu fuente funcionando. Guarda los cambios haciendo click en el botón de aplicar al blog.
Si todo ha ido bien ya puedes previsualizar tu blog y tendrás tu fuente funcionando. Guarda los cambios haciendo click en el botón de aplicar al blog.
(http://trucos-diseno-web.euroresidentes.com/2013/06/como-usar-fuentes-personalizadas-en-tu.html)
