Las fuentes pueden marcar la diferencia entre un sitio web aburrido y uno hermoso. Al aprender a cambiar la fuente en WordPress, puede hacer que su sitio se vea moderno, profesional y de marca.

Pero, ¿cuál es la mejor manera de usar las fuentes en su sitio de WordPress, y cómo elegir las fuentes adecuadas para su diseño?

En esta guía, le explicaré todo lo que necesita saber sobre las fuentes en WordPress. Aprenderá acerca de:

Fuentes: La Terminología

Empecemos por mirar la terminología sobre las fuentes en la web.

Echemos un vistazo a las opciones para agregar fuentes a su sitio web.

¿Cómo agregar fuentes a su sitio de WordPress? (las Opciones)

Antes de saltar a la hora de añadir fuentes a su sitio, es útil que comprenda las opciones que tiene a su disposición.

Las fuentes son parte del diseño de su sitio, así que en la mayoría de los casos, serán codificadas a través de su tema – pero no siempre. En algunos casos, puede decidir utilizar un plugin para habilitar una gama más amplia de fuentes en su sitio.

Aquí están algunas de las opciones disponibles para usted:

Hay dos distinciones principales: si utiliza fuentes web, que están alojadas fuera de su sitio, o si decide alojar sus archivos de fuentes usted mismo. En esta guía, veremos los pros y los contras de cada uno.

Comencemos por ver las fuentes web: por qué puede elegir utilizarlas y las formas de añadirlas a su sitio.

Uso de fuentes web en WordPress

Las fuentes web son la forma más popular de añadir fuentes a su sitio web porque facilitan la adición de una amplia gama de fuentes.

¿Qué son las fuentes Web?

Las fuentes web son fuentes que se alojan en el sitio web de un proveedor externo. En lugar de copiar los archivos a su propio sitio, se enlaza con el sitio web del proveedor y se extraen de allí.

Esto significa que usted tiene acceso a una gran variedad de fuentes sin tener que usar el espacio del servidor en su propio hosting. También significa que si los archivos de fuente cambian con el tiempo, no tiene que actualizar sus archivos y tendrá acceso automáticamente a las nuevas versiones de los archivos del proveedor.

Las fuentes web pueden ser gratuitas o puede pagarlas, normalmente a través de una suscripción. Algunos proveedores populares lo son:

Google Fonts

Google Fonts

Todos estos proveedores le permiten servir las fuentes directamente desde sus servidores añadiendo código a su sitio de WordPress o a veces usando un plugin que significa que no tiene que añadir ningún código.

Las fuentes web son diferentes de las fuentes seguras para la web. Puede utilizarlos como respaldo para las fuentes web en caso de que el visitante de su sitio web no pueda conectarse a la fuente web por alguna razón. Le mostraré cómo hacerlo más adelante en este post.

¿Por qué usar fuentes Web?

Así que ahora que sabe lo que son las fuentes web, ¿por qué elegiría usarlas en lugar de alojar sus propias fuentes?

Aquí están algunos de los beneficios:

La mayoría de los sitios web utilizan fuentes web, con una fuente segura para la web como respaldo. Y con WordPress, es muy fácil de hacer.

Encontrar las mejores fuentes Web para su sitio

Una vez que ha decidido que va a usar fuentes web, ahora tiene que tomar una decisión difícil: ¿qué tipo de fuentes usar?

En los buenos tiempos, cuando todos los desarrolladores web tenían acceso a las fuentes web seguras preinstaladas, esta fue una decisión muy fácil. ¿Quería usar una fuente con gracias o sans-serif? (Las fuentes Serif tienen una pequeña línea o trazo al final de un trazo más grande en cada carácter, las fuentes sans-serif no.) Habiendo tomado esa decisión, sus opciones eran muy limitadas.

Pero ahora, el mundo es una maravilla.

Aquí hay algunos consejos para ayudarle a elegir la mejor fuente para su sitio:

Una vez que haya elegido sus fuentes, dedique algún tiempo a experimentar con ellas. Los proveedores de fuentes como Google Fonts le permiten escribir texto personalizado para ver cómo se ve en la fuente elegida. Una vez que vea su propio texto en la fuente, podría ayudarte a decidir si es la fuente adecuada para usted.

Experimentar con su fuente

Experimentar su fuente

Y recuerde, el uso de fuentes web hace que sea muy fácil cambiar las fuentes para que siempre pueda cambiar a otra opción mientras desarrolla su tema o configura su sitio.

¿Cómo añadir fuentes web con un plugin de WordPress?

Así que ya tiene elegida la fuente, ahora es el momento de añadirla a su sitio.

Si no se siente cómodo añadiendo código a sus archivos de temas, puede instalar un complemento que le permitirá acceder a las fuentes de Google y utilizar la fuente que desees en su sitio.

El complemento de tipografía de Google Fonts le da acceso a toda la biblioteca de fuentes de Google y le permite revisarlas a través del Personalizador de WordPress.

Instale el plugin en su sitio como lo haría con cualquier otro plugin, y luego actívelo.

Vaya a Apariencia > Personalizar para acceder al Personalizador. Verás una sección para fuentes de Google.

Fuentes de Google en el personalizador

Fuentes de Google en el personalizador

Haga clic en ese enlace para acceder a la configuración de sus fuentes. Configúrelos de la siguiente manera:

Configuración básica: configure la fuente predeterminada para el texto del cuerpo y los encabezados, así como los botones. En la captura de pantalla de abajo puede ver que he añadido una fuente con gracias fácil de leer para el cuerpo y una fuente más distintiva para los encabezados.

Configurar los ajustes básicos

Configurar los ajustes básicos

Configuración avanzada: Aquí puede configurar la marca (título y descripción del sitio), la navegación (su menú), el contenido y los encabezados con más detalle, la barra lateral y el pie de página. También puede cargar fuentes sin asignarlas a nada, lo que significa que puede agregarlas a cualquier CSS personalizado en el Personalizador.

Carga de fuentes: Si hay pesos de fuentes que no necesita (por ejemplo, negrita, cursiva, etc.), puede desmarcarlos aquí para que no ralenticen innecesariamente su sitio.

Depuración: Utilice esta opción para forzar la visualización de las fuentes si no funcionan como deberían.

Dedique algún tiempo a trabajar con estas configuraciones y a probarlas en el Personalizador para asegurarse de que funcionan como usted desea. A continuación, cuando esté satisfecho con la configuración, haga clic en el botón Publicar. No abandone el Personalizador sin hacer clic en Publicar o perderá los cambios.

Edición de los colores de las fuentes

La versión gratuita del plugin no le permite editar los colores de sus fuentes. Para ello, tendrá que comprar la versión premium o usar la opción CSS adicional en el Personalizador.

Vuelva a la pantalla de inicio del Personalizador y haga clic en la pestaña CSS adicional. Se le presentará un área de texto vacía donde podrá agregar su propio CSS.

Para encontrar el elemento que necesita estilizar, selecciónelo y utilice el inspector de código de su navegador para averiguar qué color tiene el estilo que ya tiene.

Abajo estoy usando Google Chrome y he apuntado a un elemento h1.

Inspeccionando tu código en Chrome

Inspeccionando su código en Chrome

En mi tema de WordPress, ha heredado su color del elemento cuerpo. Quiero añadir algo más específico. En el área de texto de su CSS, escriba el CSS de su elemento y el color que desea utilizar. El mío se parece a éste:

h1 {
 color: #f542f5;
}

Eso me da un elemento H1 rosa brillante:

Cambiar el color de la rúbrica

Cambiar el color de la rúbrica

Puede repetir esto con cualquier elemento de texto al que desee agregarle color, y también con cualquier fuente personalizada que no estuviera incluida en las opciones de las otras pantallas. Si quieres saber qué CSS usar para las fuentes, sigua leyendo la sección de esta entrada sobre cómo modificar tus fuentes a través de CSS.

¿Cómo añadir fuentes web manualmente?

Si no desea añadir un plugin adicional a su sitio y tener acceso al código de su tema, puede instalar y utilizar fuentes web añadiendo código al archivo de funciones y a su hoja de estilos.

