Enclosing Shortcode Within Another Enclosing Shortcode Breaks Output Functionality

TLDR; Nested shortcodes cannot have the same name. You must have unique names for shortcodes within shortcodes.

I’ve found the answer thanks to @patnz in response to: shortcode inside another shortcode.

If you look at the WordPress Codex :: Shortcode API :: Nested Shortcodes you will find the answer with an illustrative example.

So in my situation, as a quick fix, I’ve just added another shortcode.

function mbe_register_shortcodes() {

    require_once( PATH . '/inc/shortcodes.php' );

    add_shortcode( 'font', 'mbe_shortcode_font' );
    add_shortcode( 'font_color', 'mbe_shortcode_font_color' ); // Added

}

add_action( 'after_setup_theme', 'mbe_register_shortcodes' );

Contents of shortcodes.php:

function shortcode_font( $attributes = array(), String $content = null ) {

    $default_attributes = array(
        'weight' => 'normal',
        'align'  => 'left'
    );

    $attributes = shortcode_atts( $default_attributes, $attributes );

    $html="<span class="font-" . esc_attr( $attributes['weight'] ) . ' text-' . esc_attr( $attributes['align'] ) . '">' . $content . '</span>';

    return do_shortcode( $html );

}

function shortcode_font_color( $attributes = array(), String $content = null ) {

    $html="<span class="color">" . $content . '</span>';

    return do_shortcode( $html );

}