La tipografía es más importante de lo que la mayoría de la gente cree. Las fuentes que utiliza no solo afectan la presentación de su sitio web, sino que también pueden hacer que se destaque de otros sitios y hacer que su contenido sea más fácil de leer. Elegir las mismas fuentes que todos los demás puede ser una apuesta segura, pero puede valer la pena agregar fuentes personalizadas a WordPress.
Aunque WordPress incluye una variedad decente de opciones de fuentes listas para usar, hay muchas maneras de mejorar esa selección. Si sabe cómo incluir fuentes personalizadas en su sitio web, podrá elegir entre miles de opciones interesantes. Esto le permitirá encontrar una fuente que se adapte a su nicho y audiencia.
Comprender qué son las fuentes personalizadas (y por qué es posible que desee usarlas)
El término «fuentes personalizadas» es bastante amplio. Sin embargo, dado que estamos hablando de WordPress, lo usaremos para referirnos a cualquier tipo de letra que el sistema de administración de contenido (CMS) no incluya de fábrica. Hay miles de opciones de fuentes personalizadas que puede encontrar en línea y, en términos generales, nada le impide usar ninguna de ellas.
Sin embargo, tenga en cuenta que las fuentes que elija no solo deben ser estéticamente agradables. También deben cumplir con algunos criterios adicionales:
- Cada fuente que incluyas debe ser fácil de leer.
- Tiene que encajar con el estilo general de su sitio web y las otras fuentes que utiliza .
- Las letras deben verse bien tanto en tamaño grande como pequeño, ya que debe tener en cuenta la capacidad de respuesta móvil .
Además de estas consideraciones técnicas, las fuentes le brindan una forma adicional de expresar el estilo de su sitio. Pueden convertirse en parte de su marca y, con el tiempo, los usuarios pueden llegar a asociarlos con su sitio y negocio. Así que querrá considerar sus opciones con mucho cuidado.
Dónde puede encontrar fuentes personalizadas para su sitio de WordPress
Si realiza una búsqueda rápida de «fuentes gratuitas» utilizando cualquier motor de búsqueda en este momento, encontrará cientos de páginas con amplias selecciones para elegir:
El problema, sin embargo, es que muchos de esos sitios web de ‘fuentes libres’ no tienden a tener altos estándares cuando se trata de seleccionar sus selecciones. Es posible que puedas encontrar algunas joyas, pero en muchos casos, también estarán llenas de fuentes que no te sorprenderían incluso si estuvieras trabajando en un perfil de MySpace de 2005.
Afortunadamente, hay muchos repositorios de fuentes excelentes que hacen todo lo posible para seleccionar sus colecciones. Una de nuestras favoritas es Google Fonts , que ofrece más de 900 familias tipográficas en varios idiomas, todas ellas gratuitas:
Otra excelente opción es Adobe Fonts (anteriormente Typekit ) , que ofrece más de 1700 familias de fuentes para elegir. Sin embargo, tenga en cuenta que para acceder a ellos necesitará una suscripción a Creative Cloud (cualquier nivel servirá). Si es usuario de Adobe, eso significa que ya tiene acceso a toda la colección de fuentes:
Estas dos fuentes por sí solas le darán muchas opciones para elegir. Al hacer su selección, tenga en cuenta que cada fuente que elija debe encajar con el resto del estilo de su sitio y ser fácil de leer. Una vez que haya encontrado algunas fuentes que le gusten, todo lo que queda es agregarlas a su sitio web.
Cómo agregar fuentes personalizadas a su sitio de WordPress (tres métodos)
Cuando se trata de fuentes personalizadas, WordPress le ofrece varias formas de implementar las opciones que desee. Repasemos lo que implica cada uno, para que pueda seleccionar el método que mejor se adapte a sus necesidades.
1. Edita el archivo de tu tema
Si no desea cargar archivos de fuentes en su sitio web manualmente, siempre puede ‘importarlos’ desde repositorios de terceros. Con Google Fonts, por ejemplo, puede abrir cualquier página de fuentes que desee y hacer clic en Seleccionar esta fuente en la parte superior de la pantalla:
Una vez que haga eso, aparecerá un nuevo menú que incluye dos fragmentos de código. El primero debería verse así:
Este código debe colocarse dentro de las etiquetas del archivo header.php de su tema secundario . Puede encontrar esto dentro de la carpeta de su tema en el directorio public_html/wp-content/themes .
Con esa línea, le está diciendo a WordPress que importe la opción que seleccionó de Google Fonts. Sin embargo, para usarlo, también deberá abrir la hoja de estilo de su tema secundario y especificar qué elementos deben aprovechar su nueva fuente. Así es como debería verse ese código:
font-family: 'Roboto', sans-serif;Recuerde, la hoja de estilo de su tema hijo debe estar dentro del mismo directorio que su archivo header.php . Eso significa que puede ocuparse de ambas tareas en el mismo lugar e implementar nuevas fuentes en solo unos minutos.
2. Sube el archivo de tu fuente a la carpeta de tu tema
Si lo que le interesa es la optimización del rendimiento , cargar archivos de fuentes directamente en su sitio web puede permitirle reducir unos milisegundos los tiempos de carga. Lo primero que necesitará, por supuesto, es el archivo de fuente que desea cargar en su servidor:
Dado que WordPress no incluye una carpeta de fuentes dedicada , querrá crear una utilizando su cliente FTP de confianza . Puede agregar la carpeta donde desee, pero le recomendamos que la coloque dentro de su directorio de temas para que pueda realizar un seguimiento de ella. Configúralo ahora y sube tu archivo de fuente a la nueva carpeta:
Una vez que el archivo esté en su lugar, abra la hoja de estilo de su tema hijo. Ahora deberá llamar a esa fuente para poder usarla, a través de un fragmento que debería verse así:
@font-face {
font-family: New Font;
src: url(https://www.yourwebsite.com/wp-content/themes//fonts/your-new-font.ttf);
font-weight: normal;
}Tenga en cuenta que el nombre de la familia de fuentes y la URL anteriores son marcadores de posición, que deberá reemplazar con la información correcta.
Una vez que haya ingresado este código, no cierre la hoja de estilo de su tema todavía. Aún necesita configurar qué elementos usarán la nueva fuente, con un código que es muy similar a lo que vimos en la última sección:
.h1 site-title {
font-family: "New Font", Arial, sans-serif;
}En este ejemplo, estamos configurando nuestros subtítulos H1 para usar la nueva fuente. Sin embargo, puede reemplazarlo con cualquier otro elemento que desee, o con varios elementos si desea cambiar la fuente en más de un lugar.
3. Usa un complemento
Como suele ser el caso, la forma más fácil de implementar una nueva funcionalidad en WordPress es instalar un complemento. Cuando se trata de usar fuentes personalizadas, hay muchas opciones para elegir.
Por ejemplo, si desea utilizar Google Fonts, le recomendamos el complemento de Google Fonts for WordPress con el nombre adecuado. Después de activar esta herramienta, podrá elegir entre todo el catálogo de Google Fonts para sus páginas y publicaciones, sin necesidad de agregar ningún código a su sitio web:
Por otro lado, si desea utilizar cualquier archivo de fuente y no limitarse a un solo repositorio, Custom Fonts es la herramienta que debe considerar:
Con este complemento, puede cargar fuentes en su sitio web directamente desde el tablero y usar el Personalizador para elegir dónde y cuándo usarlas. Cualquiera de estos complementos hace que sea muy fácil agregar nuevas fuentes personalizadas a su sitio.
Conclusión
Si presta atención a las fuentes que usan los sitios web, notará que muchos de ellos se adhieren a las mismas pocas opciones probadas y verdaderas. Algunas fuentes son una apuesta bastante segura cuando se trata de legibilidad y accesibilidad para el usuario . Sin embargo, con miles de opciones para elegir, tanto gratuitas como de pago, vale la pena buscar una que también se adapte perfectamente al estilo y la audiencia de su sitio web.
En cuanto a cómo cargar fuentes personalizadas en WordPress, puede hacerlo utilizando tres enfoques diferentes:
¿Tiene alguna pregunta sobre qué tipos de fuentes debe usar en su sitio web? ¡Déjanos tus dudas más abajo en los comentarios!
