In latest WordPress version 4.6 a new admin system font change was introduced, moving away from “traditional” Open-Sans font-face type (introduced back in 3.8). Here is how you can restore the old look & feel without modifying core files.
WordPress 4.6 Admin Font Change Fix – How To Restore Open Sans Font?
If you inspect the source code of the new Admin Dashboard, you can spot the change right away:
However, this (<body>) is just a surface. If you dig deep into other areas of administration panels and sections (id, class), you will immediately realize that this is not a coincidence or a fluke, but a carefully planned and conducted system-wide change.
Everything, from Admin Toolbar, Website Title, and even Media Manager/Editor is influenced by this change. So, we can safely exclude the case of accidental introduction of new font scheme from a contributing developer.
WHY THIS CHANGE HAPPENED?
The logic behind this move from WordPress developers is simple: most current operating systems UIs have evolved enough and use modern font families (web optimized, clear type), thus by switching to system fonts reduces one or several external resources (like Open-Sans from Google servers) and makes things load & render faster. However, as we can see from above screenshot, in different operating systems (Linux, Mac, Windows) and different browsers, different font families will be used, and user experience will greatly vary.
Now, to change all this back to “normal” manually — we would need to dig deep into the /wp-admin/css/ directory and modify all relevant font-family styles from this:
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
to this (old):
font-family: "Open Sans",sans-serif
But, that would be a tedious task, of course. The simplest change that would affect most of the Admin sections (but not all!) would be to edit common.min.css (and optionally common.css) file and look for body line, then make the change. Of course, we aren’t gonna do that here, as modifying core files (even benign ones such as .css styles) is never a good idea (they will be overwritten with the very next WordPress core update).
METHOD 1: INJECT CUSTOM INLINE CSS STYLE @ WORDPRESS ADMIN DASHBOARD via THEME’s functions.php
A more clever workaround to this problem is to add custom function via hook @ Admin head section – add below code into your current WordPress theme’s functions.php file (or custom_functions.php or similar) that you use near the end before the closing ?> php tag:
// WordPress Custom Font @ Admin
function custom_admin_open_sans_font() {
echo '<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">' . PHP_EOL;
echo '<style>body, #wpadminbar *:not([class="ab-icon"]), .wp-core-ui, .media-menu, .media-frame *, .media-modal *{font-family:"Open Sans",sans-serif !important;}</style>' . PHP_EOL;
}
add_action( 'admin_head', 'custom_admin_open_sans_font' );
// WordPress Custom Font @ Admin Frontend Toolbar
function custom_admin_open_sans_font_frontend_toolbar() {
if(current_user_can('administrator')) {
echo '<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">' . PHP_EOL;
echo '<style>#wpadminbar *:not([class="ab-icon"]){font-family:"Open Sans",sans-serif !important;}</style>' . PHP_EOL;
}
}
add_action( 'wp_head', 'custom_admin_open_sans_font_frontend_toolbar' );
// WordPress Custom Font @ Admin Login
function custom_admin_open_sans_font_login_page() {
if(stripos($_SERVER["SCRIPT_NAME"], strrchr(wp_login_url(), '/')) !== false) {
echo '<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">' . PHP_EOL;
echo '<style>body{font-family:"Open Sans",sans-serif !important;}</style>' . PHP_EOL;
}
}
add_action( 'login_head', 'custom_admin_open_sans_font_login_page' );
The above presented code is a quick & easy fix to customize your Admin Dashboard appearance. Please, keep in mind that this is a preliminary and incomplete solution that might be changed at any given point in time in the future (or even stop working, if the div IDs change, for example — but, let us hope this is highly unlikely for the time being).
Also, keep in mind that this is a great solution for those who develop & use custom themes (self-managed), child themes or for 3rd party themes that provide custom override functions options that will not be over-written with each new theme update.
In case you use regular themes with frequent updates, this solution is not optimal, as you will have to re-insert above code after each theme update. In that case, you might apply our custom plugin solution presented below (or seek some more robust and complete Admin Appearance customization plugins).
METHOD 2: (HOW TO) BUILD A SIMPLE WORDPRESS PLUGIN
This is very simple to do: we can convert above theme function into a stand-alone WordPress plugin, which does not require theme modification at all => theme updates are no longer an issue.
STEP 1
Go to your WordPress install directory => wp-content/plugins/ and create a new directory admin-custom-font
STEP 2
Create an empty file named admin-custom-font.php inside the plugin’s dir
STEP 3
Copy/Paste below code and re-save:
<?php
/*
Plugin Name: Admin Custom Font
Plugin URI: https://tehnoblog.org/how-to-change-font-in-wordpress-admin-dashboard/
Description: Simple plugin to replace font(s) in WordPress Admin Dashboard with Open Sans.
Author: TehnoBlog.org
Author URI: https://tehnoblog.org/
Version: 0.0.1
*/
if ( !defined('ABSPATH') ) {
exit;
}
// WordPress Custom Font @ Admin
function admin_custom_font() {
echo '<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">' . PHP_EOL;
echo '<style>body, #wpadminbar *:not([class="ab-icon"]), .wp-core-ui, .media-menu, .media-frame *, .media-modal *{font-family:"Open Sans",sans-serif !important;}</style>' . PHP_EOL;
}
add_action( 'admin_head', 'admin_custom_font' );
// WordPress Custom Font @ Admin Frontend Toolbar
function admin_custom_font_frontend_toolbar() {
if(current_user_can('administrator')) {
echo '<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">' . PHP_EOL;
echo '<style>#wpadminbar *:not([class="ab-icon"]){font-family:"Open Sans",sans-serif !important;}</style>' . PHP_EOL;
}
}
add_action( 'wp_head', 'admin_custom_font_frontend_toolbar' );
// WordPress Custom Font @ Admin Login
function admin_custom_font_login_page() {
if(stripos($_SERVER["SCRIPT_NAME"], strrchr(wp_login_url(), '/')) !== false) {
echo '<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">' . PHP_EOL;
echo '<style>body{font-family:"Open Sans",sans-serif !important;}</style>' . PHP_EOL;
}
}
add_action( 'login_head', 'admin_custom_font_login_page' );
?>
STEP 4
Go to Admin Dashboard > Plugins and Activate it. It is a simple plugin without any settings and menus, and you should immediately notice the font change after plugin activation.
Naturally, this plugin should be used only in WordPress versions 4.6.0 and above, it does not check for any WP version compatibility, as it is just a simple CSS embed function. Would there be any harm if you’ve installed it in an older WordPress version (say 4.4.x)? No, absolutely not, but you would simply duplicate redundant code for no reason at all, thus the compatibility is marked for core version(s) 4.6.0 and above.