Si su sitio está usando un tema a medida que puede editar, entonces puede editar el archivo de funciones y la hoja de estilo de su tema. Pero si está usando un tema de terceros que compró o obtuvo del directorio de temas de WordPress, tendrá que crear un tema hijo. Luego tendrá que darle dos archivos: functions.php y style.css.

Vamos a trabajar en el proceso de agregar manualmente fuentes web a su tema. Voy a trabajar con fuentes de Google para este ejemplo, ya que es el más utilizado y es gratuito.

Escoger una fuente y agarrar el enlace

Empiece elegir tu fuente de Google Fonts. Añádalo a su biblioteca haciendo clic en el icono más al lado.

Haga clic en la pestaña en la parte inferior de la pantalla para su biblioteca y verá algún código para que lo agregue a su sitio. Si desea agregar pesos y estilos de fuente adicionales, haga clic en la ficha Personalizar y seleccione los que desee. A continuación, vuelva a la pestaña Incrustar.

No copie el código exactamente: lo usará, pero en lugar de llamar a la fuente en la sección < head> del encabezado de su sitio, estará haciendo cola en las fuentes. Esta es la forma correcta de hacerlo en WordPress.

En su lugar, desde la sección Incrustar fuente, copie sólo el enlace a la fuente.

Así que, en mi caso, Google Fonts me está dando este código:

<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">

Sólo necesita copiar esta parte:

https://fonts.googleapis.com/css?family=Raleway

Encolado de la(s) fuente(s)

Abra el archivo de funciones del tema y añada lo siguiente, sustituyendo el enlace de mi fuente por el enlace que Google le ha proporcionado para la suya:

function kinsta_add_google_fonts() {
 wp_register_style( 'googleFonts', 'https://fonts.googleapis.com/css?family=Raleway');
 wp_enqueue_style( 'googleFonts');
}
add_action( 'wp_enqueue_scripts', 'kinsta_add_google_fonts' );

Esto pone en cola el estilo de los servidores de Google Fonts. Si necesita añadir más fuentes en el futuro, puede añadir una nueva línea a su función o añadirla en la misma línea, así:

function kinsta_add_google_fonts() {
 wp_register_style( 'googleFonts', 'https://fonts.googleapis.com/css?family=Merriweather|Raleway');
 wp_enqueue_style( 'googleFonts');
}
add_action( 'wp_enqueue_scripts', 'kinsta_add_google_fonts' );

Esto encolará las fuentes Merriweather y Raleway.

Adición de las fuentes a la hoja de estilo

Esto no hará que la fuente funcione en su sitio todavía: todavía necesita agregarla a la hoja de estilo de su tema.

Abra el archivo style.css en su tema y añada el código para estilizar elementos individuales con sus fuentes web. Asegúrese de agregarlo después de cualquier CSS existente para fuentes, o puede ser anulado por eso.

Los elementos que estilice dependerán de usted, pero es común usar una fuente legible para el elemento del cuerpo y algo más elegante para los encabezados.

