Dificultad Media
Podrías sorprenderte al saber que la tipografía también puede impactar tu SEO. Una buena tipografía mejora la experiencia del usuario, lo que Google considera cuando clasifica sitios. Además, un sitio rápido y accesible se traduce en mejores tasas de retención y menos rebotes.
Implementar una tipografía atractiva y funcional en tu sitio WordPress es más fácil de lo que piensas. Siguiendo estos pasos, no solo mejorarás la estética de tu sitio, sino también la experiencia general del usuario y, potencialmente, tu ranking en los motores de búsqueda. La elección correcta del tipo de letra no solo mejora la estética de tu sitio web, sino que también puede influir en la experiencia del usuario y la legibilidad de tu contenido. A continuación, verás cómo puedes incluir tipografías personalizadas en tu WordPress de una manera sencilla y efectiva.
Si lo que buscas es añadir tu fuente con un plugin de WordPress, te recomiendo utiliza un plugin como Easy Google Fonts, que te permite integrar fuentes de Google sin tocar el código. Sin embargo, este artículo está enfocado a incluir las fuentes de manera manual.
Cómo Añadir una Tipografía Manualmente a tu Sitio WordPress Sin Usar Plugins
Modificar la tipografía de tu sitio WordPress no tiene por qué depender de plugins. Si prefieres una solución más ligera y controlada, puedes optar por subir tus propias tipografías directamente al servidor y enlazarlas desde el archivo functions.php. Personalizar la tipografía directamente en tu servidor y mediante código puede parecer más técnico, pero ofrece ventajas significativas. Evitas la sobrecarga que algunos plugins pueden generar y garantizas que solo las fuentes necesarias se carguen en tu sitio, lo cual es excelente para mantener un tiempo de carga rápido y eficiente.
El primer paso es seleccionar la fuente que deseas usar. Sitios como Google Fonts, Font Squirrel ofrecen una amplia variedad de fuentes gratuitas aptas para conectar directamente a través de web.sin cargarla. Descarga los archivos de la fuente generalmente en formatos como TTF o WOFF si los quieres.
1. Subir la Fuente a Tu Servidor
Una vez que tengas los archivos de tu fuente, deberás subirlos a tu servidor. Puedes hacer esto mediante FTP. Simplemente conecta tu cliente FTP a tu servidor web con Filezilla, por ejemplo, y sube los archivos de fuente a una carpeta dentro de tu directorio de WordPress, por ejemplo, /wp-content/fonts/. Si la carpeta no existe, créala. También podrías incluir las tipografías en la carpeta del propio tema (que es como lo haremos). Te recomiendo que sea un tema hijo para WordPress.
Asegúrate de recordar los nombres de los archivos y las rutas, ya que los necesitarás para el paso siguiente. Para hacer que las fuentes subidas a tu servidor sean accesibles y utilizables en tu sitio WordPress, necesitarás registrarlas y enlazarlas correctamente dentro de tu tema o child theme de WordPress. Esto implica modificar el archivo functions.php para incluir el código necesario que registre y enlace estas fuentes. Aquí tienes una guía paso a paso sobre cómo hacerlo.
2. Añadir tipografía desde functions.php
A continuación, debes añadir el código necesario en el archivo functions.php de tu tema para registrar y enlazar las fuentes. Accede al archivo functions.php: Este archivo generalmente se encuentra en el directorio de tu tema activo, que está ubicado en /wp-content/themes/tu-tema-hijo-espero/.
Añade el siguiente código utilizando wp_enqueue_scripts: Este código utiliza la función wp_enqueue_style() para registrar y enlazar la fuente en tu sitio. Tendrás que ajustar los nombres de archivo y rutas según corresponda. El siguiente código está presentado para que las fuentes estén incluidas en la carpeta del tema.
Si vas a añadir una sola fuente utiliza este código:
function custom_add_fonts() {
wp_enqueue_style('custom-fonts', get_stylesheet_directory_uri() . '/fonts/mi-fuente.css');
}
add_action('wp_enqueue_scripts', 'custom_add_fonts');
Si vas a añadir varias fuentes al mismo tiempo, debes emplear la función de la siguiente manera:
function custom_add_fonts() {
wp_enqueue_style('rock-salt-fonts', get_stylesheet_directory_uri() . '/fonts/mi-fuente-1.css');
wp_enqueue_style('rubik1-fonts', get_stylesheet_directory_uri() . '/fonts/mi-fuente-2.css');
wp_enqueue_style('rubik2-fonts', get_stylesheet_directory_uri() . '/fonts/mi-fuente-3.css');
}
add_action('wp_enqueue_scripts', 'custom_add_fonts');
3. Cración de ficheros .css
Es necesario que tengas un archivo CSS que defina @font-face para la fuente que deseas utilizar. Este archivo CSS le dice al navegador cómo cargar la fuente desde tu servidor.
Crea un archivo llamado mi-fuente.css dentro de la carpeta /wp-content/fonts/ o del tema y añade lo siguiente:
@font-face {
font-family: 'MiFuente';
src: url('MiFuente.woff2') format('woff2'),
url('MiFuente.woff') format('woff'),
url('MiFuente.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Asegúrate de ajustar las rutas y los nombres de archivo según lo que hayas subido. Por ejemplo, si subiste una fuente llamada MiFuente.woff2, asegúrate de que el nombre del archivo y la extensión coincidan exactamente en el CSS.
Registrar y Enlazar la Fuentes Online en WordPress
Para usar la fuente, necesitas registrarla y enlazarla en tu tema de WordPress. Esto se hace añadiendo un poco de código a tu archivo functions.php. Aquí te muestro cómo:
function custom_add_google_fonts() {
wp_enqueue_style( 'custom-google-fonts', 'https://fonts.googleapis.com/css?family=Open+Sans', false );
}
add_action( 'wp_enqueue_scripts', 'custom_add_google_fonts' );
Este código básicamente le dice a WordPress que cargue la fuente desde la ubicación especificada cuando se cargue tu sitio. Asegúrate de reemplazar la URL con la ruta a tu archivo de fuente.
¿Qué es mejor para una buena Optimización para WordPress
Aunque es tentador experimentar con tipografías exóticas, es vital seguir algunas mejores prácticas:
- Legibilidad sobre estilo: Asegúrate de que tus fuentes son fáciles de leer en todos los dispositivos y tamaños.
- Consistencia: Limita el número de fuentes diferentes para mantener un diseño coherente.
- Rendimiento: Fuentes pesadas pueden hacer que tu sitio sea más lento, así que opta por fuentes que no afecten negativamente la velocidad de carga.
- Evita el uso de plugins innecesarios que además, pueden fallar en cualquier momento. Estos elementos también pueden suponer una carga más lenta de la web, por lo que la mejor solución es incluir las tipografías de manera manual en WordPress.
Dejar una Respuesta