Guide to Change Your WordPress Admin Font

Are you bored with the same old fonts of your WordPress admin interface? The default WordPress admin font can be uninspiring and might not align with your site’s aesthetics. Changing the color scheme in the admin area is easy. But what if you could completely change the typography everywhere in your WordPress admin? Imagine giving a fresh look to every text element, from the menu bar to the login screen, with just a few straightforward steps.

In this article, we’ll explore how you can effortlessly customize typography across your WordPress admin area, giving your site a fresh and personalized feel. Let’s discover how easy it is to make these impactful changes.

Key Takeaways

• Learn how to refresh the look of your WordPress admin area by changing the fonts and color scheme.
• See how the default admin fonts can be easily replaced with Google Fonts using simple methods.
• Choose from hundreds of free Google Fonts and apply them to your admin UI for a stylish and readable experience.
• Covered two easy ways to change WordPress admin fonts – using a custom plugin or by editing the functions.php file.
• Customize fonts for both the WordPress admin dashboard and the login page.

How to Change the Color Scheme in WordPress

Before we delve into changing the fonts in your WordPress admin, let’s first explore how to change the admin color scheme in the WordPress dashboard.

• Start by navigating to your Dashboard ➝ Users ➝ Profile.
• Look for the Admin Color Scheme option.
• Here, you’ll find several choices to customize the colors of your admin interface. It can refresh the look of your WordPress dashboard to suit your preferences better.

What are the Methods of Changing WordPress Admin Font

In this part, we’ll cover two easy ways to change the fonts in your WordPress admin area. We will replace the default fonts with Google fonts. You can choose any Google font that suits your needs. Below, you’ll find detailed, step-by-step instructions for both methods to help you easily customize the fonts in your WordPress admin interface.

Method 1: Using PHP Code

The first method involves using PHP code to change the fonts in your WordPress admin area. We’ll go through two different scenarios where we’ll replace the default fonts. Here’s what we’ll cover:

How to Change WordPress Admin Dashboard Font

In this section, we’ll learn how to change the font for the entire WordPress admin area, including the menu, submenu, dashboard, and all the text you see in the admin interface. To do this, follow these steps:

• First, locate the functions.php File in your current theme. You can usually find this in your theme’s folder under /wp-content/themes/your-theme-name/.
• Then, copy the code provided below into the functions.php File. This code will change the font throughout your WordPress admin area.
• After that, save the file and refresh your WordPress admin dashboard. All the fonts in the admin area have changed to the new font specified in the code.

// WordPress Admin Area Custom Font
function custom_admin_serif_font() {
    echo '<link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet">' . PHP_EOL;
    echo '<style>body, #wpadminbar *:not([class="ab-icon"]), .wp-core-ui, .media-menu, .media-frame *, .media-modal *{font-family: "Merriweather", serif !important;} </style>' . PHP_EOL;
}
add_action( 'admin_head', 'custom_admin_serif_font' );

We’ve chosen a Google Font for the above example, which you can easily find on the Google Fonts website. Adding this code will change the fonts throughout your WordPress admin area to ‘Lato.’ You can replace ‘Lato’ with any other font you prefer from Google Fonts.

How to Change WordPress Admin Login Page Font

Next, we’ll update the font on your WordPress admin login page. This includes changing the text for the Username and Password fields, the login button, and other text elements.

To change the login page font, paste the following code to the functions.php File in your current theme. This code will set the font of your WordPress admin login page to ‘Roboto.’ If you want to use a different font, replace ‘Roboto’ with any other font name from Google Fonts.

Here’s the code to paste into functions.php File:

// WordPress Admin Page Login Custom Font 
function custom_admin_serif_font_login() {
    if(stripos($_SERVER["SCRIPT_NAME"], strrchr(wp_login_url(), '/')) !== false) {
        echo '<link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet">' . PHP_EOL;
    echo '<style>body, #wpadminbar *:not([class="ab-icon"]), .wp-core-ui, .media-menu, .media-frame *, .media-modal *{font-family: "Merriweather", serif !important;} </style>' . PHP_EOL;
	}
}
add_action( 'login_head', 'custom_admin_serif_font_login' );

Changing the admin font is an excellent solution. However, if you switch to a new theme or use one that updates regularly and changes its functions, you’ll need to add the font customization code again to match the latest updates in the theme. It ensures your preferred fonts stay consistent despite theme changes or updates.

So, what’s the solution to this issue? One effective solution is to create and utilize a custom plugin method, which we discussed below. By developing a custom plugin for your font modifications, you can ensure that your settings remain independent of these changes or updates.

Method 2: Creating Custom Plugins

Changing the admin font in WordPress can be done easily by creating a custom plugin. This method is straightforward and valuable because it doesn’t require altering your theme, so your changes won’t be lost after theme updates. Here’s how you can create a simple plugin to change the admin font:

• Go to your WordPress installation folder and navigate to ‘wp-content/Plugins.’
• Create a new directory for your plugin called ‘wordpress-admin-custom-fonts.’
• Then, inside your new folder, create a new blank PHP file, ‘wordpress-admin-custom-font.php.’
• Open the file in the editor, add the below code, and save the file.

<?php
/*
Plugin Name: WordPress Admin Custom Font
Description: A plugin that lets you change the fonts used in the WordPress Admin Dashboard to the ones you choose.
Author: WPVibes
Author URI: https://wpvibes.com/
Version: 0.0.1
*/

if ( !defined('ABSPATH') ) {
    exit;
}

// WordPress Admin Area Custom Font
function wordpress_admin_custom_font() {
    echo '<link href="https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Lora:ital,wght@0,400..700;1,400..700&family=Mulish:ital,wght@0,200..1000;1,200..1000&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:ital,wght@0,100..900;1,100..900&family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap" rel="stylesheet">' . PHP_EOL;
    echo '<style>body{font-family:"Lora", serif !important;}</style>' . PHP_EOL;
}
add_action( 'admin_head', 'wordpress_admin_custom_font' );


// WordPress Admin Page Login Custom Font
function wordpress_admin_login_custom_font() {
    if(stripos($_SERVER["SCRIPT_NAME"], strrchr(wp_login_url(), '/')) !== false) {
        echo '<link href="https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Lora:ital,wght@0,400..700;1,400..700&family=Mulish:ital,wght@0,200..1000;1,200..1000&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:ital,wght@0,100..900;1,100..900&family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap" rel="stylesheet">' . PHP_EOL;
        echo '<style>body{font-family:"Lora", serif !important;}</style>' . PHP_EOL;
    }
}
add_action( 'login_head', 'wordpress_admin_login_custom_font' );
?>

In the code above, we will change the font for both the WordPress admin area and the admin login page. You can select your preferred fonts from Google Fonts.

• In the final step, navigate to WordPress Admin Dashboard ➝ Plugins.
• You’ll find your plugin listed there. Click “Activate” to enable it. This simple plugin doesn’t have any menus or settings. Once activated, you’ll immediately see the font change in the admin area according to your preferences.

By following these steps, you create a plugin that changes the admin font without modifying your theme.

This way, your custom font settings will remain even if you update your theme in the future.

Customize Your WordPress Admin Font Easily

Changing the font in your WordPress admin area is now simple and hassle-free with these steps. By creating a custom plugin, you can personalize the fonts without worrying about theme updates affecting your changes.

Enjoy a refreshed admin experience with your favorite fonts effortlessly integrated! Whether you prefer the flexibility of creating a custom plugin or the direct control of functions.php You can enhance the look and feel of your WordPress dashboard and admin login page with your chosen fonts.

FAQ on Changing WordPress Admin Fonts