Cómo agregar fuentes personalizadas en WordPress

¿Le gustaría agregar fuentes personalizadas a WordPress? Las fuentes personalizadas le permiten usar una hermosa combinación de diferentes fuentes en su sitio web para mejorar la tipografía y la experiencia del usuario. Además de verse bien, las fuentes personalizadas también pueden ayudarlo a mejorar la legibilidad, crear una imagen de marca y aumentar los usuarios en su sitio web. En este artículo, le mostraremos cómo agregar fuentes personalizadas a WordPress usando Google Fonts, Typekit y el método CSS3 @ Font-Face.

Nota: Cargar demasiadas fuentes puede ralentizar su sitio. Le recomendamos que elija dos fuentes y las use en su sitio web. También le mostraremos cómo cargarlos correctamente sin ralentizar su sitio web.
Antes de analizar cómo agregar fuentes personalizadas a WordPress, eche un vistazo a la búsqueda de las fuentes personalizadas que puede usar. Cómo encontrar fuentes personalizadas para usar en las fuentes de WordPress eran caras, pero no más. Hay muchos lugares para encontrar fuentes web gratuitas, como Google Fonts, Typekit, Fontsquirrel y Fonts.com. Si no sabe cómo combinar y coincidir con las fuentes, intente el par de fuentes. Ayuda a los diseñadores a asociar hermosas fuentes de Google. A medida que elija las fuentes, recuerde que el uso de demasiadas fuentes personalizadas ralentizará su sitio. Es por eso que debe seleccionar dos fuentes y usarlas en todo el diseño. Esto también traerá la consistencia de su diseño.
Tutorial de video
Suscríbete a WPBeginner
Si no le gusta el video o prefiere la guía escrita, continúe leyendo. La adición de fuentes personalizadas a WordPress de Google Fontsgoogle Fonts es la biblioteca de fuentes más grande, gratuita y más comúnmente utilizada entre los desarrolladores de sitios web. Hay varias formas en que puede agregar y usar Google Fonts en WordPress. Método 1: Agregar fuentes personalizadas utilizando el complemento fácil de Google Fonts Si desea agregar y usar Google Fonts en su sitio, entonces este método es, con mucho, el más fácil y recomendado para los principiantes.

Lo primero que debe hacer es instalar y activar el complemento fácil de Google Fonts. Para obtener más detalles, consulte nuestra guía paso por paso sobre cómo instalar un complemento de WordPress. Después de la activación, puede acceder a la página de la página »Personalizador. Esto abrirá la interfaz de personalización del tema animado, donde verá la nueva sección de tipografía.
Si hace clic en la impresión, mostrará diferentes secciones de su sitio web, donde puede aplicar Google Fonts. Simplemente haga clic en “Editar fuente” en la sección que desea editar.

En la sección de la familia de fuentes, puede elegir cualquier fuente de Google que desee usar en su sitio web. También puede elegir estilo de fuente, tamaño de fuente, relleno, borde y más.

Dependiendo del tema, el número de secciones aquí podría ser limitada y es posible que no pueda cambiar directamente la selección de fuentes para muchas áreas diferentes de su sitio web. Para remediar esto, el complemento también le permite crear sus propios controles y usarlos para cambiar las fuentes en su sitio web. Primero, debe acceder a la configuración »Página de Google Fonts y proporcionar un nombre de control de fuentes. Use algo que lo ayude a comprender rápidamente dónde usará este control de fuentes. Luego haga clic en el botón “Crear control de fuentes” y luego se le pedirá que ingrese a los selectores CSS.
Puede agregar elementos HTML que desea apuntar (por ejemplo, H1, H2, P, Blockquote) o usar clases CSS. Puede usar la herramienta de inspección en su navegador para averiguar qué clases CSS utilizan el área particular que desea cambiar.

Ahora haga clic en el botón “Guardar el control de fuente” para almacenar la configuración. Puede crear cuántos controladores de fuentes necesita para diferentes secciones de su sitio web. Para usar estos controladores de fuentes, debe ir al personalizador y hacer clic en la pestaña Tipografía. Bajo la tipografía, ahora verá una opción de “tipografía temática”. Si hace clic en él, se mostrarán los comandos de fuente personalizados que ha creado anteriormente. Ahora puede hacer clic en el botón de edición para seleccionar las fuentes y buscar este control.
Recuerde hacer clic en el botón de rescate o publicación para guardar los cambios. Método 2: Agregue las fuentes de Google manualmente a WordPress Este método requiere agregar código a los archivos temáticos de WordPress. Si no ha hecho esto antes, consulte nuestra guía sobre la copia y pegado del código en WordPress. Primero, visite la biblioteca de Google Font y seleccione una fuente que desee usar. Luego haga clic en el botón Rápido en Fuente.

