Cómo agregar fuentes personalizadas a WordPress

Si desea que su sitio web realmente se destaque entre la multitud, el uso de fuentes personalizadas lo ayudará a lograrlo. Hay miles de hermosas fuentes personalizadas para elegir, y al seleccionar las adecuadas para su proyecto, podrá crear un sitio web que no solo sea único sino que también refleje su estilo y marca. Entonces, ¿cómo se agregan fuentes personalizadas a WordPress?

En este artículo, cubriremos todo lo que necesita saber sobre cómo aplicar fuentes personalizadas a su sitio web. Esto incluye:

• Dónde encontrar fuentes personalizadas
• Cómo agregar Google Fonts a su sitio web usando el complemento Easy Google Fonts
• Agregar Google Fonts a su sitio web manualmente (no se requiere complemento)
• Agregar fuentes de Adobe a WordPress
• Cómo agregar cualquier fuente personalizada a su espacio web

¿Listo para comenzar?

¿Dónde puedes encontrar fuentes personalizadas?

Hoy en día, muchos temas premium de WordPress vienen con una gran cantidad de fuentes personalizadas. Sin embargo, esto a menudo puede aumentar la hinchazón del tema e impactar los tiempos de carga de su sitio web más de lo que piensa. También encontrará que en realidad solo usa un par de fuentes personalizadas como máximo, por lo que la mayoría de las fuentes que proporciona su tema nunca serán necesarias.

Por lo tanto, recomendamos elegir un tema ligero de WordPress, al que luego puede agregar fuentes personalizadas cuando sea necesario. Hay varios lugares donde puede encontrar las fuentes personalizadas adecuadas para su sitio web. Vamos a ver…

• Google Fonts: la opción más popular, Google Fonts, ofrece un directorio gratuito de más de 900 fuentes de diseño de código abierto que se pueden usar en más de 135 idiomas. Estas fuentes se pueden explorar rápidamente y luego integrarse a la perfección en cualquier proyecto de diseño web.
• Adobe Fonts (anteriormente conocido como Typekit): aunque Typekit ofrecía versiones gratuitas y premium de su servicio, ahora renombrado como Adobe Fonts, deberá registrarse en el paquete pago de Adobe Creative Cloud para acceder a este recurso. Hay miles de fuentes para elegir, todas las fuentes tienen licencia para uso personal y comercial, y también puede seleccionar entre paquetes de fuentes con temas de proyectos, que son perfectos para aquellos que no tienen buen ojo para el diseño.
• Font Squirrel: en la biblioteca de Font Squirrel encontrará una combinación de fuentes gratuitas y premium, estas últimas que se pueden comprar como compras únicas. Una vez más, puede elegir entre miles de fuentes de alta calidad, la mayoría gratuitas y con licencia comercial.
• Fonts.com: con más de 150 000 productos de fuentes web y de escritorio, Fonts.com contiene una impresionante colección de fuentes personalizadas de primera calidad. También encontrará una variedad de artículos interesantes en el blog de Font.com, compartiendo consejos y técnicas tipográficas.
• FontPair: al ofrecer una experiencia ligeramente diferente a los otros recursos, FontPair combina fuentes de Google Fonts, lo que lo ayuda a encontrar las combinaciones correctas de fuentes para su sitio web.

Entonces, ahora sabes dónde encontrar fuentes personalizadas. Veamos a continuación cómo agregar Google Fonts a su sitio web de WordPress.

Cómo agregar fuentes de Google a WordPress usando el complemento Easy Google Fonts

Como Google Fonts es el recurso más popular para fuentes personalizadas, comenzaremos por ver cómo agregar una fuente de esta biblioteca a su sitio web. Hay varias formas de hacer esto, pero la opción más rápida y fácil es usar el complemento de WordPress Easy Google Fonts.

Easy Google Fonts es un complemento gratuito de WordPress que le permitirá insertar fuentes personalizadas en su sitio web de WordPress, sin tener que tocar una línea de código. Al integrarse con el personalizador de WordPress, este complemento le permitirá insertar y usar las fuentes de Google en el front-end de su sitio web en tiempo real, sin tener que actualizar la página.

Así que ahora descubramos cómo instalar y usar este complemento.

Paso 1: Instale Easy Google Fonts

Para comenzar con Easy Google Fonts, abra su panel de WordPress y seleccione Complementos> Agregar nuevo en el menú.

Luego escriba Easy Google Fonts en la función de búsqueda y, una vez que se haya recuperado el complemento, haga clic en Instalar > Activar .

Ahora encontrará Easy Google Fonts en Configuración en su menú de WordPress.

Paso 2: edite las fuentes en el personalizador de WordPress

Una vez que haya instalado Easy Google Fonts, desde su menú de WordPress, seleccione Apariencia > Personalizar . Su sitio web ahora se abrirá en el front-end, donde encontrará una sección de Tipografía que se ha agregado al personalizador.

