✅Cómo Cambiar la Tipografía Completa en el Admin de WordPress

A veces haces una web con un diseño cuidado, fuentes bien seleccionadas, estética moderna… y luego entras al admin y te encuentras con el típico Open Sans gris. Funciona, sí, pero no transmite nada.

Si quieres que el panel de administración de WordPress también refleje un poco de estilo (y de paso, mejorar la legibilidad), en este artículo te enseño cómo cambiar toda la tipografía del admin y de la barra superior por Montserrat, una fuente elegante, limpia y gratuita.

Y como siempre, lo haremos sin plugins innecesarios.

El objetivo: cambiar TODA la fuente del admin por Montserrat

Queremos que la fuente Montserrat se aplique:

• A todas las páginas del panel de administración
• A los formularios, botones, menús y campos
• Y también a la barra de administración superior (la “admin bar”), tanto en el backend como en el frontend

Pero sin romper nada, especialmente los iconos, que suelen desaparecer si se toca la fuente incorrectamente.

El código: un snippet completo, limpio y funcional

Este código puedes pegarlo en el functions.php de tu tema hijo o usarlo como snippet con algún plugin tipo “Code Snippets”.

add_action('admin_enqueue_scripts', 'custom_admin_typography');
add_action('wp_enqueue_scripts', 'custom_admin_typography_adminbar');

function custom_admin_typography() {
    wp_enqueue_style('custom-admin-font', 'https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap', false);

    $custom_css = "
        body, 
        #wpbody, 
        #adminmenu, 
        #adminmenu *, 
        #wpcontent, 
        .wrap, 
        .wp-core-ui, 
        input, 
        select, 
        textarea, 
        button, 
        #wpadminbar *, 
        .wp-toolbar * {
            font-family: 'Montserrat', sans-serif !important;
        }

        /* Restaurar la fuente de los iconos dashicons */
        .dashicons,
        #adminmenu .wp-menu-image:before,
        #wpadminbar .ab-icon:before,
        #wpadminbar .ab-item:before {
            font-family: 'dashicons' !important;
        }
    ";
    wp_add_inline_style('custom-admin-font', $custom_css);
}

function custom_admin_typography_adminbar() {
    if (is_user_logged_in()) {
        wp_enqueue_style('custom-admin-font', 'https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap', false);

        $custom_css = "
            #wpadminbar *, .wp-toolbar * {
                font-family: 'Montserrat', sans-serif !important;
            }

            /* Restaurar la fuente de los iconos dashicons */
            .dashicons,
            #wpadminbar .ab-icon:before,
            #wpadminbar .ab-item:before {
                font-family: 'dashicons' !important;
            }
        ";
        wp_add_inline_style('custom-admin-font', $custom_css);
    }
}
Lenguaje del código: PHP (php)

Detalles importantes del código

• Montserrat se carga desde Google Fonts, con los pesos 400, 600 y 700 para tener margen.
• Se aplica con !important para que sobrescriba cualquier estilo predeterminado del admin.
• Se añade también en la barra de administración del frontend.
• Se restauran los iconos de WordPress (dashicons) para que no desaparezcan ni se vean como cuadrados.

¿Y si quiero otra fuente?

Solo cambia esta línea:

wp_enqueue_style('custom-admin-font', 'https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap', false);

Por ejemplo, para usar Inter:

wp_enqueue_style('custom-admin-font', 'https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap', false);

Eso sí, recuerda adaptar también el font-family a la nueva fuente en los bloques CSS.

Conclusión

Cambiar la tipografía del panel de administración no solo mejora la estética, también puede ayudarte a trabajar más cómodo si pasas muchas horas dentro. Y con un snippet como este, lo tienes listo en segundos, sin plugins ni complicaciones.