Cómo agregar fuentes personalizadas en el sitio web de WordPress [2022]

¿Sabes cuál es la parte central de tu diseño web? Agregar una fuente personalizada a un sitio web de WordPress es el último paso que puede tomar para mantener a los visitantes de su sitio web en su sitio y mejorar la legibilidad del sitio web. La fuente que elija para el sitio web representa su imagen de marca. Profundicemos para aprender sobre fuentes personalizadas con pros y contras.

Aunque encontrará fuentes gratuitas en línea, estará limitado a usarlas según la compatibilidad de su tema. Es por eso que vamos a explicar cómo agregar fuentes personalizadas en WordPress utilizando formas manuales y complementos de WordPress.

¿Por qué usar fuentes personalizadas y dónde encontrarlas?

Como se mencionó anteriormente, encontrará numerosos sitios desde donde puede descargar fuentes fácilmente. Por ejemplo, Font Squirrel viene con hasta tres fuentes gratuitas que puede usar. Google Fonts es otra opción increíble donde encontrarás más de 900 fuentes para elegir. Aparte de eso, Edge Web Fonts también puede ofrecerle una gran variedad de fuentes. Para uso personal, puedes optar por Fonts.com o 1001 Free Fonts .

DaFont es la biblioteca de fuentes más antigua que tiene más de 60,000 tipos de letra desde los cuales puede filtrar las fuentes que desee. Debe descargar las fuentes elegidas y no son como la integración de Google Font. Un tipo similar de biblioteca de fuentes es UrbanFont con una amplia gama de fuentes creativas y lucrativas.

Adobe Fonts o Typekit es una biblioteca de fuentes muy útil para todos los diseñadores web porque tiene más de 1900 fuentes disponibles. Incluso si se suscribe a la cuenta gratuita, aún ofrece más de 200 fuentes web.

Si desea alquilar fuentes mensualmente y pagar una tarifa de suscripción, puede optar por Fontstand . Ofrece alrededor de 2000 fuentes increíbles y te cobra mensualmente. Al igual que este Type Network, es otra biblioteca de fuentes autohospedada donde obtendrá más de 400 familias de fuentes a la vez y explorará con facilidad.

¿Cómo elegir la mejor fuente personalizada para un sitio web?

Como ya conoce los recursos para encontrar las fuentes personalizadas deseables para WordPress, necesita saber cómo elegir las mejores fuentes ahora. Filtrar fuentes aleatorias hará que su proceso de selección sea largo y torpe. En su lugar, puede probar los siguientes pasos mientras elige la mejor fuente personalizada para un sitio web de WordPress. En este blog, exploraremos Google Fonts para elegir las mejores fuentes y ver las mejores prácticas mientras filtramos todas las fuentes.

Preseleccione las fuentes que le gustan : en la fuente de Google, puede buscar fácilmente la fuente deseada en el cuadro de búsqueda y establecer la categoría. El resultado de la búsqueda se cambiará de acuerdo con su ajuste. Puede ver las fuentes en alfabetos, números numéricos y otros formatos.

Comprobar los detalles de la fuente: comprobar los detalles de la fuente es importante porque verá todos los estilos y tamaños de fuente disponibles de un vistazo. Una ventaja increíble que encontrará con Google Fonts es que muestra combinaciones populares con esa fuente.

Mientras revisa los detalles de la fuente, esté atento también al formato de la fuente. Porque no todas las fuentes son compatibles con todos los sistemas de navegador. Aquí está la lista más reciente de navegadores y la lista de formatos de fuente admitidos.

Fuente: https://www.w3schools.com/Css/css3_fonts.asp

Enriquezca su colección de fuentes : cuando haya terminado de filtrar las fuentes correctas, puede agregar estas fuentes a su colección simplemente haciendo clic en el botón ' Seleccionar esta fuente' .

Métodos fáciles para agregar una fuente personalizada al sitio web de WordPress

Hemos reunido algunas de las formas más fáciles de agregar fuentes personalizadas a su sitio web en un formato paso a paso. Vamos a sumergirnos y ver cómo hacerlo.

Cómo agregar manualmente una fuente personalizada en WordPress

Agregar fuentes personalizadas manualmente es la forma más inteligente de no hacer que su sitio web se vuelva lento. Como ya ha explorado algunos de los tamaños de fuente para encontrar la fuente deseada, primero descargue la fuente. Ahora debe cargar la fuente en la cuenta de alojamiento de su sitio web. Compruebe qué tema está utilizando para su sitio web de WordPress. Sube el archivo CSS de tu fuente a tu cuenta. Mientras descarga la fuente, recuerde extraer los archivos del archivo .zip.

Para cargar su archivo de fuente, vaya al directorio wp-content/themes/your-theme/fonts. Puede crear una carpeta de fuentes separada para su conveniencia. Cargue el archivo usando el Administrador de archivos en hPanel. Ahora navegue a su cuenta de WordPress y haga clic en la opción Apariencia . Elija el Editor de temas donde se le mostrará el archivo style.css. Agregue el siguiente código en la parte inferior del código.

@fuente-cara {

familia tipográfica: Aguafina Script-Regular;

src: url ( http://test-site.com/wp-content/themes/twentynineteen/fonts/AguafinaScript-Regular.ttf );

peso de fuente: normal;

}

Ahora haga clic en el botón 'Actualizar archivo' para guardar los cambios. Tenga en cuenta que el código de fuente carga la fuente cada vez que un visitante ingresa a su sitio. El tipo de letra, sin embargo, aún no se ha aplicado a ningún elemento. Debe cambiar el mismo archivo style.css para asignar una fuente a un elemento específico. El siguiente código, por ejemplo, haría que el título de nuestro sitio web usara el script de fuente.

.título del sitio {

familia tipográfica: “Aguafina Script-Regular” , Arial, sans-serif;

}

Cómo configurar fuentes personalizadas usando complementos de WordPress

Para todos los usuarios de WordPress, usar complementos de fuentes es la forma más fácil de configurar fuentes personalizadas. Aquí presentamos algunos de los complementos de fuentes más fáciles y útiles para agregar fuentes personalizadas en el sitio web de WordPress.

Fuentes de Google WP

Puede usar fuentes personalizadas y aplicarlas a ciertos elementos CSS usando el complemento WP Google Fonts . Instale el complemento WP Google Fonts desde el directorio de complementos de WordPress y use su panel de control de WordPress para acceder al Panel de control de fuentes de Google. Puede elegir tipos de letra y ajustar opciones como el estilo de fuente, los elementos asignados y más.

Complemento de fuentes

Fonts Plugin es una alternativa freemium a Easy Google Fonts que funciona de manera similar, lo que le permite integrar Google Fonts en sus páginas sin tener que cambiar su tema. También funciona con el Personalizador, lo que le permite probar opciones de fuentes alternativas antes de publicarlas. Fonts Plugin también tiene integración con Adobe Fonts, lo cual es una ventaja. El complemento de fuentes también le permite usar la biblioteca tipográfica de Adobe en su material.

Cree un sitio web atractivo usando fuentes personalizadas

La legibilidad y la elegancia de su texto tienen un impacto en cuánto disfrutan sus visitantes navegando por su sitio. Ahora cualquiera puede elegir entre una gran cantidad de tipos de letra para usar en su sitio web. No hay ninguna razón por la que usarías una fuente antigua en tu sitio web en estos días. Personalizar su tipografía de WordPress ahora está completamente bajo su control.

Si encuentra este blog atractivo y útil, suscríbase a nuestro blog para leer más blogs como este. Únase a nuestra comunidad para compartir sus pensamientos también.