Cambiar la fuente en WordPress

Hay varias formas de cambiar el tipo de letra de WordPress. Por una parte, es posible formatear bloques de texto completos o secciones in­di­vi­dua­les desde el editor. Aunque esto es fácil, por otra parte, a la larga conduce a que el sitio web tenga un aspecto in­cohe­re­n­te.

Es mejor definir la ti­po­gra­fía de todo el sitio web en la plantilla de diseño. Esto garantiza un diseño homogéneo y atractivo. Sin embargo, se necesitan derechos de ad­mi­ni­s­tra­dor y ex­pe­rie­n­cia para realizar estos cambios. Te mostramos la mejor manera de cambiar la ti­po­gra­fía en WordPress.

Veamos el caso más sencillo: cambiar la fuente de un sitio web de WordPress que ya existe. No­r­ma­l­me­n­te, la plantilla utilizada en una de las páginas web del sitio web fija un tipo de letra para todo el texto de esa página. Su­po­n­ga­mos que se trata de una ti­po­gra­fía genérica como sans serif y que ahora queremos cambiar la fuente de los en­ca­be­za­dos a serif. En WordPress, esto requiere dos pasos:

1. Definir la fuente de los elementos HTML en CSS
2. Integrar el código CSS en WordPress

Para definir el tipo de letra de un elemento HTML, uti­li­za­mos la propiedad 'font-family' de CSS. La regla CSS '@font-face' te permite definir una ti­po­gra­fía e im­po­r­tar­la para usarla en tu sitio web.

Veamos primero cómo se puede definir la fuente de un elemento HTML en CSS. En nuestro ejemplo, queremos utilizar un tipo de letra serif para los en­ca­be­za­dos H1 a H6. Para ello uti­li­za­mos el siguiente código:

Para añadir una fuente a un sitio web, se necesita una fuente web. La fuente web se puede obtener di­re­c­ta­me­n­te de Google Fonts o de una pla­ta­fo­r­ma similar. Para ello, basta con in­tro­du­cir en WordPress una hoja de estilos adicional hosteada en Google. Sin embargo, pueden surgir problemas de pro­te­c­ción de datos. De­pe­n­die­n­do del método utilizado para integrar la fuente web, el re­n­di­mie­n­to del sitio web puede verse afectado. Por lo tanto, suele ser pre­fe­ri­ble hostear las fuentes web dentro de la carpeta de pla­n­ti­llas del servidor de WordPress.

Hostear uno mismo las fuentes web parece más fácil de lo que en realidad es. Lo mejor es utilizar una he­rra­mie­n­ta es­pe­cia­li­za­da que genere todos los formatos comunes de fuentes web a partir de los archivos de fuentes cargados, in­clu­ye­n­do el código CSS necesario. A lo largo de los años, Font Squirrel se ha es­ta­ble­ci­do como el estándar. Como al­te­r­na­ti­va, se puede utilizar un plugin como Use Any Font para añadir otra fuente a WordPress.

Hemos compuesto una tabla resumen en la que se muestran los métodos más co­mú­n­me­n­te uti­li­za­dos para añadir una fuente a WordPress. Todos ellos vienen con sus propias ventajas e in­co­n­ve­nie­n­tes:

Hasta ahora hemos hablado de cómo cambiar la fuente en WordPress. Veamos ahora los métodos que podemos utilizar para cambiar el tamaño y el color de la fuente en WordPress. Bá­si­ca­me­n­te uti­li­za­mos el mismo pro­ce­di­mie­n­to que hemos empleado para cambiar la fuente en WordPress:

1. Localizar el elemento objetivo e ide­n­ti­fi­car el selector
2. Crear un prototipo de reglas CSS en el inspector web
3. Integrar las pro­pie­da­des CSS en WordPress

Las pro­pie­da­des CSS más im­po­r­ta­n­tes para cambiar el tamaño y el color de una fuente en WordPress son las si­guie­n­tes:

Veamos de nuevo el caso más sencillo: queremos cambiar el tamaño de la fuente de todo el sitio web de WordPress. Para ello, uti­li­za­mos el elemento root de HTML como selector con un po­r­ce­n­ta­je para el tamaño de la fuente. De este modo, el cambio de tamaño se puede entender de forma intuitiva:

• “Hacer la fuente un 10% más grande”: html { font-size: 110%; }
• “Hacer la fuente un 10% más pequeña”: html { font-size: 90%; }

¿Cómo se procede ahora para ajustar el tamaño de la letra de algunos elementos? De nuevo, tomemos como ejemplo los en­ca­be­za­dos H1 a H6. Primero mostramos cómo no se debe hacer:

Aquí fallan dos aspectos: en primer lugar, se ha utilizado el píxel (“px”) como unidad absoluta. En segundo lugar, se ha escogido el tamaño de letra de cada en­ca­be­za­do de forma ar­bi­tra­ria. Esta última conduce a un diseño in­cohe­re­n­te e irregular. La­me­n­ta­ble­me­n­te, estos dos “an­ti­pa­tro­nes” se pueden encontrar en muchas de las pla­n­ti­llas de WordPress, incluso en las de pago. Es mejor utilizar unidades relativas para definir el tamaño de las fuentes. Con la unidad “rem”, al definir el tamaño uno se refiere al elemento root de HTML. Por ejemplo, definir un tamaño de letra de “2rem” significa: “el doble del tamaño normal de la fuente”.

