• Resolved biccinnomanus

    (@biccinnomanus)


    I just update wordpress few hours ago.
    But after update i am seeing my admin dashboard font totally change and it’s looking very odd to me.
    I googled and knew that wordpress will not use Open Sans font which are open source project of google.
    That’s ok but i need to know how to change the admin dashboard font?

    [Moderator’s note: moved to How-To and Troubleshooting]

Viewing 15 replies - 1 through 15 (of 42 total)
  • you can change it BUT it will overwritten by next WordPress update

    There is definitely a change in the Font CSS, no, we aren’t imagining it ??

    Take a look at the screenshots below and notice the CSS line change fr font-family. Instead of default Open Sans it now uses Roboto (or similar font from the list).

    4.4
    https://tehnoblog.org/downloads/WP-4.4.png

    4.6
    https://tehnoblog.org/downloads/WP-4.6.png

    In Windows 7 Pro 64bit with Firefox it uses the Segoe UI system font for me now.

    With Firefox, you could use a Stylish override like:

    @namespace url(https://www.w3.org/1999/xhtml);
    
    @-moz-document url("https://**blog-url**/wp-admin/") {
      body {
        font-family: "Open Sans";
      }
    }

    Where **blog-url** is the blog’s URL. Use whatever font you want without modifying any of WordPress’s CSS.

    For me this is a very unfavorable change, admin dashboard looks ugly. In my case, default font is too small in relation to the elements like button, tab also nav menu – it looks very strange. In my opinion, update in this point forces to large change, the font is too important element that affects the general reception and has a big impact on “the pleasure” of working in the WP panel.

    Why not to add this as an option to the user’s decision?

    Here is one way to fix this problem:

    https://tehnoblog.org/how-to-change-font-in-wordpress-admin-dashboard/

    Note that at this stage this is (probably) still not the 100% true replacement, as there are (probably) some other sections I haven’t discovered yet that needs to be included in the custom CSS change.

    This solution uses your theme’s function.php (or custom_functions.php or whatever available) to over-ride system fonts @ admin.

    @darko A7 Thanks a lot.

    I have also converted the code in a form of bare-bone plugin (avoiding theme file(s) modification requirement and messing up future theme upgrades).

    body{} will make changes only on front panels, but not menus, media manager etc.

    Also, admin toolbar @ front side will still use system/core fonts, additional hook must be used to cover that.

    @george J I added the missing css in your plugin for #wpadminbar and modal window .wp-core-ui:

    $custom_css = ‘body, #wpadminbar *:not([class^=”ab-icon”]), .wp-core-ui { font-family: “Open Sans”, sans-serif !important; }’;

    @darko A7: you’re definitely right.
    @siepaw: Thank you! Snippet and zip… updated.

    Open Sans FTW – woohoo!
    Thanks @george J and siepaw

    @george J I added a few changes more in your plugin to add support for admin bar in front side (not only in wp-admin), please correct me if some is wrong:

    if (!defined('ABSPATH'))
    	exit;
    
    require_once( ABSPATH . "wp-includes/pluggable.php" );
    
    if (is_user_logged_in()) {
    
    	class OpenSans_FTW {
    
    		protected static $instance = null;
    		public $plugin_slug = 'opensans-ftw';
    
    		public static function get_instance() {
    			if (null == self::$instance) {
    				self::$instance = new self;
    			}
    
    			return self::$instance;
    }
    
    		public function __construct() {
    			$wp_version = get_bloginfo('version');
    			if (version_compare($wp_version, '4.6', '<')) {
    				return;
    			}
    
    			if(is_admin()) {
    				add_action('admin_enqueue_scripts', array($this, 'add_assets'));
    			} else {
    				add_action('wp_footer', array($this, 'add_assets'));
    			}
    		}
    
    		public function add_assets() {
    			// add font
    			wp_enqueue_style($this->plugin_slug, '//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600&subset=latin,latin-ext');
    
    			// add custom css
    			if(is_admin()) {
    				$custom_css = 'body, #wpadminbar *:not([class="ab-icon"]), .wp-core-ui { font-family: "Open Sans", sans-serif !important; }';
    
    				wp_add_inline_style($this->plugin_slug, $custom_css);
    			} else {
    				$custom_css = '#wpadminbar *:not([class="ab-icon"]) { font-family: "Open Sans", sans-serif !important; }';
    
    				echo "<style type='text/css' media='all'>\n";
    				echo "$custom_css";
    				echo "</style>\n";
    			}
    		}
    	}
    
    	add_action('plugins_loaded', array('OpenSans_FTW', 'get_instance'));
    }

    @siepaw: good idea, thanks. I did some changes and updated the snippet & zip.

    I think I’ll also submit the plugin to wp.org repository. ??

    Later edit: done, submitted to the official repository.

    @george J, in CSS for admin bar #wpadminbar *:not([class=”ab-icon”]) is correct for both, so you can change my previous verion #wpadminbar *:not([class^=”ab-icon”]) on without the caret.

    @siepaw: done.

Viewing 15 replies - 1 through 15 (of 42 total)
  • The topic ‘WordPress 4.6 admin font change looking odd! Any solution?’ is closed to new replies.