Una excelente manera de agregar algo de marca e individualismo a su sitio de WordPress es cambiar las fuentes en su tema.

La tipografía y otros elementos de bandas crean una buena primera impresión, establecen el ambiente para los visitantes de su sitio y establecen la identidad de su marca. Los estudios^(Studies) también han encontrado que las fuentes afectan la capacidad de los lectores para aprender, recordar información y memorizar textos.

Si acaba de instalar un tema de WordPress^{(installed a WordPress theme)} o tiene algo de CSS y experiencia en codificación, le mostraremos varias opciones que puede usar para cambiar las fuentes en WordPress .

Cómo cambiar las fuentes en WordPress^{(How to Change Fonts in WordPress)}

Hay tres opciones principales disponibles para cambiar las fuentes en WordPress:

• Use fuentes web como Google Fonts , Fonts.com o Adobe Edge Web Fonts , que están alojadas en un sitio de terceros
• Codifique^(Code) fuentes web en su tema y póngalas en cola
• Aloje^(Host) fuentes en su sitio y agréguelas a su tema

1. Cómo cambiar las fuentes en WordPress usando fuentes web^{(1. How to Change Fonts in WordPress Using Web Fonts)}

El uso de fuentes web es una forma más fácil y rápida de cambiar las fuentes en WordPress que descargar y cargar archivos de fuentes.

Con esta opción, puede acceder a una variedad de fuentes^{(access a variety of fonts)} sin actualizarlas cada vez que hay un cambio, y no ocupa espacio en el servidor de su alojamiento. Las fuentes se sirven directamente desde los servidores del proveedor utilizando un complemento o agregando código a su sitio.

Asegúrese^(Make) de que las fuentes web que elija para su sitio coincidan con la identidad de su marca, sean fáciles de leer para el cuerpo del texto, sean familiares para los visitantes del sitio web y transmitan el tipo de estado de ánimo y la imagen que desea.

Puede agregar fuentes web usando un complemento de WordPress^{(using a WordPress plugin)} o manualmente agregando algunas líneas de código a su sitio. Exploremos ambas opciones.

Cómo agregar fuentes web usando un complemento de WordPress^{(How to Add Web Fonts Using a WordPress Plugin)}

Dependiendo de la fuente web que haya elegido, puede usar un complemento de WordPress para acceder a la biblioteca de fuentes y elegir la que desea en su sitio. Para esta guía, elegimos Google Fonts y usamos el complemento de tipografía de Google Fonts .^{(Google Fonts Typography)}

1. Para comenzar, inicie sesión en su panel de administración de WordPress y seleccione ^(WordPress)Plugins > Add New .

1. Escriba Tipografía de fuentes de Google^{(Google Fonts Typography)} en el cuadro de búsqueda y seleccione Instalar ahora^{(Install Now)} .

1. Seleccione Activar^(Activate) .

1. A continuación, acceda al Personalizador^(Customizer) yendo a Appearance > Customize .

1. Seleccione la sección Fuentes de Google^{(Google Fonts)} .

1. A continuación, haga clic en el enlace para abrir la configuración de las fuentes y configurarlas de la siguiente manera:

• En Configuración básica^{(Basic Settings)} , establezca la fuente predeterminada para el texto del cuerpo, los títulos y los botones.

• En Configuración avanzada^{(Advanced Settings)} , configure el título y la descripción de su sitio, el menú, los encabezados y el contenido, la barra lateral y el pie de página.

• Desmarque^(Uncheck) cualquier peso de fuente no deseado en la sección Carga de fuente para ^{(Font Loading)}evitar ralentizar su sitio^{(avoid slowing down your site)} .

Si hay fuentes en su sitio que no se muestran o no funcionan correctamente, utilice la sección Depuración^{(Debugging )} para solucionar el problema.

1. Puede probar estas configuraciones en el Personalizador^(Customizer) para asegurarse de que funcionan de la manera que desea y luego seleccione Publicar^(Publish) .

