Las tipografías son un elemento fundamental del diseño web en WordPress. Una buena elección de fuentes puede mejorar la legibilidad y la estética de cualquier sitio web de Latinoamérica, por eso vamos a mostrarles cómo agregar una fuente a WordPress de forma sencilla y rápida.
Métodos para agregar fuentes en WordPress
Existen diferentes métodos para agregar una fuente en WordPress, ¡todos igual de válidos!
Uso de Google Fonts
Google Fonts es un servicio gratuito que ofrece una gran selección de fuentes que podrán utilizar en cualquier proyecto web. Para ello, deberán seleccionar las fuentes desde la biblioteca de Google Fonts y luego integrarlas en tu sitio WordPress mediante código o plugins.
Uso de fuentes personalizadas
También es posible utilizar fuentes de terceros o incluso diseños propios. Esto les permitirá darle un toque único a su web. Para ello, pueden subir los archivos de las fuentes a su servidor y luego integrarlas usando CSS.
Cómo agregar Google Fonts en WordPress
Hay varias formas de agregar Google Fonts en WordPress, ambas muy sencillas: utilizando un plugin o hacerlo manualmente.
Usando un plugin
Si desean una integración sencilla, pueden usar plugins como Easy Google Fonts o WP Google Fonts para instalar una fuente en WordPress siguiendo estos pasos:
- Ir al panel de administración de WordPress.
- Acceder al apartado ‘Plugins’ y clicar sobre ‘Añadir nuevo’.
- Buscar ‘Easy Google Fonts’, hacer clic en ‘Instalar ahora' y activar el plugin.
- Ir a ‘Apariencia’ y seleccionar ‘Personalizar’.
- Acceder a la sección ‘Tipografía’ que habrá agregado el plugin.
- Seleccionar el texto que desean estilizar y elegir una fuente de Google Fonts.
- Ajustar parámetros como el tamaño, el peso y el color, guardar y publicar los cambios.
Método manual
Si prefieren cargar fuentes en WordPress desde Google Fonts de forma manual, necesitarán seguir esta otra guía:
- Ir a la biblioteca de Google Fonts y seleccionar una fuente.
- Copiar el link de integración que les proporcionará el servicio.
- Acceder al archivo ‘functions.php’ de su tema a través del editor de temas o de un cliente FTP.
- Agregar el siguiente código para incluir la fuente en su tema:
function custom_add_google_fonts() {
wp_enqueue_style( 'custom-google-fonts', 'URL_DE_LA_FUENTE', false );
}
add_action( 'wp_enqueue_scripts', 'custom_add_google_fonts' );
- Reemplazar ‘URL_DE_LA_FUENTE’ con la URL de la fuente que copiaron.
- Guardar los cambios y comprobar que la fuente se haya aplicado correctamente.
Cómo subir fuentes personalizadas a WordPress
Si han llegado hasta estas líneas buscando cómo subir una fuente a WordPress personalizada, les gustará saber que es sencillo con la guía adecuada.
Preparación de la fuente
Lo primero es convertir su fuente a formatos web como WOFF o WOFF2 para garantizar su compatibilidad con los navegadores, y herramientas como Font Squirrel y Transfonter son excelentes para esta tarea.
Estos softwares les permitirán subir su archivo de fuente y descargarlo en los formatos necesarios para la web.
Subir la fuente al servidor
Pueden subir sus archivos de fuentes directamente a la biblioteca de medios de WordPress.
- Vayan a ‘Medios’ y pulsen sobre ‘Añadir nuevo’ en su panel de administración de WordPress para subir sus archivos de fuentes.
- Pueden usar un cliente FTP, como FileZilla, para subir los archivos directamente a una carpeta en su servidor, como wp-content/themes/su-tema/fonts.
Implementación en el tema
Una vez que los archivos de fuentes están en el servidor, necesitarán declarar la fuente en su archivo CSS. Para hacerlo, abran el archivo ‘style.css’ de su tema y agreguen el siguiente código:
@font-face {
font-family: 'MiFuentePersonalizada';
src: url('http://tu-sitio-web.com/wp-content/themes/su-tema/fonts/su-fuente.woff2') format('woff2'),
url('http://su-sitio-web.com/wp-content/themes/su-tema/fonts/su-fuente.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Después, pueden usar esta fuente en sus estilos CSS como en el siguiente ejemplo:
body {
font-family: 'MiFuentePersonalizada', sans-serif;
}
Esto aplicará la fuente personalizada a todo el texto dentro del elemento ‘<body>’ de su página web, justo lo que querían!
Uso de un plugin para fuentes personalizadas
Si prefieren no tocar el código, pueden usar un plugin de fuentes para WordPress como Use Any Font, que permite subir y aplicar fuentes personalizadas de forma sencilla.
- Instalar y activar el plugin desde el catálogo de WordPress.
- Conseguir una clave API gratuita registrándose en la web del plugin.
- Ir a ‘Use Any Font’ en el menú de ajustes de WordPress.
- Subir su archivo de fuente en formatos como TTF, OTF o WOFF.
- Asignar la fuente a elementos específicos de su web usando la interfaz del plugin.
- Personalizar ajustes como el peso y estilo de la fuente.
Consejos para la selección y uso de fuentes en WordPress
La legibilidad y la accesibilidad son esenciales en la tipografía web, por eso les recomendamos usar fuentes claras y bien espaciadas, para asegurar que el texto sea fácil de leer. Además, procuren mantener un alto contraste entre el texto y el fondo, y eviten abusar de mayúsculas, ya que pueden dificultar la lectura.
En cuanto a la optimización del rendimiento, carguen las fuentes de la forma más eficiente posible, por ejemplo usando Google Fonts, para acelerar la carga. Procuren también utilizar fuentes web (WOFF, WOFF2) en lugar de fuentes del sistema, ya que ofrecerán un mejor rendimiento.
¿Cómo integrar fuentes de Adobe Fonts en WordPress?
El sistema es muy fácil de seguir aún sin experiencia previa.
- Crear un proyecto en Adobe Fonts.
- Usar el plugin ‘Custom Adobe Fonts’, o agregar el código de integración manualmente en el archivo ‘header.php’ de su tema.
¿Cómo cambiar la tipografía de un tema de WordPress?
- Accedan a ‘Apariencia’ y ‘Personalizar’.
- Busquen la sección ‘Tipografía’.
- Seleccionen y personalicen las fuentes para diferentes elementos del sitio.
- También pueden editar el archivo ‘style.css’ de su tema para especificar las nuevas fuentes usando CSS.
Problemas comunes y soluciones
Si las fuentes no se cargan, comprueben que las URLs sean correctas y que los archivos estén en el formato adecuado. Además, verifiquen que los permisos del servidor permiten el acceso a estos archivos.
Respecto a los errores de compatibilidad entre navegadores, utilicen formatos de fuentes compatibles como WOFF y WOFF2. ¡Y prueben su web en varios navegadores y dispositivos para asegurarse de que las fuentes se rendericen correctamente!
Además, recuerden que el hosting WordPress de GoDaddy les garantizará el mejor funcionamiento y el máximo tiempo de actividad para su proyecto web en cualquier parte del mundo.
