Font-Family en CSS y CSS3

Para definir bien una fuente en CSS y CSS3 lo ideal es usar Familiy Font tal y como te explicamos en este post, ya que no todas las computadoras tienen siempre disponible todas las fuentes que nosotros estamos usando. Aprender a usar el código CSS de forma correcta es necesario incluso aunque uses otras técnicas como Font Face para suministrar las fuentes al navegador, ya que estos sistemas pueden fallar y nos interesa que nuestro blog se vea siempre bien.

Font-Family es un atributo del código CSS que se mantienen en CSS3 igual que en la anterior variante CSS2 sin que haya habido ninguna transformación sobre su sintaxis (la forma en que escribimos las ordenes) o su función. Si por ejemplo queremos señalar el tipo de fuente que vamos a usar para un párrafo en CSS, aplicaremos un código como este.

p { font-family:"Times New Roman",Georgia,Serif; }

Para que nadie se pierda lo repasamos todo desde el principio.

• P, es el selector. Se refiere al párrafo, al trozo del documento que estamos dando formato. Si en vez de p fuera body entonces estaríamos aplicando la propiedad Font-Family a todo el documento.
• Font-Family es la propiedad.
• "Times New Roman",Georgia,Serif; son tres valores que les asignamos a la propiedad. Como ves los diferentes valore se separan por comas, porque en el caso de que el primero no lo tenga el navegador, seguirá con el segundo y si no es posible cogerá el tercero, y así sucesivamente.

Los valores que puede tener la propiedad Font-Family son de dos tipos, o bien le indicamos una fuente concreta, como Times New Roman, Arial, Georgia Serig, Trebuchet, Impact, Comic Sans... o bien le indicamos una de las 5 familias que existen. Estas 5 familias son las de letras sin serifa, con serifa, monoespacio, imitando a la escritura y de tipo decorativo. Lo normal es escribir de 1 a 4 fuentes diferentes que sean de la misma familia (serán más parecidas) y sólo en la última posición se escribe el código de la familia que son los siguientes.

• sans-serif
• serif
• monospace
• cursive
• fantasy

¿Cómo podemos aplicar este conocimiento en Blogger? Depende de como trabajes con tu código CSS de Blogger.

1. Hace poco explicamos que las Variable Definitions son características que podemos cambiar desde el editor de las plantillas, la cuestión es que hacerlo así tiene una limitación, sólo puedes asignar una única fuente al texto.
2. En cambio si accedes a la plantilla para modificar las Variables Definitions puedes asignar las fuentes que quieras, separadas por comas, y finalmente asignas una familia para que así el tipo de fuente empleado sea siempre parecido al diseño original del blog.
3. Si has quitado las Variables Definitions y trabajas directamente con el CSS3 la aplicación será igual que con cualquier otra página Web o blog, escribiendo la propiedad Font-Family para todos los selectores que quieras dar formato.

Imagen: sin copyright.