Haz clic en Tipografía. A continuación, puede seleccionar las diferentes áreas de su sitio web en las que le gustaría aplicar una fuente de Google personalizada (p. ej., párrafo, encabezado 2, encabezado 3, etc.).

Debajo de la sección que desea editar, haga clic en Editar fuente . Luego puede seleccionar la fuente que le gustaría usar; podrá obtener una vista previa de cómo se ve cada fuente directamente en su sitio web.

No solo puede modificar el tipo de fuente, sino que también puede cambiar el color, el tamaño, la posición y mucho más. Una vez que esté satisfecho con su nueva fuente, haga clic en Publicar .

Paso 3: Cree controles de fuente personalizados

Los controles predeterminados de Easy Google Fonts le permitirán modificar las fuentes de las secciones de párrafo y los encabezados 1-6. Sin embargo, no todos los elementos de su tema son manejables por los controles de fuente predeterminados.

Si desea modificar un elemento diferente de su tema (que no sea un párrafo o un encabezado), deberá crear sus propios controles de fuente personalizados. Aunque Easy Font Control le permite hacer esto fácilmente, aún necesitará una comprensión básica de los selectores de CSS.

Para agregar controles de fuente personalizados, seleccione Configuración> Fuentes de Google desde su panel de WordPress. Luego, en la pestaña Editar controles de fuente , asigne a su nuevo grupo de control de fuente un nombre apropiado y luego seleccione Crear control de fuente . Aquí crearemos un control de fuente para blockquotes...

En Agregar selectores de CSS , agregue el selector de CSS para el elemento que desea administrar. Puede agregar más de un elemento si lo desea. A continuación, seleccione Guardar control de fuentes .

De vuelta en el Personalizador en el front-end de su sitio web, en Tipografía , ahora encontrará la opción Tipografía de tema, donde puede acceder a sus nuevos controles personalizados.

Ahora puede seleccionar una nueva fuente personalizada para el elemento personalizado específico y cambiar cualquier otra configuración de Apariencia y Posicionamiento .

Easy Custom Fonts es una excelente opción para cualquiera que desee agregar fuentes personalizadas a WordPress desde Google. Sin embargo, si lo prefiere, también puede agregar manualmente Google Fonts a su sitio web usando solo código, sin complemento. Averigüemos cómo hacer esto…

Cómo agregar fuentes de Google manualmente a WordPress (no se requiere complemento)

Si prefiere agregar Google Fonts a WordPress manualmente, necesitará un conocimiento muy básico de codificación.

Paso 1: selecciona una fuente de Google

Para comenzar, abra Google Fonts y seleccione el tipo de fuente personalizada que le gustaría agregar a su sitio web.

Luego, en la página de la fuente, haga clic en Seleccionar esta fuente . Aquí hemos seleccionado la fuente Indie Flower.

Ahora aparecerá una ventana emergente en su pantalla. Según la fuente que haya seleccionado, podrá acceder a una selección de opciones de personalización para los pesos y estilos de fuente, así como ver la información incrustada.

Paso 2: incruste el código de la fuente personalizada en su sitio web de WordPress

A continuación, deberá copiar el código de inserción (consulte la ventana emergente anterior) y pegarlo en la sección <head> de su tema de WordPress. La forma más fácil de hacer esto es instalar el complemento gratuito de WordPress Insertar encabezados y pies de página. Con este complemento, puede agregar rápidamente código a su sitio web sin tener que editar los archivos de su tema.

Después de la instalación, abra la configuración del complemento seleccionando Configuración> Insertar encabezado y pie de página desde su panel de WordPress. Luego debe agregar su código de inserción de fuentes de Google en la sección de encabezado.

Del mismo modo, si lo prefiere, puede editar el archivo header.php de su tema hijo.

Paso 3: aplica la nueva fuente usando CSS

Una vez que haya agregado el código HTML para su fuente personalizada a su sitio web, ahora puede usar CSS para aplicar su nueva fuente personalizada. En la ventana emergente de Google Fonts, encontrará las reglas CSS que son específicas para su nueva fuente.

De vuelta en el Personalizador en el lado en vivo de su sitio web, seleccione CSS adicional. Aquí puede ingresar el código CSS para personalizar las fuentes en su sitio. A continuación puede ver que hemos aplicado el código CSS de Indie Flower al encabezado 2 y a las secciones de párrafo...

El Personalizador le mostrará las modificaciones de fuentes en tiempo real y, si está satisfecho con los resultados, haga clic en Publicar .

Cómo agregar fuentes de Adobe a WordPress

Si se ha registrado en el paquete Creative Cloud premium de Adobe, podrá agregar cualquiera de sus fuentes personalizadas a su sitio web de WordPress. Este proceso es muy similar al de agregar manualmente Google Fonts a su sitio. Echemos un vistazo rápido.

Paso 1: elija una fuente de Adobe