body {
 font-family: 'Raleway', sans-serif; 
, h2, h3 {
 font-family: 'Merriweather', serif;
}

En el caso anterior, todo en la página usará la fuente Raleway, excepto los elementos h1, h2 y h3, que usarán Merriweather.

Ahora, guarde su hoja de estilo y revise su sitio para asegurarse de que todo funciona como usted espera. Si las nuevas fuentes no se muestran, intente vaciar la caché del navegador y compruebe que las fuentes no están siendo sustituidas por ningún estilo para las fuentes de la parte inferior de la hoja de estilos. Esta es la razón por la que es una buena idea añadir su nuevo estilo en la parte inferior de la hoja de estilo o reemplazar el estilo de fuente existente con su nuevo estilo (incluso mejor).

Adición de una fuente de copia de seguridad

Puede haber ocasiones en las que alguien visite su sitio y no pueda acceder a los archivos de fuentes web por alguna razón. Tal vez están en una mala conexión o usando un viejo dispositivo que no renderiza las fuentes web. O tal vez su proveedor de fuentes web está teniendo problemas técnicos.

Por esta razón, es una buena idea tener una copia de seguridad.

El código que le dan las fuentes de Google ya tiene una copia de seguridad de simplemente especificar serif or sans-serif, pero podemos ir un paso más allá.

Utilice una de las fuentes preparadas para la Web que ya estarán instaladas en el equipo de su visitante y, a continuación, incluya la segunda opción de serif or sans-serif, en caso de que estén utilizando un dispositivo móvil que ni siquiera tenga las fuentes preparadas para la Web.

Vuelva a su hoja de estilo y edite su CSS para que lea algo como esto:

body {
 font-family: 'Raleway', Helvetica, sans-serif;
}

h1, h2, h3 {
 font-family: 'Merriweather', Georgia, serif;
}

Esto significa que las personas que visiten su sitio web verán sus fuentes web si todo va bien; pero si no es así, verán Helvetica o Georgia, o en su defecto, verán cualquier tipo de fuentes serif y sans-serif que su navegador sea capaz de cargar.

Alojamiento de sus propias fuentes en WordPress

Algunos desarrolladores prefieren no utilizar fuentes web, sino alojar las fuentes en sus propios servidores y usted podría ser uno de ellos.

Esto podría deberse a una o más de las siguientes razones, entre ellas la seguridad, la ejecución o el presupuesto.

Si le preocupa el rendimiento, puede optimizar el rendimiento de sus fuentes web de varias maneras, que se tratan más adelante en este artículo. Pero si usted ha decidido seguir la ruta local, necesitará saber cómo hacerlo.

¿Por qué alojar sus propias fuentes?

El uso de fuentes web es a menudo más fácil y puede darle más flexibilidad, además de ocupar menos espacio en su servidor. Pero eso no significa que no haya ocasiones en las que las fuentes de alojamiento local puedan no ser más apropiadas.

Entre las razones por las que puede querer alojar fuentes localmente se incluyen:

Es posible que descubra que puede sortear algunos de estos problemas

¿Dónde encontrar fuentes que puede alojar localmente?

Muchas fuentes web también se pueden descargar para su uso como fuentes alojadas localmente, pero tendrá que comprobar que la licencia lo permite. En el caso de las fuentes de Google, está permitido.

También encontrarás que hay fuentes que no están disponibles como fuentes web y que puede descargar y alojar usted mismo. Cualquier archivo de fuente que usted puede descargar a su computadora también puede ser cargado a su sitio web y almacenado allí. Si necesita utilizar una fuente que no está disponible como fuente web para enlazar con su marca, ésta será la solución, pero asegúrese de que su licencia lo permita.

¿Cómo agregar fuentes alojadas localmente a su sitio de WordPress?

Así que sabe que quiere alojar sus fuentes localmente, ¿cómo lo hace?

El proceso es diferente del uso de fuentes web. Usted tiene que subir los archivos de fuentes a su sitio y enlazarlos en su hoja de estilo sin tener que hacer cola en su archivo de funciones.

Descargar y convertir las fuentes

Empiece por descargar las fuentes que desea utilizar. En Google Fonts, puedes hacerlo haciendo clic en el icono de descarga cuando veas la fuente en tu biblioteca.

Descarga de fuentes de Google Fonts

Descarga de fuentes de Google Fonts

Descomprima el archivo de fuente en su computadora y elimine cualquier peso de fuente que no necesite usar en su sitio: no tiene sentido subir archivos que no vaya a usar.

Para usar en su sitio web, los archivos deberán estar en el formato…. woff. Si no lo son (no lo serán si los obtuvo de fuentes de Google), puede usar un servicio como Convertio para convertirlos.

Suba las fuentes a su tema

Ahora suba los archivos de fuente a su tema, en wp-content/themes/themename, donde themename es la carpeta para su tema. Es una buena idea poner cualquier archivo de fuente en su propia carpeta en el tema, por ejemplo, una carpeta de fuentes.

Si está trabajando con un tema de terceros, cree un tema hijo para sus archivos de fuente y su hoja de estilo.

Una vez que lo hayas hecho, necesitarás añadir la fuente a tu hoja de estilo.

Agregar las fuentes en CSS

Abra la hoja de estilo de su tema.

Añada código como este, reemplazando las fuentes que he usado por las suyas:

@font-face {
 font-family: 'Raleway';
 src: url( "fonts/Raleway-Medium.ttf") format('woff'); /* medium */
 font-weight: normal;
 font-style: normal;
}

@font-face {
 font-family: 'Raleway';
 src: url( "fonts/Raleway-Bold.ttf") format('woff'); /* medium */
 font-weight: bold;
 font-style: normal;
}

@font-face {
 font-family: 'Merriweather';
 src: url( "fonts/Merriweather.ttf") format('woff'); /* medium */
 font-weight: normal;
 font-style: normal;
}

Añada lo que necesite. Tenga en cuenta que si desea utilizar las variaciones de negrita, cursiva, etc. de su fuente, necesita declarar cada una usando @fontface y luego especificar el peso o estilo para cada una, como he hecho anteriormente con Raleway para los pesos en negrita y normal.

Ahora añada el estilo para sus elementos, como lo haría cuando usa fuentes web:

body {
 font-family: 'Raleway', Helvetica, sans-serif;
 src: url( "/fonts/Raleway-Medium.ttf" );
}

h1, h2, h3 {
 font-family: 'Merriweather', Georgia, serif;
}

Las fuentes alojadas localmente ahora funcionarán con el tema.

¿Cómo cambiar las fuentes en WordPress?

Ahora usted sabe cómo instalar fuentes en su sitio de WordPress de una de estas dos maneras. ¿Qué tal si los edita? ¿Qué tal si los cambiamos?

Puede editar sus fuentes de una de estas tres maneras: a través del Personalizador, en la pantalla de edición de mensajes o páginas, o utilizando CSS.

Veamos cada una de esas opciones para cambiar el estilo, el color y el tamaño de la fuente.

¿Cómo cambiar los estilos de fuente en WordPress?

Veamos cómo podemos hacerlo si está usando el Editor de bloques o el Editor clásico.

Cambio de estilos de fuente en el editor de bloques (Gutenberg)

Si está usando una versión reciente de WordPress con el editor de Gutenberg, puede cambiar el estilo de su texto cuando lo edite en su mensaje o página.

Seleccione el bloque que quiera editar y aparecerá un menú de estilo encima de él.

Estilo en bloque Gutenberg

Estilo en bloque Gutenberg

Seleccione el texto que desea editar y luego haga clic en los iconos para ponerlo en negrita o cursiva. Si hace clic en la flecha que aparece junto a ellas, verá que también puede seleccionar tachado.

Tachado en Gutenberg

Tachado en Gutenberg

Cambio de estilos de fuente en el editor clásico

Si está ejecutando una versión anterior de WordPress o tiene instalado el plugin Classic Editor, también puede editar estilos de fuente. (Si no quiere el editor de Gutenberg, es mejor actualizar WordPress y desactivar Gutenberg.)

El Editor Clásico incluye una barra de herramientas encima del panel de edición principal donde puede cambiar los estilos de su texto. Si hace clic en el icono de la barra de herramientas Alternar a su derecha, puede acceder a más opciones, incluyendo tachar.

Barra de herramientas de estilo clásico de editor

Barra de herramientas de estilo clásico de editor

Modificación de estilos de fuente en el Customizing

Si desea cambiar el estilo de fuente para un elemento específico, puede hacerlo añadiendo CSS manual al Personalizador.

Abra el Personalizador y haga clic en CSS Adicional. Esto abrirá una pantalla donde podrá escribir CSS.

CSS adicional en el Personalizador

CSS adicional en el Personalizador

Ahora puede escribir el CSS de sus fuentes en el cuadro. Por lo tanto, si desea cambiar todos los elementos h1 y h2 a cursiva, debe añadir esta CSS:

h1, h2 {
 font-style: italics;
}

Cambio de estilos de fuente en la hoja de estilo

Si se sientes cómodo añadiendo código a su hoja de estilo, esta es una mejor manera de hacerlo.

Si utiliza un tema de terceros, cree un tema hijo para su propio estilo; de lo contrario, los cambios que realice se perderán al actualizar el tema. Tendrás que crear una hoja de estilo en el tema hijo para decirle a WordPress que es un tema hijo: ahí es donde pones tu nuevo estilo de fuente.

Si está usando su propio tema, puede editar y corregir el CSS en su propia hoja de estilo. El archivo es style.css y lo encontrarás en tu carpeta de temas en wp-content/themes.

Agregue cualquier estilo de fuente al final de su hoja de estilo para que no se cancele por nada que ya exista. O mejor aún, elimine y sobrescriba cualquier estilo de fuente existente, a menos que desee conservarlo.

Cambiar el peso de un elemento con font-weight:

span.featured {
 font-weight = bold;
}

Cambiar el estilo de un elemento con font-style:

span.featured {
 font-style = italic;
}

Cambie la alineación con text-alignment:

Cambiar la alineación con la alineación de texto: ¿Cansado de un host lento para su sitio de WordPress? Proporcionamos servidores rápidos y soporte de clase mundial las 24 horas del día, los 7 días de la semana por parte de expertos de WordPress. Consulte nuestros planes

span.featured {
 text-alignment: center;
}

¿Cómo cambiar los colores de las fuentes en WordPress?

Otro cambio que usted podría querer hacer es cambiar el color de cierto texto en su sitio. Tenga cuidado de no exagerar con esto: su tema ha sido diseñado con colores que funcionan bien juntos y si añades demasiados colores, podría parecer chillón y poco profesional.

Cambiar el color de las fuentes en Gutenberg

Los bloques de texto de Gutenberg le permiten editar el color y el fondo del texto. Para ello, abra el bloque que desea modificar y haga clic en la ficha Configuración de color en la sección Bloque a la derecha de la pantalla.

La pestaña de configuración de color

La pestaña de configuración de color

Desde aquí puede editar el color de fondo y el color del texto para los bloques de texto.

Colores personalizados en un bloque

Colores personalizados en un bloque

Tenga en cuenta que WordPress le avisará si la combinación de colores que utilice será perjudicial para la accesibilidad, como en el ejemplo que he utilizado anteriormente. Evite la tentación de exagerar con sus colores – después de todo usted eligió su tema porque su diseño de color era apropiado para su sitio, y añadir muchos más colores podría hacer que se vea chillón.

Si hace clic en la pestaña Avanzado debajo de la pestaña Configuración de color, también puede agregar una clase a ese bloque, que luego puede cambiar de estilo en el Personalizador o en su hoja de estilo. Así que, por ejemplo, si ha añadido una clase de .featured su bloque, puede darle estilo usando esa clase.

Cambio de los colores de las fuentes en el editor clásico

La barra de herramientas del editor clásico le permite cambiar el color del texto que seleccione. Así que puede seleccionar una palabra individual y cambiar su color. Abajo he hecho una frase roja.

Cambiar los colores en el editor clásico

Cambiar los colores en el editor clásico

Aunque esto, en teoría, le da mucha flexibilidad, tenga cuidado con el uso excesivo. Si empieza a añadir muchos más colores a su texto, podría resultar en un sitio que es difícil de leer y malo para la accesibilidad.

Modificación de los colores de las fuentes en el personalizador

Si su tema incluye opciones para cambiar el esquema de color de su sitio, este es el mejor lugar para hacerlo.

Por ejemplo, en el sitio de abajo estoy usando un tema que me permite elegir una nueva combinación de colores para todo el tema. Esto ayuda a asegurar que los nuevos colores trabajen bien juntos y sean coherentes.

Edición de la combinación de colores en el Personalizador

Edición de la combinación de colores en el Personalizador

Las opciones para esto variarán de acuerdo a su tema – algunos temas le permiten apuntar a encabezados, enlaces y otros elementos y cambiar su color.

Si desea apuntar a elementos específicos para cambiar su color pero no es una opción del tema, puede agregar CSS en el Personalizador para hacerlo.

Seleccione Personalizar > CSS adicional y escriba su CSS en el cuadro de texto.

Por ejemplo, si desea cambiar el color de sus encabezados h1, escriba esto:

h1 {
 color: #564534;
}

Si eso no funciona, es posible que necesite agregar CSS más específicas. En mi tema, el color del enlace de encabezado del sitio está codificado usando el #site-title ID, así que necesito añadir este CSS:

#site-title a {
 color: #564534;
}
CSS adicional - color

