¡Cómo cambiar la fuente en WordPress - 7 maneras que toman menos de un minuto!

Al cambiar el tamaño de letra o el color, el icono cambia en consecuencia.

Cómo cambiar las fuentes de WordPress en Astra

La mayoría de los temas de WordPress permiten personalizar las fuentes mediante el personalizador nativo. Aunque esto puede variar ligeramente entre temas, te mostraremos cómo cambiar la fuente de WordPress usando nuestro tema Astra.

Te guiaremos a través del uso del editor predeterminado Gutenberg y luego constructores de páginas como Elementor y Brizy.

Cómo cambiar las fuentes de WordPress en Astra usando Gutenberg

Para cambiar la fuente en WordPress usando Gutenberg, edita cualquiera de tus entradas o páginas y selecciona el texto que quieras modificar.

Puedes ponerlo fácilmente en negrita o cursiva seleccionando el texto. Para cambiar la tipografía, utiliza los ajustes de la parte derecha de tu editor.

También puede editar el tamaño de la fuente utilizando el campo personalizado proporcionado.

¿Quieres cambiar el color de la fuente? No hay problema.

Sólo tiene que seleccionar el color de texto que desee en el menú Color ficha.

De este modo, puede anular la configuración predeterminada de los distintos elementos de su página.

Cómo cambiar las fuentes de WordPress en Astra usando Elementor

A continuación, vamos a cambiar las fuentes de WordPress utilizando el constructor de páginas Elementor. El constructor de páginas hace que sea muy fácil cambiar la fuente utilizando la configuración del widget.

Para cambiar el tipo de letra, abra la entrada o la página que desee editar con Elementor.

A continuación, haz clic en el icono de la esquina superior derecha.

Seleccione Estilo y, a continuación, haga clic en Tipografía icono.

El constructor de páginas Elementor ofrece varias opciones para editar texto. A través de los ajustes de tipografía, puede cambiar la familia de fuentes, aumentar el tamaño de la fuente, cambiar la altura de línea y el espaciado entre letras, incorporar varios estilos y mucho más.

Una vez realizados los cambios, pulse el botón Botón de actualización para guardar los cambios.

Cómo cambiar las fuentes de WordPress en Astra usando Brizy

Veamos otro constructor de páginas, el constructor de páginas Brizy.

Abra la página o la entrada con Brizy y seleccione el texto que desea cambiar.

Como puedes ver en la imagen de arriba, tienes que hacer clic en el texto (T) icono en la caja de herramientas para ver opciones adicionales de edición de texto. Puedes cambiar la fuente, el tamaño, el peso, la altura de línea, el interlineado y mucho más.

Una vez que haya terminado, haga clic en Actualización.

¡Y así de sencillo es cambiar las fuentes usando Gutenberg y los constructores de páginas Elementor y Brizy!

Cómo cambiar las fuentes de WordPress con el personalizador de temas

Las opciones utilizadas anteriormente funcionan perfectamente al cambiar las fuentes de elementos individuales y bloques.

Pero, ¿y si desea aplicar cambios de fuente en todo su sitio web?

Aquí hay una infografía que cubre todo para cambiar las fuentes de WordPress utilizando el personalizador de temas.

La buena noticia es que se puede hacer rápidamente utilizando el personalizador de temas. Es una característica del tema Astra, así que asegúrate de que tienes el tema Astra instalado. Si no lo tienes, cambiar el tema de WordPress a Astra.

Visite Apariencia > Personalizar para acceder al personalizador de WordPress.

Tendrás que localizar los ajustes de tipografía del tema para que esto funcione. Puede que tengas que buscar un poco, ya que varía en función del tema que utilices.

Si utiliza el tema Astra, haga clic en Global y luego el Tipografía ficha.

Desde cambiar los preajustes y la familia de fuentes hasta aumentar el tamaño de la fuente, el peso, la altura de línea e incluso el interlineado, tienes un montón de opciones para personalizar el texto de tu sitio web.

¿Quieres personalizar y cambiar el tipo de letra de las cabeceras? No hay problema.

De H1 a H6, podrás cambiar el tipo de letra de cada etiqueta de encabezado, tal y como desees.