En la página de fuentes, verá los estilos disponibles para esa fuente. Seleccione los estilos que desea usar en el proyecto y luego haga clic en el botón Barra lateral en la parte superior.

Luego tendrá que moverse a la pestaña “Incorporada” desde la barra lateral para copiar el código de incorporación. Hay dos formas en que puede agregar este código a su sitio web de WordPress. Primero, simplemente puede editar el archivo Header.php del tema y pegar el código antes de la etiqueta . Sin embargo, si no está familiarizado con la edición de código en WordPress, puede usar un complemento para agregar este código. Simplemente instale y active el complemento Insertar encabezados y pies de página. Para obtener más detalles, consulte nuestra guía paso por paso sobre cómo instalar un complemento de WordPress.

Al activar, vaya a la página Configuración »Inserte encabezados y sótanos y pegue el código de incorporación en el cuadro” Escrituras en el encabezado “.

Recuerde hacer clic en el botón Guardar para almacenar sus cambios. El complemento ahora comenzará a cargar el código de incorporación de Google Font en todas las páginas de su sitio web. Puede usar esta fuente en la hoja de estilo de su tema de la siguiente manera: .h1 sitio de sitio {

Font-Family: ‘Open Sans’, Arial, Sans-Serif;}
Para obtener instrucciones más detalladas, consulte nuestra guía sobre cómo agregar Google Fonts en WordPress. Agregar fuentes personalizadas en WordPress usando typekit

Typekit de Adobe Fonts es otro recurso gratuito y premium para fuentes maravillosas que puede usar en sus proyectos de diseño. Tienen una suscripción paga, así como un plan limitado gratuito que puede usar. Simplemente regístrese para obtener una cuenta de Adobe Fonts y vaya a la sección de búsqueda de fuentes. Desde aquí debe hacer clic en el botón <// t para seleccionar una fuente y crear un proyecto.
Luego verá el código de incorporación con el ID del proyecto. También le mostrará cómo usar la fuente en el CSS de su tema que necesita para copiar e insertar este código en la sección de su sitio web.
Hay dos formas en que puede agregar este código a su sitio web de WordPress. Primero, simplemente puede editar el archivo Header.php del tema y pegar el código antes de la etiqueta . Sin embargo, si no está familiarizado con la edición de código en WordPress, puede usar un complemento para agregar este código. Simplemente instale y active el complemento Insertar encabezados y pies de página. Al activar, vaya a la página Configuración »Inserte encabezados y sótanos y pegue el código de incorporación en el cuadro” Escrituras en el encabezado “.
Esto es todo, ahora puede usar la fuente Typekit que ha seleccionado en la hoja de estilo de su tema de WordPress de la siguiente manera: H1. Site-Bitle {

Font-Family: Gilbert, Sans-Serif;

}

Para obtener instrucciones más detalladas, consulte nuestro tutorial sobre cómo agregar una impresión maravillosa en WordPress usando Typekit. Agregar fuentes personalizadas a WordPress usando CSS3 @ Font-Facing La forma más directa de agregar fuentes personalizadas a WordPress es agregar fuentes utilizando el método CSS3 @ Font-Face. Este método le permite usar cualquier fuente que desee en su sitio web. Lo primero que debe hacer es descargar la fuente que le guste en un formato web. Si no tiene el formato web para su fuente, puede convertirla utilizando el generador FontSquirrel WebFont. Una vez que tenga archivos WebFont, debe cargarlos en su servidor de alojamiento de WordPress. El mejor lugar para cargar fuente está en una nueva carpeta de “fuentes” en su tema o en el director infantil. Puede usar el FTP o el Administrador de archivos de CPANEL para cargar la fuente. Una vez que haya cargado la fuente, debe cargar la fuente en la hoja de estilo de su base utilizando la regla CSS3 @ FONT-Fourth de la siguiente manera: @ Font-Facing {Font-Family: Arvo;

SRC: URL (http://www.example.com/wp-content/themes/your-theme/fonts/arvo-regular.ttf);
Font-Weight: Normal;
}
Recuerde reemplazar la fuente de fuentes y la URL con la suya después de eso, puede usar esa fuente en cualquier lugar de la hoja de estilo de su base, como: .h1 Site-Title {
Font-Family: “Arvo”, Arial, Sans-Serif;
}