Nota^(Note) : si olvida seleccionar publicar en el Personalizador^(Customizer) , perderá todos los cambios que haya realizado.

Cómo agregar fuentes web usando código^{(How to Add Web Fonts Using Code)}

Puede instalar y usar fuentes web si tiene acceso al código de su tema. Esta es una alternativa manual a agregar un complemento adicional, pero no es complicado si sigue los pasos cuidadosamente.

Sin embargo, hay diferentes pasos a seguir si está utilizando un tema del directorio de temas de WordPress o un tema personalizado.

Si compró un tema del directorio de temas de WordPress , cree un tema secundario^{(create a child theme)} y luego asígnele el archivo style.css y functions.php. Es más fácil si tiene un tema personalizado, ya que puede editar la hoja de estilo y el archivo de funciones de su tema.

1. Para comenzar, seleccione una fuente de la biblioteca de Google Fonts y seleccione el ícono + (plus) para agregarla a su biblioteca.

1. A continuación, seleccione la pestaña en la parte inferior donde encontrará el código para agregar a su sitio. Vaya a la sección Incrustar fuente^{(Embed font)} en la pestaña Incrustar . ^(Embed)Encontrará el código generado por Google Fonts , que se parece a esto:

<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>

Nota^(Note) : elegimos Work Sans para esta guía, por lo que el nombre de la fuente puede ser diferente al tuyo según lo que hayas elegido.

1. Copie esta parte del código: https://fonts.googleapis.com/css2?family=Work+Sans

Esto le permite poner en cola el estilo de los servidores de Google Fonts para evitar conflictos con complementos de terceros. También permite modificaciones de temas secundarios más sencillas.

1. Para poner en cola la fuente, abra el archivo de funciones y agregue el siguiente código. ( Reemplace^(Replace) el enlace con el enlace que obtiene de Google Fonts ):

función wosib_add_google_fonts() { ^{(function wosib_add_google_fonts() {)}
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Work Sans’);

wp_enqueue_style('googleFuentes'); ^{(wp_enqueue_style( ‘googleFonts’);)}
}

add_action('wp_enqueue_scripts', 'mybh_add_google_fonts');

1. Puede agregar una nueva línea a su función o a la misma línea si desea agregar más fuentes en el futuro de la siguiente manera:

función mybh_add_google_fonts() { ^{(function mybh_add_google_fonts() {)}
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Cambria|Work Sans’);

wp_enqueue_style('googleFuentes'); ^{(wp_enqueue_style( ‘googleFonts’);)}
}

add_action('wp_enqueue_scripts', 'mybh_add_google_fonts');

En este caso, hemos puesto en cola las fuentes Cambria y Work Sans .

El siguiente paso es agregar las fuentes a la hoja de estilo de su tema para que la fuente funcione en su sitio.

1. Para hacer esto, abra el archivo style.css de su tema y agregue el código para diseñar elementos individuales con sus fuentes web de la siguiente manera:

cuerpo { ^{(body {)}
familia de fuentes: 'Work Sans', sans-serif; ^{(font-family: ‘Work Sans’, sans-serif; )}
}

h1, h2, h3 {
familia de fuentes: 'Cambria', serif; ^{(font-family: ‘Cambria’, serif;)}
}

En este caso, la fuente principal será Work Sans , mientras que los elementos de encabezado como h1, h2 y h3 usarán Cambria .

Una vez hecho esto, guarde la hoja de estilo y verifique si sus fuentes funcionan como deberían. De lo contrario, verifique que las fuentes no se anulen en la hoja de estilo, o borre el caché de su navegador e intente nuevamente.

1. Tenga una fuente de respaldo para garantizar que las fuentes se puedan representar o acceder fácilmente, especialmente para usuarios con dispositivos antiguos, conexiones deficientes o si el proveedor de la fuente tiene problemas técnicos. Para hacer esto, vaya a la hoja de estilo y edite el CSS para que diga lo siguiente:

cuerpo { ^{(body {)}
familia de fuentes: 'Work Sans', Arial, sans-serif; ^{(font-family: ‘Work Sans’, Arial, sans-serif;)}
}

h1, h2, h3 {
familia de fuentes: 'Cambria', Times New Roman, serif; ^{(font-family: ‘Cambria’, Times New Roman, serif;)}
}

Si todo está bien, los visitantes de su sitio verán sus fuentes web predeterminadas, en nuestro caso, Work Sans y Cambria . Si hay problemas, verán las fuentes de respaldo, por ejemplo, Arial o Times New Roman en nuestro caso.

2. Cómo cambiar las fuentes en WordPress alojando fuentes^{(2. How to Change Fonts in WordPress by Hosting Fonts)}

Alojar fuentes en sus propios servidores lo ayuda a optimizar el rendimiento de sus fuentes web, pero también es una forma más segura^{(a more secure way)} de hacerlo en lugar de obtener recursos de sitios de terceros.

Google Fonts y otras fuentes web le permiten descargar fuentes para usarlas como fuentes alojadas localmente, pero aún puede descargar otras fuentes a su computadora siempre que las licencias lo permitan.

1. Para comenzar, descargue, descomprima, cargue el archivo de fuente en su sitio y luego vincúlelo en su hoja de estilo. En este caso, no tiene que poner en cola las fuentes en el archivo functions.php como lo hizo con las fuentes web. Confirme que los archivos que está cargando están en formato .woff antes de usarlos en su sitio web.

1. A continuación, vaya a wp-content/themes/themename para cargar el archivo de fuente en su tema. 
2. Abra la hoja de estilo y agregue el siguiente código (en este caso, estamos usando la fuente Work Sans , pero puede reemplazarla con sus propias fuentes):

@font-face {
familia de fuentes: 'Trabajo Sans'; ^{(font-family: ‘Work Sans’;)}
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
font-weight: normal;
estilo de fuente: normal; ^{( font-style: normal;)}
}

@font-face {
familia de fuentes: 'Trabajo Sans'; ^{( font-family: ‘Work Sans’;)}
src: url( “fonts/Work Sans-Bold.ttf”) format(‘woff’); /* medium */
font-weight: negrita; ^{( font-weight: bold;)}
estilo de fuente: normal; ^{(font-style: normal;)}
}

@font-face {
familia de fuentes: 'Cambria'; ^{(font-family: ‘Cambria’;)}
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
font-weight: normal;
estilo de fuente: normal; ^{( font-style: normal;)}
}

Nota^(Note) : el uso de @fontface le permite usar negrita, cursiva y otras variaciones de su fuente, después de lo cual puede especificar el grosor o el estilo de cada fuente.

1. A continuación, agregue estilo a sus elementos de la siguiente manera:

cuerpo { ^{(body {)}
familia de fuentes: 'Work Sans', Arial, sans-serif; ^{(font-family: ‘Work Sans’, Arial, sans-serif;)}
src: url( “/fonts/Work Sans-Medium.ttf” );
}

h1, h2, h3 {
familia de fuentes: 'Cambria', Times New Roman, serif; ^{(font-family: ‘Cambria’, Times New Roman, serif;)}
}

Personaliza tu tipografía de WordPress^{(Customize Your WordPress Typography)}

Cambiar las fuentes en WordPress es una gran idea para mejorar la marca y la experiencia del usuario. No es una tarea sencilla, pero tendrá más control sobre su tema.

¿^(Were) Pudo personalizar las fuentes de su sitio siguiendo los pasos de los consejos de esta guía? Cuéntanos^(Tell) en los comentarios.

How to Change Fonts in WordPress

A great way to add some branding and individualіsm to your WordРress site is to change the fonts in your themе.

Typography and other banding elements create a good first impression, set the mood for your site’s visitors, and establish your brand’s identity. Studies have also found that fonts affect readers’ ability to learn, recall information, and memorize texts.

If you just installed a WordPress theme or have some CSS and coding experience, we’ll show you several options you can use to change fonts in WordPress.

How to Change Fonts in WordPress

There are three main options available for you to change fonts in WordPress:

• Use web fonts like Google Fonts, Fonts.com, or Adobe Edge Web Fonts, which are hosted on a third-party site
• Code web fonts into your theme and enqueue them
• Host fonts on your site and add them to your theme

1. How to Change Fonts in WordPress Using Web Fonts

Using web fonts is an easier and quicker way to change fonts in WordPress than downloading and uploading font files.

With this option, you can access a variety of fonts without updating them each time there’s a change, and it doesn’t hog server space on your hosting. The fonts are served directly from the provider’s servers using a plugin or by adding code to your site.

Make sure the web fonts you choose for your site match your brand identity, are easy to read for body text, are familiar to website visitors, and convey the kind of mood and image that you want.

You can add web fonts using a WordPress plugin or manually by adding a few lines of code to your site. Let’s explore both options.

How to Add Web Fonts Using a WordPress Plugin

Depending on the web font you’ve chosen, you can use a WordPress plugin to access the library of fonts and pick out the one you want on your site. For this guide, we chose Google Fonts and used the Google Fonts Typography plugin.

1. To get started, log in to your WordPress admin dashboard, and select Plugins > Add New.

1. Type Google Fonts Typography in the search box, and select Install Now.

1. Select Activate.

1. Next, access the Customizer by going to Appearance > Customize.

1. Select the Google Fonts section.

1. Next, click on the link to open the fonts’ settings and configure them as follows:

• Under Basic Settings, set the default font for your body text, headings, and buttons.

• Under Advanced Settings, configure your site title and description, menu, headings and content, sidebar, and footer.

• Uncheck any unwanted font weights in the Font Loading section to avoid slowing down your site.

If there are fonts on your site that aren’t displaying or working properly, use the Debugging section to troubleshoot.

1. You can test these settings in the Customizer to make sure they’re working the way you want them to, and then select Publish.

Note: If you forget to select publish in the Customizer, you’ll lose all the changes you’ve made.

How to Add Web Fonts Using Code

You can install and use web fonts if you have access to your theme’s code. This is a manual alternative to adding an extra plugin, but it’s not complicated if you follow the steps carefully.

However, there are different steps to take if you’re using a theme from the WordPress theme directory or a customized theme.

If you bought a theme from the WordPress theme directory, create a child theme and then give it the style.css and functions.php file. It’s easier if you have a customized theme as you can edit the stylesheet and functions file from your theme.

1. To get started, select a font from the Google Fonts library, and select the + (plus) icon to add it to your library.

1. Next, select the tab at the bottom where you’ll find the code to add to your site. Go to the Embed font section under the Embed tab. You’ll find the code generated by Google Fonts, which looks something like this:

<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>

Note: We picked Work Sans for this guide so the font name may be different on yours depending on what you picked.

1. Copy this part of the code: https://fonts.googleapis.com/css2?family=Work+Sans

This allows you to enqueue the style from Google Fonts servers to prevent conflict with third-party plugins. It also allows for easier child theme modifications.

1. To enqueue the font, open the functions file and add the following code. (Replace the link with the link you get from Google Fonts):

function wosib_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Work Sans’);

wp_enqueue_style( ‘googleFonts’);
}

add_action( ‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’ );

1. You can add a new line to your function or to the same line if you want to add more fonts in future as follows:

function mybh_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Cambria|Work Sans’);

