Instantly share code, notes, and snippets.

Embed
What would you like to do?
Remove Ubuntu font from WP4.6 system font stack
<?php
/**
* Plugin name: Get rid of Ubuntu font
* Description: Attempt to override the 4.6 system font stack to get rid of Ubuntu font.
* Author: Otto Rask
* Author URI: https://github.com/rask
* License: MIT
*/
/**
* NOTICE
*
* This was created from a personal dislike against the Ubuntu system font, which is
* now used by default on Ubuntu systems when WordPress 4.6 is installed. If you
* wish to use some other system sans-serif font for WP core styles, use this.
*
* This is supposed to be used as a mu-plugin, so it loads on all requests. Copy the
* contents of this file to a PHP file inside the mu-plugins directory.
*/
if (!defined('ABSPATH')) {
exit;
}
/**
* Get the font stack that should replace the WP core font stack. Otherwise the same
* as in 4.6, but with `Ubuntu` removed.
*
* @return string
*/
function grou_get_new_font_stack()
{
return '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, "Helvetica Neue", sans-serif';
}
/**
* Style tag for frontend.
*
* Used to reset admin bar font stack.
*
* @return void
*/
function grou_custom_css()
{
$new = grou_get_new_font_stack();
echo <<<EOF
<style type="text/css">
#wpadminbar, #wpadminbar * {
font-family: {$new};
}
</style>
EOF;
}
/**
* Style tag for admin panel.
*
* Reset font stacks globally in admin.
*
* @return void
*/
function grou_custom_admin_css()
{
$new = grou_get_new_font_stack();
echo <<<EOF
<style type="text/css">
body, #wpadminbar, #wpadminbar *,
body .media-modal, body .media-frame,
.media-modal-content .media-frame input[type="text"], .media-modal-content .media-frame input[type="password"],
.media-modal-content .media-frame input[type="number"], .media-modal-content .media-frame input[type="search"],
.media-modal-content .media-frame input[type="email"], .media-modal-content .media-frame input[type="url"],
.media-modal-content .media-frame textarea, .media-modal-content .media-frame select {
font-family: {$new};
}
</style>
EOF;
}
/**
* Style tag for login screen.
*
* Reset font stacks in login.
*
* @return void
*/
function grou_custom_login_css()
{
$new = grou_get_new_font_stack();
echo <<<EOF
<style type="text/css">
body {
font-family: {$new};
}
</style>
EOF;
}
// Hook in frontend. Use footer scripts as admin bar styles are loaded preeetty late.
add_action('wp_print_footer_scripts', 'grou_custom_css', 999);
// Hook in admin. Late priority to ensure overriding.
add_action('admin_print_styles', 'grou_custom_admin_css', 999);
// Hook in login.
add_action('login_footer', 'grou_custom_login_css', 999);
@rask

This comment has been minimized.

Owner

rask commented Sep 12, 2016

Some spots where this needs to step in too:

  • Media library modal
  • Login page

Will add in when I have the time.

@rask

This comment has been minimized.

Owner

rask commented Apr 11, 2017

Added font reset for the login screen.

@rask

This comment has been minimized.

Owner

rask commented May 2, 2017

Added font reset to media modal and frames. Might have missed some spots.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment