WordPress: Cómo cambiar el tipo y el tamaño letra…

Lo primero, pongamos un poco de música para amenizar el post…

Cuando empecé con esto de WordPress estuve buscando la manera de cambiar el tipo de letra, y el tamaño. No es algo que en lo que tuviera mucha suerte. Sabía qué podía hacerlo, porque cuando se copia desde otros lados, muchas veces mantiene el estilo, por lo menos, una parte del texto. Aún así, no es fácil. Quiero decir, que muchas veces las letras más grandes se montan entre sí y al final es peor el remedio que la enfermedad.

Pero soy “borrica” por naturaleza y hay cosas que no paro hasta que las consigo hacer. Yo no sé de programación, no sé de códigos, pero al final, a fuerza de repetición (y sabiendo algo de inglés), pues he terminado por “descubrir” cómo leches hacerlo.

Ahora intentaré hacer un tutorial, explicando lo más claro posible cómo lo podéis hacer vosotros, sí queréis.

Primero decir que lo busqué y varias veces en internet, pero la mayoría decían que sólo se puede si compras una mejora de WordPress.

Hoy, buscando otra cosa, cómo no, pues he caido en la página de ayuda de WordPress que explica cómo se puede hacer todo esto. Los que sepáis inglés puede que no necesitéis seguir leyendo ya este post. Si yo he podido, ¡vosotros también!

Pero para los que no sepáis inglés o que al hacer lo que ahí os dice, no os sale, pues yo sigo…

Lo primero que nos dice la página es que se puede sin ningún tipo de problema si se compra la mejora “Custom CCS” lo podréis cambiar sin mayor problema. Lo segundo es que no se pueden cambiar el tipo de letra por defecto del tema, ni tampoco el aspecto, por eso yo no puedo cambiar, por ejemplo, el tipo de letra, tamaño y color del Título del post. Los temas están prefijados.

Pero lo que sí que podemos es cambiarlo en el texto dentro del post. Pero la única manera es hacerlo escribiendo “código html”.

¿Cómo se hace eso? pues lo primero es pinchar dónde pone “HTML” a la hora de escribir un post. Ahí veremos que las opciones que tenemos cambian a otro tipo, que son menos intuitivas y menos gráficas.

Es ahí, dónde tendréis que escribir el código. Si queremos cambiar el tamaño escribiremos:

Estoy cambiando el tamaño dela letra

<span style=”font-size:12px;”>Estoy cambiando el tamaño de la letra</span>

Estoy cambiando el tamaño de la letra

<span style=”font-size:20px;”>Estoy cambiando el tamaño de la letra</span>

Estoy cambiando el tamaño de la letra

<span style=”font-size:30px;”>Estoy cambiando el tamaño de la letra</span>

Ups…¡Ya se jodió! cómo vemos en la frase del código, corremos peligro de que la letra se nos “amontone” pero para todo hay solución, así que tranquilos, luego nos ocuparemos de eso.

Ahora vamos a por el tipo de letra:

Estoy eligiendo el tipo de letra Comic Sans Ms

<span style=”font-family: Comic Sans MS;”>Estoy eligiendo el tipo de letra Comic Sans Ms</span>

Estoy eligiendo el tipo de letra Arial

<span style=”font-family: Arial;”>Estoy eligiendo el tipo de letra Arial</span>

Estoy eligiendo el tipo de letra Trebuchet Ms

<span style=”font-family: Trebuchet Ms;”>Estoy eligiendo el tipo de letra Trebuchet Ms</span>

Sí, ya sé lo que me vais a decir, que este código tan en pequeñito, no se ve, pero era para no mezclar ambos códigos. Ahora los voy a volver a poner, haciendo la letra más grande. De ese modo ya tendréis los dos códigos juntos:

Estoy eligiendo el tipo de letra Comic Sans Ms

<span style=”font-size:20px;font-family: Comic Sans MS;”>Estoy eligiendo el tipo de letra Comic Sans Ms</span></p>

Estoy eligiendo el tipo de letra Arial

<span style=”font-size:20px;font-family: Arial;”>Estoy eligiendo el tipo de letra Arial</span></p>

Estoy eligiendo el tipo de letra Trebuchet Ms

<span style=”font-size:20px;font-family: Trebuchet Ms;”>Estoy eligiendo el tipo de letra Trebuchet Ms</span></p>

Bien, llegados hasta aquí ya tenemos casi todo lo necesario. El problema principal, es cómo sabemos qué tipo de letra queremos así, cómo su tamaño y por supuesto, que no se nos junten…

La solución viene dada también en el enlace que nos suministtra la página de ayuda de WordPress:

Typetester

En esa página, podemos jugar con el tipo de letra, el tamaño, el color también pero no hace falta dado que eso sí que nos deja wordpress de forma más intuitiva.

En esa página viene un texto, pero si preferimos, podemos cambiarlo al que queramos para hacer nuestras pruebas (aquí interesa que pongáis textos que contengan la “ñ”, la “ç” o palabras con acentos, dado que no todos los tipos de letras tienen todos los caracteres), Luego elegís un tipo de letra, que puede ser de los más habituales o si queréis otro, está en la segunda selección. El tamaño lo cambiáis en “size”, en esta página utiliza una unidad diferente al “px”, pero cómo os va mostrando cómo quedaría el texto, luego sólo tendréis que poner el número que ahí os dé, y cambiando “px” por “em”. Y atención, lo de que no se monten las letras, lo tenéis que cambiar en “leading”. Tendréis que hacer probatinas… aquí os pongo un ejemplo con todo el codigo…

Y…. dicho y hecho… y con esto y un bizcocho, nos vemos mañana a las ocho…

<span style=”font-size: 3.6em; font-family: Comic Sans Ms; line-height: 1.0em;”>Y…. dicho y hecho… y con esto y un bizcocho, nos vemos mañana a las ocho…</span>

En la página hay una facilidad que os hace un resumen del código que tendría dicha letra que se obtiene pinchando dónde pone “Get CSS 1º, 2º, 3º”, siendo primero, segundo y tercero, las tres columnas dónde puedes ir cambiando las diferentes selecciones.

En fins… que al final, no sé si os he liado más o menos, que puede resultar un poco complicado, pero en cuanto lo has hecho un par de veces, “está chupao”…

Mmm, se me olvidaba, si pones todos los códigos, empiezas a escribir y en principio no quieres cambiar ninguna de las opciones, puedes darle a visual y seguir a partir de allí. Cuando le demos a la barra espaciadora automáticamente, incluirá el código. Es más pesado, si lo que haces es pegar un texto sin formato. Ahí tendrás que ser tú el que vaya copiando en cada párrafo, el código.

Y una última cosa… siempre puedes ir viendo como te queda al darle a visualizar. Ayuda a hacerse una composición de lugar.

Puaj, jijiji, otra cosa más… cuando des con un código que te guste, siempre te lo puedes guardar en un fichero txt (sin formato), para sólo tener que ir a pegarlo luego (o en un borrador, dentro del blog)

Ahora sí… ¿alguna duda o pregunta?…