Utilizar cualquier tipografía con @font-face en Blogger

Imagina que diseñas un sitio web, ahora imagina que utilizas un tipo de letra extravagante y te queda fantástico, pasa el tiempo y visitas tu página desde otro ordenador y, ¡sorpresa! la fuente tipográfica es Arial, Times New Roman o cualquier otra menos la que elegiste, ¿por qué? esto ocurre debido a que la computadora del visitante no tiene la fuente instalada.

Hay 4 soluciones:

1. Solicitar a los visitantes que instalen nuestra maravillosa fuente tipográfica (bueno, realmente no creo que sea una solución).
2. Utilizar Scripts (los cuales son... no muy ligeros por no decir pesados)
3. Usar las Google Font API.
   
4. Usar CSS (el método más fácil en una página web "normal", pero complicado en Blogger).

---

Iván me pregunta cómo usar la fuente Avatar en su blog de Blogger usando CSS, y como un blog viene siendo como un diario, contaré lo que fui aprendiendo y trataré de explicarlo de manera simple, entendiendo que simple no implica que sea fácil.

@font-face es una propiedad con la que podemos usar cualquier tipografía sin necesidad de tenerla instalada, esto es poco conocido pero no es nada nuevo, ha sido implementada en Internet Explorer desde la versión 5 usando el formato de fuentes Embedded Open Type (.eot).

Directrices para comentar

Sus comentarios son siempre apreciados aquí en Estado Avatar, pero unos son más apreciados que otros por varias razones, por favor lea esto.

Esta publicación no es para dar normas ni leyes estrictas, son más bien recomendaciones que se basan más en el sentido común, incluyendo escasas restricciones.

Antes de publicar un comentario

• Antes de dejar un comentario para preguntar algo sobre Avatar, Blogger u otro tema use el buscador de la barra lateral y/o lea Preguntas y Dudas Frecuentes.
• Si el propósito de su comentario es saludar al blog o a mí, deje su comentario aquí y diga Hola.
• Comente con su cuenta Google/Blogger u OpenID, si no dispone de alguna use un nombre cualquiera.
• Al reportar un error en el blog por favor trate de ser lo más específico, de preferencia en el post donde se detecte dicho error.
• Cuando deje un comentario en algún post preguntando algo regrese a ese mismo post para ver lo que he contestado.
• Evite hacer la misma pregunta en varios posts, yo borro comentarios duplicados.
• Yo no hago intercambio de enlaces o banners, pero puede solicitar su espacio en mi faviconera gratis.
• Para contactar conmigo deje un comentario en cualquier publicación, usando el formulario de contacto o mandándome un e-mail y yo le atenderé a la brevedad.
• Trate de que su comentario esté relacionado con el tema del post en que lo publica.

Redacción

En la redacción usted es libre de escribir como mejor le convenga, pero tome en cuenta esto:

• Sea coherente.
• Evite usar expresiones y palabras de uso local, principalmente para que yo entienda y no se lleve a malas interpretaciones con otros comentaristas.
• Limite el uso de un lenguaje soez. Ocacionalmente tolero ciertas palabrotas, pero no los insultos.
• Trate de ser ortográficamente correcto.
• Evite escribir todo en letras mayúsculas, muchas personas lo concideran al equivalente de gritar en lenguaje escrito.
• Uso adecuado de las etiquetas <i> y <b>, úselas en palabras que concidere importantes o muy relevantes.
• Igualmente que <i> y <b>, use la etiqueta <a> cuando concidere que el sitio que enlaza es relevante.
• Evite un comentario de tipo "Está muy bueno tu blog, el mío es ...", yo siempre veo el perfil de quien me comenta y visito su blog.
• Recomiendo que evite publicar su dirección de correo electrónico, incluso si quiere contactar conmigo eso no es necesario.

Lo que no está permitido

Curiosamente coincido con la Política de contenido de Blogger.

Evite que su comentario tenga relación con:

• Contenido para adultos
• Cualquier cosa que valla en contra de la Seguridad infantil
• Incitación al odio
• Contenido que puede herir la sensibilidad
• Violencia
• Información personal y confidencial de terceros
• Suplantación de identidad
• Actividades ilegales
• Spam*
• Software malintencionado y virus

