Cómo agregar fuentes personalizadas a un tema de WordPress

Las fuentes juegan un papel importante en el diseño, la legibilidad y, a veces, incluso la funcionalidad de su sitio web. Elija el incorrecto y podría arruinar lo que de otro modo sería un sitio web de gran apariencia. Del mismo modo, tanto el estilo como el tamaño de la fuente pueden determinar qué tan fácil (¡o no!) es usar su sitio web. Pero, ¿qué haces si tu fuente ideal no está disponible en tu tema de WordPress? En este artículo, veremos varias formas en que puede usar la fuente personalizada de su elección.

¡Vámonos!

Por qué usar fuentes personalizadas

Muchos temas ahora vienen con una selección de fuentes para que elijas que están 'integradas'. En muchos casos, estos son adecuados para el sitio web que está diseñando. Pero, si no puede seleccionar la fuente correcta con las fuentes que ya se ofrecen, entonces es hora de buscar fuentes alternativas y esto significará que debe poder agregar sus fuentes personalizadas a su sitio web.

El uso de fuentes personalizadas le permite aprovechar la hermosa combinación de diferentes fuentes en su sitio web para mejorar la tipografía y la experiencia del usuario. La investigación ha demostrado que hay beneficios significativos al usar la tipografía correcta. Esto no solo incluye una mejora en la experiencia general del usuario, sino también en qué tan bien el cerebro procesa la información en un sitio web. Cuanto más fácil sea esto, más fácil será comunicar su oferta comercial/servicios a sus clientes.

Si bien el uso de fuentes personalizadas definitivamente puede mejorar la usabilidad de su sitio web, ¡es importante no volverse loco por las fuentes! Una selección de dos fuentes que se hayan emparejado cuidadosamente debería ser amplia. Más, y puede correr el riesgo de ralentizar su sitio web.

Prosigamos y veamos las opciones disponibles para agregar fuentes personalizadas a nuestro sitio web de WordPress.

Agregar fuentes de Google con el complemento de fuentes de Google

La forma más fácil y popular de agregar fuentes personalizadas a su sitio web de WordPress tiene que ser mediante el complemento Easy Google Fonts.

Después de instalar y activar este complemento, abra el personalizador de su tema en el menú Apariencia > Personalizar. Notará que en la barra lateral izquierda se ha agregado un nuevo menú desplegable de acordeón llamado Tipografía.

Haga clic para abrir esto y luego puede usar el botón 'Editar fuente' para cambiar rápidamente las fuentes de su sitio web, así como su peso respectivo, si están en mayúsculas, etc. y más. También puede usar las propiedades CSS para modificar aún más el estilo y el posicionamiento de las fuentes elegidas.

Además, incluso puede agregar sus propios controles de fuente. Para hacer esto, diríjase a la página de configuración del complemento en Configuración> Fuentes de Google.

Cree un nuevo control de fuente y defina los selectores de CSS. Por ejemplo, configuramos las clases .entry-title que corresponden a los títulos de las publicaciones de nuestro tema. Luego, cuando vuelva a visitar el personalizador, aparecerá un nuevo cuadro disponible con el nombre especificado para que aplique la personalización de la fuente a los títulos de las publicaciones de la misma manera que describimos anteriormente. ¡Fácil!

Agregar fuentes de Google manualmente

Si prefiere no usar un complemento pero aún quiere aprovechar el uso de Google Fonts en su sitio web de WordPress, no hay problema. Estos se pueden agregar manualmente con relativa facilidad. Echemos un vistazo cómo. Por supuesto, también hay una forma manual de agregar Google Fonts a su sitio web.

Paso uno:

Primero, debe obtener el enlace de su fuente del sitio de fuentes de Google.

Supongamos que desea utilizar la familia de fuentes Roboto. Cuando haga clic en esta fuente, será transferido a su página donde podrá obtener una vista previa de cualquier texto para asegurarse de que la fuente se adapte a sus necesidades. En el lado derecho, verá un cuadro 'Usar en la web' que incluye el enlace que necesitará para agregar esto a su sitio.

Para poner correctamente en cola Google Fonts en WordPress, abra el archivo functions.php de su tema con su editor favorito e inserte el siguiente código al final:

 function my_google_fonts() { wp_enqueue_style( 'my-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap', false ); } add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );

Copie la URL proporcionada en el texto del enlace de Google (comienza con https://) y luego reemplácela en el código anterior (en nuestro ejemplo, actualmente es https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap )

Luego, en el archivo style.css de su tema, use la fuente de la misma manera que lo haría con cualquier otra fuente, siguiendo las "reglas CSS para especificar familias" proporcionadas por Google.

 h1, h2, h3 { font-family: 'Roboto', sans-serif; }

Ahora, en la parte frontal de su sitio, debería ver la fuente Roboto aplicada a las áreas donde se especificó en su archivo CSS.

Añadir fuentes de Adobe

Una gran alternativa a Google Fonts son las fuentes de Adobe Fonts. El complemento Custom Adobe Fonts lo ayuda a incrustar estas fuentes fácilmente en su sitio web de WordPress y actualmente funciona con Astra Theme, Beaver Builder Theme, Beaver Builder Plugin y Elementor Page Builder.

Para comenzar, instale el complemento y luego diríjase a la extensa biblioteca de fuentes de Adobe para encontrar una fuente que se adapte a sus necesidades (deberá registrarse para iniciar sesión).

Hay un montón de formas de filtrar las fuentes y el sistema es bastante intuitivo de usar. Una vez que haya encontrado una fuente que le guste, haga clic en ella y mire cerca de la parte superior derecha de la página, donde verá que dice "Agregar al proyecto web". Se abrirá un cuadro como el siguiente. Asigne un nombre a su proyecto web y seleccione las variantes de fuente que desea incluir en este.

Una vez que le dé un nombre y presione el botón 'Crear', será llevado a la siguiente pantalla donde se proporcionan un código de inserción HTML y las reglas CSS. Ahora tiene dos opciones. Puede a) continuar usando el complemento Custom Adobe Fonts o b) incrustar estas fuentes manualmente.

Uso del complemento de fuentes de Adobe personalizadas

Esta es la forma más fácil de incluir sus fuentes de Adobe en su sitio web. Una vez que haya creado su proyecto, haga clic en 'Proyectos web' y busque su proyecto en la lista. Verá en la parte superior que hay un código de 'ID del proyecto' (como se muestra a continuación). Ahora, diríjase a la configuración del complemento de Adobe Font y haga clic en 'Fuentes Typekit personalizadas' en el menú. Luego ingrese este ID de proyecto en este cuadro y guárdelo.

Ahora verá esta fuente listada en el Personalizador de WordPress, Elementor u otro creador de páginas compatible que utilice. Selecciona y listo.

Incrustar fuentes personalizadas manualmente

La incrustación manual de fuentes de Adobe se realiza exactamente de la misma manera que describimos para incrustar fuentes de Google. Verá un enlace de incrustación de hoja de estilo proporcionado por Adobe (que se muestra a continuación) en la descripción general del proyecto web. Para ver las clases de CSS, haga clic en el texto 'Editar proyecto' y se proporcionan junto con cada estilo de fuente.

Cómo encontrar fuentes personalizadas y emparejarlas

También puede encontrar y descargar la fuente ideal para su sitio y cargarla desde las carpetas de su sitio web, ya que hay muchos recursos que ofrecen fuentes gratuitas o premium en una gran variedad.

También puede obtener ayuda de la herramienta en línea Font Pair, que es excelente para obtener una vista previa de las combinaciones de fuentes para que pueda mezclar y combinar las fuentes como mejor le parezca. Por la forma en que presenta los pares de fuentes, también es fácil descubrir otras sugerencias de emparejamiento navegando.

En nuestro blog, también puedes encontrar dos excelentes artículos sobre el emparejamiento de fuentes. ¡Ahí está la Guía de emparejamiento de fuentes para diseñadores web + 30 ejemplos asombrosos! en caso de que desee obtener más información sobre el emparejamiento de fuentes en cuanto al diseño con una excelente asesoría sobre lo que debe enfatizar y cómo lograr la mejor legibilidad y sensación. Puede encontrar más detalles sobre las herramientas de emparejamiento de fuentes en nuestro artículo Las 10 mejores herramientas de emparejamiento de fuentes para diseñadores web.

Cargar fuentes personalizadas desde carpetas

Aunque Google Fonts y Adobe Fonts ofrecen una increíble selección para elegir, además de una manera fácil de utilizarlos en su sitio web, no es la única opción disponible en su búsqueda de la fuente perfecta.

Hay varios sitios web excelentes que venden fuentes personalizadas que han sido cuidadosamente creadas por diseñadores. Font Squirrel, por ejemplo, ofrece una gran biblioteca de fuentes y, lo que es más importante, permite el uso comercial y un formato fácil de implementar para estas fuentes. Hay una mezcla de fuentes gratuitas y 'premium' en el sitio (que deben pagarse).

Una gran fuente que quizás quieras considerar de Font Squirrel es Fira Sans. Usemos esto como ejemplo para averiguar cómo instalarlo en nuestro sitio web de WordPress para su uso.

Primero, haga clic en la pestaña 'Webfont Kit'. Marque la casilla 'WOFF y luego haga clic en 'Descargar kit @Font-Face'.

Obtendrá un archivo zip que ahora necesita ser extraído. En esta carpeta encontrará el archivo de fuente junto con un archivo stylesheet.css que contiene el código que necesitará para su propia hoja de estilo CSS.

Para OpenSans-ExtraBold-webfont por ejemplo, tenemos que usar el siguiente CSS:

 @font-face { font-family: 'open_sansextrabold'; src: url('OpenSans-ExtraBold-webfont.eot'); src: url('OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-ExtraBold-webfont.woff2') format('woff2'), url('OpenSans-ExtraBold-webfont.woff') format('woff'), url('OpenSans-ExtraBold-webfont.ttf') format('truetype'), url('OpenSans-ExtraBold-webfont.svg#open_sansextrabold') format('svg'); font-weight: normal; font-style: normal; }

Su mejor opción es colocar todos los archivos de fuentes de todos los formatos dentro de un directorio apropiado de su elección en la carpeta de su tema. En nuestro ejemplo, se encuentra en la carpeta /wp-content/themes/twentytwenty/assets/fonts/open-sans/ .

Dentro de la misma carpeta, cree un archivo open-sans.css y coloque dentro todo el código CSS de cada archivo stylesheet.css para que su contenido se vea así:

 @font-face { font-family: 'open_sansbold'; src: url('OpenSans-Bold-webfont.eot'); src: url('OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-Bold-webfont.woff') format('woff'), url('OpenSans-Bold-webfont.ttf') format('truetype'), url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'open_sansbold_italic'; src: url('OpenSans-BoldItalic-webfont.eot'); src: url('OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-BoldItalic-webfont.woff') format('woff'), url('OpenSans-BoldItalic-webfont.ttf') format('truetype'), url('OpenSans-BoldItalic-webfont.svg#open_sansbold_italic') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'open_sansextrabold'; src: url('OpenSans-ExtraBold-webfont.eot'); src: url('OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-ExtraBold-webfont.woff') format('woff'), url('OpenSans-ExtraBold-webfont.ttf') format('truetype'), url('OpenSans-ExtraBold-webfont.svg#open_sansextrabold') format('svg'); font-weight: normal; font-style: normal; }

Esto también ayuda a los distintos navegadores a seleccionar la fuente que admite. Si necesita poner en cola el archivo CSS de las fuentes al estilo de WordPress, debe hacerlo en functions.php de esta manera:

 function my_custom_fonts() { wp_enqueue_style( 'my-custom-fonts', get_template_directory_uri() . '/assets/fonts/open-sans/open-sans.css', false ); } add_action( 'wp_enqueue_scripts', 'my_custom_fonts' );

No olvide reemplazar la URL con la ruta a su archivo open-sans.css.

Conclusión

Elegir la fuente correcta al crear su sitio web tiene un impacto significativo en la apariencia y el funcionamiento de su sitio web. Con tantas fuentes increíbles para elegir, no sienta que tiene que ceñirse solo a las fuentes proporcionadas por su tema. ¡Esperemos que este artículo le muestre cómo puede usar casi cualquier fuente adecuada para su sitio web de WordPress!