Cómo cargar fuentes de Google Fonts localmente en WordPress para mejorar Core Web Vitals

Cómo cargar Google Fonts localmente en WordPress

Paso 1: Seleccionar y descargar las fuentes

1. Visita Google Fonts.
2. Selecciona las fuentes que deseas utilizar.
3. Haz clic en el botón «Download family» para descargar un archivo ZIP.
4. Descomprime el archivo ZIP en tu computadora.

Paso 2: Subir las fuentes a tu servidor

1. Accede a tu servidor mediante FTP o el administrador de archivos de tu hosting.
2. Navega a la carpeta de tu tema activo: /wp-content/themes/tu-tema/.
3. Crea una nueva carpeta llamada fonts.
4. Sube los archivos de fuentes (por ejemplo, .woff, .woff2, .ttf) a la carpeta fonts.

Paso 3: Registrar las fuentes en tu tema

1. Abre el archivo functions.php de tu tema.
2. Agrega el siguiente código para registrar las fuentes:

function cargar_fuentes_locales() {
    wp_enqueue_style('fuentes-personalizadas', get_template_directory_uri() . '/fonts/tu-fuente.css');
}
add_action('wp_enqueue_scripts', 'cargar_fuentes_locales');

Paso 4: Crear el archivo CSS para las fuentes

1. Crea un archivo llamado tu-fuente.css en la carpeta fonts.
2. Agrega el siguiente código al archivo CSS, ajustando las rutas según corresponda:

@font-face {
    font-family: 'NombreDeLaFuente';
    src: url('tu-fuente.woff2') format('woff2'),
         url('tu-fuente.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

Paso 5: Usar las fuentes en tu CSS

1. En tu archivo CSS principal (por ejemplo, style.css), utiliza la fuente:

body {
    font-family: 'NombreDeLaFuente', sans-serif;
}

Paso 6: Verificar la implementación

1. Visita tu sitio web y verifica que las fuentes se carguen correctamente.
2. Utiliza herramientas como Lighthouse para comprobar el rendimiento.

.