*Según lo que yo concidere, tranquilos rara vez borro un comentario por spam.


Y ahora sí a comentar.

Quitar el texto "Suscribirse a: Entradas (Atom)"

Muchos que tengan un blog en Blogger siempre habrán notado el típico "Suscribirse a: Entradas (Atom)" o el de "Suscribirse a: Enviar comentarios (Atom)" cuando se está en una entrada individual. Algunos lo ven antiestético y a otros como yo les da igual.

Lo más fácil es ocultarlo con CSS (ir a Diseño | Edición de HTML), añadiendo display:none a la clase feed-links de nuestra plantilla, y si no está añadirla antes de ]]></b:skin>

.feed-links {
  display:none;
}

Así, si nos arrepentimos después es fácil restaurar el cambio.


Otra forma es eliminar directamente el código que genera ese texto pero yo prefiero no hacerlo porque quizá después sea difícil de restaurar
Diseño | Edición de HTML y marcar Expandir plantillas de artilugios

<b:includable id='feedLinksBody' var='links'>
  <div class='feed-links'>
  <data:feedLinksMsg/>
  <b:loop values='data:links' var='f'>
     <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
  </b:loop>
  </div>
</b:includable>

Otra alternativa para quitar ese texto es "comentar" parte del código

<b:includable id='feedLinksBody' var='links'>
<!--  <div class='feed-links'>
  <data:feedLinksMsg/>
  <b:loop values='data:links' var='f'>
     <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
  </b:loop>
  </div> -->
</b:includable>

Solo hay que añadir lo que está en azul.

Widget: Perfil

En Blogger hay un artilugio que nos permite mostrar parte de la información personal que anteriormente hayamos añadido a nuestro perfil de Blogger.

Nos dirigimos a Diseño | Elementos de la página y click en Añadir un gadget y elegimos Perfil.
Luego podremos editarlo antes de añadirlo al blog.

*Es importante tener habilitado Compartir mi perfil o no se mostrará.

*Nombre es el Nombre mostrado que colocamos al editar el perfil y que es utilizado para firmar tus entradas del blog.

*Descripción es el texto de Datos personales que colocamos al editar el perfil.

*Población, Región/Provincia, País/territorio son otros datos que se pueden modificar editando el perfil directamente.

Toda la configuración anterior afecta a cualquier blog que tengamos.
☞ Recomiendo leer Editar perfil de usuario.

Hay cosas que sólo afectan al blog en que lo usemos:

*El título del widget que por defecto es Datos personales (no me pregunten por qué) y que podemos cambiar por cualquier otro.

*Lo de Datos personales se refiere a si mostrar o no el texto que nosotros agregamos al editar el perfil.

*Mostrar o no la Ubicación.

Ahora falta cambiar los estilos, pero eso lo dejamos para otro día.

Cuando no es coherente un comentario Mejor callar y a borrar

Bla, bla, bla, bla, bla...

Y más bla bla: Un comentario es eso; un montón de palabras que nos provoca algo, ya sea emoción, alegría, odio o cualquier cosa. Palabras que esperamos recibir y muchas que quisiéramos que no nos hubieran dicho.

No tengo algo en contra de mis comentaristas Anónimos, ni tampoco a favor. Muchos han sido sus aportes y les agradezco enormemente pero, suelo desconfiar mucho, demasiado, más por la suplantación de identidad que por otra razón.
Con usuarios de Google/Blogger u OpenID el asunto es diferente, siempre hecho un vistazo a su perfil para saber más o menos a quién me dirijo, aunque también es muy fácil crear una cuenta y ser un anónimo registrado.

Opinan, critican, saludan, preguntan, debaten. Mientras sea de una manera lógica, coherente es siempre bienvenido.
Cuando sólo sean incoherencias y comentarios imprudentes tal vez no le responda y quizá lo borre, no voy a discutir algo sin sentido.
Tranquilos, nada en el sistema de comentarios ha cambiado, los anónimos son siempre bien recibidos.