Google fonts subset concatenation issue

[eri-trabiccolo]

Hi there,
I'm experiencing an issue with the google fonts when enabling the Google Fonts "Combine *" options,
when there are separate gfonts enqueues each one with their own subset argument, resulting in a malformed query to fonts.googleapis.com

Here's how to reproduce the issue:

• Twentyseventeen theme, which, by default enqueues the Libre Franklin google-font, with subset 'latin,latin-ext', see:
  https://github.com/WordPress/twentyseventeen/blob/master/functions.php#L127
• create a child-theme and enqueue an additional gfont, e.g. Montserrat, with an additinal subset vietnamese, example code:

/**
 * Register child custom fonts.
 */
function twentyseventeen_child_fonts_url() {
    $query_args = array(
        'family' => 'Montserrat',
        'subset' => 'vietnamese',
    );

    $fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );

    return esc_url_raw( $fonts_url );
}

/**
 * Enqueue child scripts and styles.
 */
function twentyseventeen_child_scripts() {
    // Add custom fonts, used in the child stylesheet.
    wp_enqueue_style( 'twentyseventeen-child-fonts', twentyseventeen_child_fonts_url(), array(), null );
}
add_action( 'wp_enqueue_scripts', 'twentyseventeen_child_scripts' );

• Make sure you checked an Autoptimize option to combine the google fonts, e.g. Combine and link in head (fonts load fast but are render-blocking)
• You'll see AO producing something like this in your site's head:

<link rel="stylesheet" id="ao_optimized_gfonts" href="https://fonts.googleapis.com/css?family=Montserrat%7CLibre+Franklin%3A300%2C300i%2C400%2C400i%2C600%2C600i%2C800%2C800i%7COpen+Sans:400,700&#038;subset=vietnameselatin%2Clatin-ext" />

note the missing %2C (,) after the subset added in the child-theme.