wp_enqueue_style( ‘googleFonts’);
}

add_action( ‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’ );

In this case, we’ve enqueued both Cambria and Work Sans fonts.

The next step is to add the fonts to your theme’s stylesheet to make the font work on your site.

1. To do this, open your theme’s style.css file and add the code to style individual elements with your web fonts as follows:

body {
font-family: ‘Work Sans’, sans-serif;
}

h1, h2, h3 {
font-family: ‘Cambria’, serif;
}

In this case, the main font will be Work Sans while header elements like h1, h2, and h3 will use Cambria.

Once done, save the stylesheet and check whether your fonts are working as they should. If not, check that the fonts aren’t being overridden in the stylesheet, or clear your browser cache and try again.

1. Have a backup font in place to ensure that the fonts can be rendered or accessed easily especially for users with old devices, poor connections, or if the font provider has technical issues. To do this, go to the stylesheet and edit the CSS to read as follows:

body {
font-family: ‘Work Sans’, Arial, sans-serif;
}

h1, h2, h3 {
font-family: ‘Cambria’, Times New Roman, serif;
}

If all is well, your site’s visitors will see your default web fonts, in our case Work Sans and Cambria. If there are issues, they’ll see the backup fonts, for example Arial or Times New Roman in our case.

2. How to Change Fonts in WordPress by Hosting Fonts