La co­m­bi­na­ción de utilizar un po­r­ce­n­ta­je para el elemento root de HTML y Rem para todos los demás elementos de texto es perfecta en cuanto al diseño re­s­po­n­si­vo. Lo único que necesitas es un conjunto de CSS Media Queries que ajusten el tamaño de la fuente del elemento root de HTML para di­fe­re­n­tes anchos de pantalla. Todos los demás elementos de texto escalan au­to­má­ti­ca­me­n­te con él, ma­n­te­nie­n­do sus pro­po­r­cio­nes entre sí:

Queda la cuestión de saber con qué criterio se define el tamaño de los distintos elementos de texto. Como ya hemos me­n­cio­na­do an­te­rio­r­me­n­te, no es buena idea elegir valores ar­bi­tra­rios. Una buena manera de enfocarlo es uti­li­za­n­do una “escala ti­po­grá­fi­ca”. Las escalas ti­po­grá­fi­cas se inspiran en las armonías musicales y se basan en fórmulas ma­te­má­ti­cas, como la pro­po­r­ción áurea. Los tamaños de letra es­ca­lo­na­dos conforme a una escala ti­po­grá­fi­ca tienen un aspecto armonioso. Afo­r­tu­na­da­me­n­te, existen ge­ne­ra­do­res en la web que generan el código CSS necesario de forma au­to­má­ti­ca. A co­n­ti­nua­ción, te mostramos, como ejemplo, una escala ti­po­grá­fi­ca del framework “Tachyons”:

Pro­ba­ble­me­n­te ya supones que, para cambiar el color de la fuente en WordPress, no se­le­c­cio­na­mos todo el texto de una página para luego elegir el nuevo color desde el menú. En su lugar, pro­ce­de­mos de la misma manera que cuando se­le­c­cio­ná­ba­mos el tipo de fuente: definimos el color uti­li­za­n­do código CSS. Es muy típico que existan varios métodos para lograr un mismo resultado con CSS, pero no podemos entrar en detalles en todas las formas de definir el color de una fuente en CSS. Las si­guie­n­tes reglas CSS son equi­va­le­n­tes:

Como puedes ver, uti­li­za­mos el elemento HTML body con la propiedad CSS “color” para es­ta­ble­cer el color de la fuente para todo el sitio web. Todos los demás elementos de texto heredan de él. Si hace falta, podemos anular el valor del color heredado para de­te­r­mi­na­das clases de elementos. Por ejemplo, para mostrar los en­ca­be­za­dos en un gris oscuro, uti­li­za­mos el siguiente código:

Al igual que el tipo de letra, su color es un elemento de diseño esencial. En cierta medida, los colores tra­n­s­mi­ten emociones. Por eso es im­po­r­ta­n­te mantener la co­he­re­n­cia y no utilizar de­ma­sia­dos colores en una misma página web. Un diseño de colores in­cohe­re­n­te o mal adaptado da un aspecto inquieto y puede ahuyentar visitas del sitio web. En caso de duda: menos, es más.

Para que sea fácil de usar, es esencial que la relación de contraste sea lo su­fi­cie­n­te­me­n­te alta. Solo así se consigue que los textos se puedan leer sin esfuerzo. Afo­r­tu­na­da­me­n­te, se pueden obtener valores de contraste entre el texto y su color de fondo. El ya me­n­cio­na­do framework Tachyons viene con una tabla de colores bien de­sa­rro­lla­da que contiene co­m­bi­na­cio­nes de alto contraste. Si coges de ahí los valores de color más apro­pia­dos para tu propio sitio web de WordPress, no te equi­vo­ca­rás.

De­pe­n­die­n­do del editor utilizado, es posible cambiar el color de la fuente en WordPress sin CSS. No­r­ma­l­me­n­te esto suele generar un aspecto de la página web in­cohe­re­n­te y, por lo tanto, no es una buena idea. El moderno editor Gutenberg ofrece un término medio viable. Gutenberg tiene una paleta de colores pre­de­fi­ni­da que se puede adaptar al esquema de colores de la plantilla. Si asignas uno de los colores de texto pre­de­fi­ni­dos a un bloque, el editor solo añade algunas clases de CSS. De esta manera, se mantiene una se­pa­ra­ción de criterios; si es necesario, las clases pueden ser so­bre­s­cri­tas o des­ac­ti­va­das po­s­te­rio­r­me­n­te.

Sin embargo, Gutenberg también permite asignar un “color in­di­vi­dual” a secciones concretas del texto. Esto debe evitarse a toda costa. En lugar de un nombre de clase pre­de­fi­ni­do, Gutenberg inserta el color in­di­vi­dual como un valor de color co­di­fi­ca­do mediante inline style en el código HTML. Aquí te lo mostramos a modo de ejemplo:

Los inline styles tienen el mayor nivel de es­pe­ci­fi­ci­dad de CSS y, por lo tanto, so­bre­vi­ven a cualquier rediseño posterior. Por lo tanto, es aco­n­se­ja­ble des­ac­ti­var los colores in­di­vi­dua­les en el editor. Para ello, in­tro­du­ci­mos el siguiente código en el archivo functions.php de nuestro tema hijo:

También se puede des­ac­ti­var la paleta de colores de Gutenberg por completo. De nuevo, uti­li­za­mos el archivo functions.php: