Dyslexic Fonts

Header image for Dyslexic Fonts

Let registered users change the font used by your site.

3 minute reading time of 602 words (inc code) Code available at codeberg.org and the last commit was Plugin available at WordPress


Regardless of the proven usefulness of particular font faces helping people with reading difficulties (it’s certainly not a one-size-fits-all-panacea), this plugin is a good demonstration of how to simply extend the User Profile screen.

public function __construct() {
    if (is_admin()) {
        load_plugin_textdomain('Dyslexic_Fonts', false, dirname(plugin_basename(__FILE__)).'/languages');
        add_action('show_user_profile', array($this, 'add_short_form_table_cb'), 5);
        add_action('edit_user_profile', array($this, 'add_short_form_table_cb'), 5); 
        add_action('personal_options_update', array($this, 'save_profile_fields'));
        add_action('edit_user_profile_update', array($this, 'save_profile_fields'));
        add_action('admin_footer', array($this, 'add_font_face'));
    } else {
        add_action('wp_footer', array($this, 'add_font_face'));

public function add_font_face() {
    global $current_user;
    if ($current_user->ID AND get_user_meta($current_user->ID, '_more_readable', true)) {
        // echo the inline css to load the OpenDyslexic font and apply it via *:not([class*="icon"])

public function add_short_form_table_cb() {
    global $current_user; 

    $is_set = get_user_meta($current_user->ID, '_more_readable', true);

    $no = ' selected'; $yes = '';
    if ($is_set) {
        $no = ''; $yes = ' selected';
    wp_nonce_field('save_personalisation_meta', '_personalisation');

    $output = '<div id="personalisation">'
            . '<h3>'.__('Site Personalisation', 'Dyslexic_Fonts').'</h3>'
            . '<table class="form-table"><tbody>'
            . '<tr title="'.__('If you have reading difficulties, enable this to use a different font
            	\ across the site.', 'Dyslexic_Fonts').'">'
            . '<th><label for="dyslexic-font">'.__('More readable font?', 'Dyslexic_Fonts').'</label></th>'
            . '<td><select id="dyslexic-font" name="_more_readable">'
            . '<option value="0"'.$no.'>'.__('No', 'Dyslexic_Fonts').'</option><option value="1"'.$yes.'>'
            	\ .__('Yes', 'Dyslexic_Fonts').'</option>'
            . '</select>'
            . '<span class="description">'
            . sprintf(__('This makes the site use a <a href="%s" target="_blank">font designed for people
            	\ with reading difficulties</a>.', 'Dyslexic_Fonts'), 'https://opendyslexic.org/')
            . '</span></td></tr></tbody></table></div>';

    // in case you've got some custom user layout already, here's a filter hook
    $output = apply_filters('dyslexic_fonts', $output, $is_set);

    echo $output;

public function save_profile_fields($user_id) {
    if (! current_user_can('edit_user', $user_id) OR ! isset($_POST['_personalisation']) OR 
    	\ ! wp_verify_nonce($_POST['_personalisation'], 'save_personalisation_meta')) {
    	return $user_id;
    $set_me = (bool) $_POST['_more_readable'];
    update_user_meta($user_id, '_more_readable', $set_me);

Reply via email