Hosting fonts on your own servers helps you optimize the performance of your web fonts, but it’s also a more secure way of doing it instead of pulling in resources from third-party sites.

Google Fonts and other web fonts allow you to download fonts for use as locally hosted fonts, but you can still download other fonts to your computer provided the licenses permit you to do so.

1. To get started, download, unzip, upload the font file to your site and then link it in your stylesheet. In this case you don’t have to enqueue the fonts in the functions.php file as you did with the web fonts. Confirm that the files you’re uploading are in the .woff format before using them on your website.

1. Next, go to wp-content/themes/themename to upload the font file to your theme. 
2. Open the stylesheet and add the following code (in this case we’re using Work Sans font but you can replace that with your own fonts):

@font-face {
font-family: ‘Work Sans’;
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: ‘Work Sans’;
src: url( “fonts/Work Sans-Bold.ttf”) format(‘woff’); /* medium */
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: ‘Cambria’;
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
font-weight: normal;
font-style: normal;
}

Note: Using @fontface allows you to use bold, italics and other variations of your font, after which you can specify the weight or style for each font.

1. Next, add styling for your elements as follows:

body {
font-family: ‘Work Sans’, Arial, sans-serif;
src: url( “/fonts/Work Sans-Medium.ttf” );
}

h1, h2, h3 {
font-family: ‘Cambria’, Times New Roman, serif;
}

Customize Your WordPress Typography

Changing fonts in WordPress is a great idea to improve the branding and user experience. It’s not a straightforward task, but you’ll have more control over your theme.

Were you able to customize your site’s fonts using the steps using the tips in this guide? Tell us in the comments.

Related posts

• Cómo mover WordPress site de un anfitrión a otro

• Cómo instalar y configurar WordPress en Microsoft Azure

• Cómo ejecutar extraordinariamente rápido WordPress en Microsoft Azure

• Cómo configurar Privacy en WordPress y por qué es importante

• Cómo instalar WordPress en Google Cloud Platform

• El mejor formato de escritura de blog para transmitir sus puntos

• Los 3 mejores complementos de SEO para WordPress

• Cómo comprobar si se ha prohibido un sitio web de AdSense

• Squarespace Vs WordPress: ¿Cuál es la mejor plataforma de sitio?

• Wix Vs WordPress: ¿Cuál es mejor para crear su sitio web?

• Cómo hacer un WordPress Site Secure

• Cómo editar el pie de página en WordPress

• Mostrar el extracto en la página de inicio de WordPress blog

• Reseña del libro: Cree su propio sitio web: una guía cómica de HTML, CSS y Wordpress

• Cómo instalar un tema en WordPress

• 9 complementos imprescindibles para las nuevas instalaciones de WordPress

• Cómo realizar pruebas divididas efectivas en WordPress

• Cómo aumentar el rendimiento en WordPress a través de una base de datos limpia

• Cómo rastrear Broken Links con Google Webmaster Tool

• Cómo hacer la transición del editor clásico de WordPress a Gutenberg