CSS adicional – color

Reemplace el color que he usado arriba con su propio color.

Cuando estés satisfecho con los cambios, haz clic en el botón Publicar.

Cambio de los colores de las fuentes en la hoja de estilo

Al igual que con los estilos de fuente, también puede editar la hoja de estilo de su tema (o crear un tema hijo) para cambiar los colores de fuente.

Cambie el color con el color. Abajo estoy cambiando el color principal para el texto de mi sitio, usando el body element:

body {
 color = #222222;
}

Asegúrese de que anula cualquier estilo existente para los mismos elementos y que también estiliza los elementos que heredan ese estilo si desea que tengan un color diferente. Todo el texto heredará el color del elemento del cuerpo a menos que tenga su propio estilo.

Cambiar el tamaño de las fuentes en WordPress

Por razones de accesibilidad, puede decidir que desea que las fuentes sean más grandes de lo que son por defecto en el tema. O puede decidir que los encabezados de sus áreas de widgets son demasiado pequeños, por ejemplo.

Cambiar el tamaño de fuente en Gutenberg

Con el editor de Gutenberg, puede cambiar el tamaño del texto dentro de cada bloque.

Seleccione el bloque y luego haga clic en la pestaña Configuración de texto en el menú Bloques a la derecha de la pantalla. Puede hacer que el texto del bloque sea más pequeño o más grande, como se muestra a continuación.

Edición del tamaño de fuente en Gutenberg

Edición del tamaño de fuente en Gutenberg

Tenga cuidado con hacer esto demasiado: si todos los párrafos de su página son de diferentes tamaños, se verá desarticulado y será difícil de leer.

Cambio del tamaño de fuente en el editor clásico

El editor clásico no le da la opción de seleccionar un texto específico y cambiar su tamaño: así que si necesita esta función, tendrá que actualizarse a Gutenberg. Lo siento!

Modificación del tamaño de fuente en el Customizing

Dependiendo del tema, es posible que tenga la opción de cambiar los tamaños de fuente en el Personalizador, ya sea cambiando el tamaño de fuente para todo el sitio o dirigiéndose a las cabeceras y al texto del cuerpo.

Si el tema no incluye una opción de Personalizador para cambiar los tamaños de fuente, pero puede usar la opción CSS adicional. Vaya a Personalizar > CSS adicional y escriba el CSS en el cuadro.

Abajo estoy haciendo los encabezados en las áreas de widgets más grandes, con este CSS:

h2.widget-title {
 font-size: 3em;
}
Estilo de tamaño de fuente con CSS adicional

Estilo de tamaño de fuente con CSS adicional

Quizá sea demasiado grande, pero te da una idea general.

Cambio del tamaño de fuente en la hoja de estilo

Cambiar el tamaño de las fuentes en su hoja de estilo funciona de manera similar a cambiar cualquier otro estilo para sus fuentes.

Si desea cambiar el tamaño de todo el texto de su sitio, debe utilizar el elemento body element:

body {
 font-size: 14px;
}

Para el elemento del body se utilizan píxeles, pero para otros elementos se utiliza em el tamaño es relativo al tamaño del elemento del body.

h1,
#site-title {
 font-size: 2em;
}

Recuerde que si va a hacer cambios en las fuentes de la hoja de estilo de su tema, pruébela primero en un sitio de desarrollo o de preparación para que no corra el riesgo de arruinar su sitio en vivo.

¿Cómo optimizar las fuentes en WordPress?

Tanto si utiliza fuentes web como si utiliza fuentes alojadas localmente, tiene sentido hacer todo lo posible para optimizar sus fuentes.

Aquí le daré algunos consejos para optimizar sus fuentes, tanto en velocidad como en diseño.

Optimización de fuentes para el rendimiento

Si está utilizando fuentes web en su sitio, deberá hacer todo lo que esté en su mano para garantizar que lleguen a sus páginas lo más rápido posible y que el hecho de que estén alojadas en otro lugar no ralentice las cosas.

Así que si el título de su sitio es Kinsta, podría hacer una pequeña mejora en el rendimiento al seguir la hoja de estilo de esta manera:

function kinsta_add_title_font() {
 wp_register_style( 'googleFonts', 'https://fonts.googleapis.com/css?family=Raleway&text="kinsta');
 wp_enqueue_style( 'googleFonts');
}
add_action( 'wp_enqueue_scripts', 'kinsta_add_title_font' );

Optimización de fuentes para el diseño

Además de optimizar el rendimiento de sus fuentes, también tiene sentido asegurarse de que estén optimizadas visualmente: que encajen bien con el diseño de su sitio y con sus materiales fuera de línea.

Esto es especialmente cierto si utiliza un plugin o un tema hijo para añadir fuentes adicionales a las que ya se incluyen en el tema. Existe el riesgo de que su tema se vea desordenado si hay demasiadas fuentes en demasiados colores y estilos.

Antes de agregar fuentes adicionales a su sitio, considere lo siguiente:

Las fuentes que usted utiliza en su diseño tendrán un impacto en la impresión que los visitantes obtienen cuando llegan a su sitio. Asegúrese de haber considerado esto y elegido fuentes que refuercen su marca.

Trabajar con fuentes variables

Las fuentes variables son un nuevo tipo de fuentes que hacen que añadir más fuentes a su sitio sea más eficiente.

Permiten almacenar más información en un archivo de fuente, de modo que si desea variaciones en su fuente (negrita, cursiva, etc.), no tiene que cargar varios archivos de fuente, sino que sólo puede cargar uno.

Para una fuente con múltiples pesos de fuente, estilos e inclinaciones, esto podría ahorrar mucho espacio de archivo y hacer más fácil el proceso de encolar la fuente o añadirla a través de @fontface.

Las fuentes variables son compatibles con las últimas versiones de Chrome, Edge, Firefox y Safari, pero no con los navegadores más antiguos; por lo tanto, si las utilizas, necesitarás una copia de seguridad. Y aún no hay muchas fuentes variables disponibles. Las fuentes de Google no incluyen ninguna, pero Google es compatible con la especificación, por lo que es probable que se añadan con el tiempo.

Los desarrolladores de fuentes están trabajando para crear más fuentes variables y mejorar su confiabilidad, por lo que vale la pena observar el progreso para que pueda utilizar fuentes variables para optimizar sus fuentes una vez que se vuelvan más estables.

Las fuentes se dan por sentadas pero son cruciales para CUALQUIER sitio web (sin excepciones). Aprenda a cambiar la fuente, el tamaño y el color de la fuente en WordPress! 🎨👨👦Click to Tweet

Resumen

Cambiar las fuentes en su sitio de WordPress no es una tarea sencilla. Usted tiene diferentes posibilidades para elegir:

  1. Uso de fuentes web mediante la instalación de un plugin.
  2. Usar fuentes web codificándolas en el tema y encolándolas.
  3. Alojamiento de sus fuentes.

A continuación, debe centrarse en cómo optimizar sus fuentes para obtener un mejor rendimiento. Si sigue los consejos de esta guía, no sólo podrá cambiar las fuentes en WordPress, sino que también podrás tener más control sobre ellas en su tema.


Si le ha gustado este artículo, entonces le encantará la plataforma de Kinsta WordPress hosting. Acelere su sitio y reciba soporte 24/7 de nuestro equipo de WordPress veterano. Nuestra infraestructura potenciada por Google Cloud se centra en escalamiento automático, rendimiento y seguridad. ¡Déjenos mostrarle la diferencia con Kinsta! Conozca nuestros planes