Lo primero es lo primero, deberá explorar la extensa biblioteca de fuentes de Adobe y elegir una fuente o fuentes que se ajusten a su proyecto. Una vez que haya hecho una selección, haga clic en el icono </> para agregar la fuente a un nuevo proyecto web .

Ahora se le pedirá que asigne un nombre a su proyecto web, así como que use las casillas de verificación para seleccionar los pesos y estilos de fuente que desea incluir. A continuación, seleccione Crear proyecto .

Paso 2: incruste el código de Adobe Font en su sitio web de WordPress

El siguiente paso es incrustar el código que proporciona Adobe para la fuente elegida en su sitio web de WordPress.

Esto sigue exactamente el mismo proceso que incrustar el código de Google Fonts. Simplemente inserte el código en la etiqueta <head> en su sitio web o use el complemento de WordPress Insertar encabezados y pies de página (como se mencionó anteriormente).

Paso 3: aplica la nueva fuente usando CSS

Nuevamente, al igual que las fuentes de Google, ahora puede aplicar su nueva fuente personalizada de Adobe utilizando las reglas de CSS. En su tablero de Adobe, la página de su proyecto web enumerará el nombre de la familia de fuentes CSS, así como el estilo de fuente y el peso numérico, para cada tipo de fuente que haya seleccionado.

De vuelta en su sitio web de WordPress, estas reglas de CSS se pueden usar dentro del Personalizador en CSS adicional.

Así que ahora hemos cubierto cómo agregar fuentes personalizadas a WordPress utilizando las muy populares Google Fonts gratuitas, así como el impresionante recurso premium Adobe Fonts.

Sin embargo, la última opción que discutiremos le permite agregar cualquier fuente personalizada a su sitio web cargándola en el servidor de su sitio. Averigüemos más.

Cómo agregar una fuente personalizada a su espacio web

Agregar una fuente personalizada a su espacio web es relativamente sencillo, pero nuevamente, necesitará una comprensión básica de CSS para aplicar la fuente a su sitio web.

Paso 1: descarga una fuente personalizada

Como se mencionó al comienzo de este artículo, existen numerosos recursos donde puede seleccionar fuentes personalizadas gratuitas o premium para usar en su sitio web. Al elegir una fuente personalizada al agregarla a su servidor, solo asegúrese de tener los derechos para usarla y que se pueda descargar.

Aquí hemos descargado la fuente personalizada gratuita Milkshake de Squirrel Fonts.

Es importante descargar su fuente personalizada en formato webfont. El formato de contenedor de fuente web WOFF disfruta de la mayor compatibilidad entre navegadores, pero Google recomienda ofrecer múltiples formatos para brindar una experiencia uniforme a los usuarios en todos los dispositivos.

Si necesita convertir su fuente personalizada a un formato diferente, Squirrel Font proporciona una herramienta Webfont Generator gratuita que le permitirá hacerlo.

Paso 2: Cargue la fuente personalizada en su servidor

El siguiente paso es cargar su fuente personalizada a su servidor. Para hacer esto, abra el Administrador de archivos en el cPanel de su sitio.

Luego, dentro de su carpeta de temas activos, cree una nueva carpeta llamada Fuentes y cargue su fuente personalizada aquí.

Si tiene varios formatos de su fuente, cárguelos todos en la carpeta Fuentes . Su fuente personalizada ahora se ha agregado a su espacio web.

Paso 3: use CSS para aplicar la fuente personalizada a su sitio web

Ahora necesita aplicar la fuente personalizada a su sitio web. Para empezar, debe cargar la fuente en la hoja de estilo de su tema. Para hacerlo, abra el Personalizador de WordPress y, en CSS adicional, agregue este código:

 @Perfil delantero {
    familia tipográfica: Milkshake;
    src: url("https://jonesblogs.com/wp-content/themes/beautiful-pro/fonts/milkshake.woff")
         formato ("woff");
}

Importantemente, asegúrese de cambiar el nombre de la fuente y la URL (copie la URL del archivo de fuente en su servidor).

Luego puede continuar y usar las reglas de CSS para actualizar las fuentes en su sitio. Este es un ejemplo de cómo aplicar la fuente personalizada al encabezado 3 y a las secciones de párrafo:

Una vez que esté satisfecho con el aspecto de su nueva fuente personalizada en su sitio web, haga clic en Publicar .

Reflexiones finales sobre cómo agregar fuentes personalizadas a WordPress

Como puede ver, si está buscando una fuente personalizada hermosa y que llame la atención, existen numerosos recursos que le permitirán encontrar la fuente perfecta para su proyecto. Y lo que es más, ahora está armado con el conocimiento de cómo agregar con éxito fuentes personalizadas a WordPress. Entonces, ¿qué fuentes personalizadas elegirás?

¿Tiene alguna pregunta sobre cómo agregar fuentes personalizadas a WordPress? Por favor pregunte en los comentarios a continuación...