Lo mejor de usar el personalizador de WordPress es ver los cambios que haces en tiempo real. De esta forma, puedes decidir qué funciona mejor para tu sitio con una vista previa en directo.

Una vez que esté satisfecho con todos los cambios, haga clic en Publique para guardar los cambios.

Cómo cambiar las fuentes de WordPress con un plugin

¿Y si tu tema no tiene la fuente que deseas? O tal vez, ¿su tema no tiene una opción para cambiar las fuentes en absoluto?

En estos casos, puede utilizar un plugin. Un plugin de fuentes le permitirá cambiar fácilmente la fuente en WordPress sin tocar ningún código.

Existen varios plugins que potencian las opciones tipográficas de tu sitio. Cuando elijas un plugin de fuentes para WordPress, te recomendamos que busques uno que te permita utilizar Google Fonts.

Algunos plugins populares son Easy Google Fonts, Fonts Plugin | Google Fonts Typography, y WP Google Fonts.

Google Fonts fáciles

El plugin Easy Google Fonts te permite añadir fácilmente Google Fonts a tu tema sin tener que añadir una sola línea de código. También puedes previsualizar los cambios que realices en tiempo real mediante el personalizador de WordPress.

Para utilizar este plugin, instale Easy Google Fonts en su sitio web WordPress.

Después de instalar el plugin, dirígete a Apariencia > Personalizar.

Vaya a Tipografía > Tipografía por defecto.

Ahora puedes cambiar el tipo de letra de todos los elementos de tu sitio web. Desde los párrafos hasta las etiquetas de cabecera. Personalízalos como quieras y guarda los cambios.

Tienes varias opciones de personalización de fuentes con las que jugar. También puedes personalizar el estilo y la posición del texto a tu gusto.

Una vez que haya terminado de hacer los cambios, haga clic en Publique.

¿Quieres añadir controles de fuente personalizados?

El plugin Easy Google Fonts permite cambiar la fuente de los elementos predeterminados, como párrafos y etiquetas de encabezamiento.

Pero, ¿y si quieres cambiar el tipo de letra de un elemento blockquote?

El plugin Easy Google Fonts facilita esta tarea. Sin embargo, necesitarás saber un poco de CSS para esto. Al menos, necesitarás saber el nombre del contenedor CSS.

La forma más sencilla de identificar el nombre del contenedor es cargar una página web, hacer clic con el botón derecho en la fuente y seleccionar Inspeccione.

En virtud de la Estilos verás el nombre del contenedor, que en este caso es un blockquote.

Una vez que haya identificado el nombre del contenedor, diríjase a Configuración > Easy Google Fonts.

Introduzca un nombre para su control de fuente. Esto es sólo para su referencia. Por ejemplo, hemos llamado a nuestro control personalizado 'Mi estilo Blockquote.’

A continuación, en selectores CSS de control de fuentes, añade tu selector CSS. En este caso, añadiremos 'blockquote'.

Una vez que haya terminado, haga clic en Crear control de fuentes.

Ahora, vuelve a Apariencia > Personalizar > Tipografía.

Ahora encontrarás una pestaña adicional, Tema Tipografía.

Haga clic en Tema Tipografía.

¿Te has fijado en el control de fuentes personalizado que acabas de añadir?

Ahora puede personalizar y cambiar fácilmente la fuente de cualquier elemento de su sitio de WordPress sin escribir ningún código.

Cómo cambiar las fuentes de WordPress con CSS

Si te sientes cómodo escribiendo un poco de código, otra forma de cambiar la fuente en WordPress es mediante usando CSS. Es beneficioso cuando las opciones de personalización de tu tema no te permiten cambiar las fuentes.

Sin embargo, tus cambios desaparecerán si cambias entre temas de WordPress. Por lo tanto, te resultará útil copiar el código CSS antes de instalar un nuevo tema.

Sin necesidad de abrir las hojas de estilo de su sitio web, puede añadir CSS fácilmente a través del Personalizador de WordPress.

Vaya a Apariencia > Personalizar > CSS adicional y coloca tu código CSS.

Supongamos que desea personalizar la etiqueta H1.

El código CSS será el siguiente,

h1{
font-family: verdana;
font-size: 30px;
color: #FF0000;
}

Esto cambiará la etiqueta H1 en todo su sitio al tamaño de fuente Verdana 30.

Del mismo modo, si desea cambiar la fuente de la etiqueta de párrafo a un tamaño 20, y el color blanco (#FFFFFF) el CSS será,

p {
font-size: 20px;
color: #FFFFFF;
}

Aunque es bastante sencillo cambiar las fuentes con CSS, sin duda te ayudará saber programar.

Cómo cambiar las fuentes de WordPress con un constructor de páginas

Anteriormente hemos explicado cómo cambiar las fuentes utilizando tanto el Elementor como el constructor de páginas Brizy. Sin embargo, eso fue para un elemento individual.

Si bien esto funciona, es posible que desee cambiar la fuente en todas las páginas de su sitio web WordPress utilizando un constructor de páginas.

Los creadores de páginas lo hacen muy fácil. Usaremos el constructor de páginas Elementor para explicar cómo.

Una forma fácil es abrir cualquier post o página utilizando el editor Elementor.

A continuación, haz clic en las tres líneas de la esquina superior izquierda del editor.

Ahora haga clic en Configuración del sitio.

En la configuración del sitio, podrás personalizar los colores globales, las fuentes globales, la tipografía, los botones y mucho más.

Puede cambiar el tipo de letra de los encabezados principal y secundarios, así como el texto y el acento. Una vez que esté satisfecho con la vista previa en vivo, haga clic en Actualización para guardar los cambios.

Así de sencillo es cambiar las fuentes con un constructor de páginas.

Cómo alojar fuentes locales en WordPress

A continuación, aprenderemos a alojar fuentes locales en WordPress. Pero, antes de entrar en el cómo, vamos a entender el por qué.

¿Por qué debemos alojar las fuentes localmente en WordPress?

La respuesta es sencilla: la velocidad de la página. Google Fonts y otras fuentes externas no están alojadas en tu sitio web. Por lo tanto, cada vez que un usuario entra en una página, el navegador tiene que hacer una petición HTTP a Google o al host de la fuente para obtener una copia de la misma.

Cada petición HTTP añade trabajo extra al navegador y ralentiza la carga de la página. Ninguna de las dos cosas favorece la experiencia del usuario.

Alojar las fuentes localmente significa que el navegador puede descargar el archivo de fuentes con la página sin realizar peticiones adicionales.

El resultado es un tiempo de carga de la página más rápido, un impulso potencial para su SEO y visitantes felices.

Para alojar sus fuentes localmente, comience por seleccionar la(s) fuente(s) que desea que esté(n) disponible(s) en su servidor local. Puede tratarse de una sola fuente o de toda una familia de fuentes.

A continuación, cree una carpeta con el nombre 'fonts' en su servidor utilizando un archivo Cliente FTPcomo FileZilla o el gestor de archivos de su panel de control de alojamiento.

Ahora carga todos tus archivos de fuentes en esta nueva carpeta.

Supongamos que ha cargado una fuente 'Roboto-Negro.ttfa la carpeta remota 'fonts'. En tal caso, la URL de la fuente será 'https://domainname.com/fonts/Roboto-Black.ttf'.

Tendremos que hacer referencia a esta URL en nuestro CSS en nuestro sitio de WordPress.

Puede editar el CSS personalizado o utilice un plugin gratuito, como Simple Custom CSS and JS. Usando el plugin, inserte el siguiente código:

@font-face {
font-family: 'Roboto-Black';
src: url('https://domainname.com/fonts/Roboto-Black.ttf') format('ttf');
font-weight: normal;
font-style: normal;
}

Por supuesto, cambiaría "domainname" por su propio nombre de dominio.

¿Y los estilos de letra? Sí, también tendrá que actualizarlos.

Aquí tienes un ejemplo del código que podrías utilizar:

body {font-family: 'Roboto-Black', Arial, sans-serif;}

No olvides guardar y actualizar las páginas cuando hayas terminado.

Es importante mencionar que si Google Fonts ya están integradas en tu tema de WordPress, no necesitarás alojarlas localmente.

Cómo alojar localmente Google Fonts en WordPress

Alojamiento Google Fonts localmente en WordPress es similar al alojamiento de fuentes normales que acabamos de ver.

Todo el proceso es aún más sencillo si se utiliza una herramienta gratuita como google-webfonts-helperque genera el código CSS necesario para su sitio WordPress.

Para empezar, decide qué fuente quieres alojar localmente. Por ejemplo, la fuente Abhaya Libre fuente.

A continuación, selecciona los estilos que desees. Seleccionaremos los estilos de fuente normal y negrita (800).

Verás que el código CSS está listo, así que cópialo.

Desplácese hacia abajo y descargue los archivos.

El archivo .ZIP incluye varios formatos de archivo, como EOT, TTF, SVG, WOFF y WOFF2.

Una vez descargado el archivo, repite el proceso que hemos explicado antes, conéctate a tu servidor en vivo, crea una nueva carpeta llamada fonts y sube los archivos.

Aunque estos pasos son bastante sencillos, el tema Astra lo hace aún más simple.

Astra incorpora la función Google Fonts.

Todo lo que tiene que hacer es pulsar el botón 'Carga local de Google Fontsen Apariencia > Personalizar > Rendimiento para activarlo.

Al habilitar esta función, solo enviarás una solicitud a Google Font API. Esta única solicitud recopilará todos los datos de fuentes de Google y los almacenará localmente en tu servidor.

5 plugins de fuentes para WordPress que merece la pena probar

Veamos ahora algunos plugins populares de fuentes para WordPress. Funcionan especialmente bien cuando tu tema no te permite cambiar la fuente.

Google Fonts fáciles

Easy Google Fonts es un sencillo pero potente plugin de fuentes que facilita enormemente la incorporación de fuentes personalizadas de Google Fonts sin necesidad de escribir ningún código. Se integra a la perfección con el personalizador incorporado de WordPress, lo que le permite previsualizar los cambios en su sitio en tiempo real.

Además, Easy Google Fonts le permite crear controles de fuentes personalizados para otros elementos de su sitio de WordPress.

Plugin de fuentes | Tipografía de Google Fonts

Fonts Plugin no sólo le permite utilizar fácilmente cualquiera de las fuentes de Google en su sitio de WordPress, sino que también le ayuda a personalizar y cambiar la fuente a cada elemento de su sitio. Con una función de vista previa en vivo, se llega a hacer sus cambios y una vista previa en tiempo real.

Fuentes personalizadas

Custom Fonts es un popular plugin de fuentes desarrollado por Brainstorm Force, el equipo detrás del popular tema Astra y otros excelentes productos relacionados con WordPress.

Con Custom Fonts, puede incrustar fácilmente archivos de fuentes personalizadas, como EOT, SVG, TTF, WOFF, WOFF2 y OTF, en su sitio de WordPress. El plugin funciona perfectamente con el tema Astra y los creadores de páginas Beaver Builder y Elementor.

WP Google Fonts

El plugin WP Google Fonts es un popular plugin de fuentes que facilita la adición de fuentes gratuitas y de alta calidad de Google a tu sitio WordPress. Puedes añadir el código de Google necesario y asignar fuentes de Google a elementos CSS específicos.

Fuentes Adobe personalizadas (Typekit)

Custom Adobe Fonts es otro popular plugin de fuentes del equipo Brainstorm Force. Si alguna vez has querido incrustar fuentes Adobe fácilmente en tu sitio web WordPress, este es el plugin que debes usar. El plugin funciona con el tema Astra y te permite escribir CSS personalizado.

5 consejos para elegir el tipo de letra de su sitio web

La legibilidad es crucial para atraer a los visitantes de un sitio web. Por un lado, una buena tipografía puede facilitar la lectura; por otro, una tipografía deficiente puede desanimar a los usuarios.

¿Qué debe tener en cuenta a la hora de elegir un tipo de letra para su sitio web?

1. Utilice fuentes estándar

Hay miles de fuentes interesantes que puedes utilizar. Algunas fuentes pueden dar a tus diseños un aspecto totalmente nuevo, y otras pueden ser un poco inesperadas.

Aunque estas fuentes pueden dar a su diseño el toque creativo que busca, también pueden distraer a los usuarios de su sitio web. No querrás que tus lectores pasen el tiempo preguntándose por la fuente en lugar de leer el texto, ¿verdad?

A menos que su diseño exija el uso de este tipo de fuentes, debería ceñirse a las fuentes estándar predeterminadas. Cuanto mejor sea la legibilidad, mayores serán las posibilidades de que los usuarios se interesen por el contenido.

2. Elija un tipo de letra que funcione bien en todos los tamaños

Teniendo en cuenta que los usuarios accederán a tu sitio desde distintos dispositivos y tamaños de pantalla, tendrás que elegir una fuente perfecta para todas las resoluciones de pantalla. Ya sea el texto, los encabezados o cualquier otro texto, la fuente debe funcionar bien en todos los tamaños y pesos.

3. Elija un tipo de letra claro y distinguible

¿Se ha confundido con letras similares? ¿Tal vez confundió una I con una L o una T con una J? Seleccione un tipo de letra que sea claro y no acabe confundiendo a su público. Haz pruebas en todos los tamaños de pantalla para asegurarte.

4. Evitar todas las mayúsculas

Cuando se trata de resaltar una parte del texto o incluso acrónimos, las mayúsculas funcionan bien. Sin embargo, no funciona bien en cuanto a legibilidad si todo el texto está en mayúsculas.

5. Minimizar el número de fuentes

Por último, reduzca al mínimo el número de fuentes utilizadas en una misma página. Utilizar varios tipos de letra hace que un sitio parezca poco profesional. Por no hablar de que da un aspecto desestructurado. Aunque dos es un buen número, a nosotros nos gusta ceñirnos a un solo tipo de letra y utilizar distintas variantes en todos nuestros sitios web.

Preguntas frecuentes sobre fuentes en WordPress

¿Cómo puedo cambiar la fuente de mi tema de WordPress?

Hay más de una manera de cambiar las fuentes en su tema de WordPress. La forma más sencilla es acceder a la tipografía del tema a través del personalizador de WordPress. Aunque esto puede variar en función de tu tema, si estás usando Astra, dirígete a Apariencia > Personalizar > Global > Tipografía y cambiar las fuentes.

También puede utilizar un constructor de páginas, un plugin, editar CSS y varios otros métodos mencionados en este artículo.

¿Cómo puedo cambiar la fuente de mi cabecera en WordPress?

Puedes cambiar la fuente de tu cabecera a través del personalizador de WordPress. Si utilizas el tema Astra, encontrarás la opción Creador de cabeceras en Apariencia > Personalizar. No sólo puedes diseñar tu cabecera como quieras, sino que también puedes cambiar el tipo de letra de cada elemento de tu cabecera.

¿Cuál es la fuente predeterminada en WordPress?

El tipo de letra por defecto depende del tema de WordPress que selecciones. Por ejemplo, en el tema predeterminado de WordPress para 2020, encontrarás el tipo sans serif utilizado para los encabezados y serif para el cuerpo. En el tema de WordPress para 2021, encontrarás Roboto para los encabezados y sans-serif para el cuerpo.

¿Qué fuentes puedo utilizar en WordPress?

Puedes utilizar todo tipo de fuentes en WordPress. WordPress hace que sea súper fácil de cargar todo tipo de fuentes de Google Fonts a cualquier fuente web. Siempre puedes instalar un plugin de fuentes para WordPress si quieres más opciones.

¿Cómo puedo previsualizar una fuente en WordPress?

Con el personalizador de WordPress, puedes previsualizar tus fuentes en tiempo real. Gracias a la previsualización en vivo, podrás ver exactamente el aspecto de tu texto mientras te desplazas por las distintas fuentes. Una vez que esté satisfecho con una fuente en particular, puede publicar los cambios en el sitio en vivo.

¿Cómo se cambian las fuentes en WordPress?

Las fuentes desempeñan un papel esencial en el diseño de su sitio web y deben seleccionarse con cuidado. La combinación adecuada de fuentes puede ser tan agradable a la vista y desencadenar las emociones adecuadas como los colores y las imágenes correctas.

La buena noticia es que WordPress hace que sea fácil cambiar la fuente y personalizarla para que se adapte a los requisitos de tu sitio web. Desde el uso del personalizador de WordPress hasta la instalación de plugins y el uso del constructor de páginas, hemos cubierto varias formas en las que puedes cambiar las fuentes en WordPress.

¿Cómo se cambian las fuentes en WordPress? ¿Utilizas alguno de los métodos mencionados? ¿O hay algo que se nos haya pasado por alto? Nos gustaría saberlo.