Bug in Google Fonts Async mode

Hi @optimizingmatters,
there is a bug which prevents Web Font Loader to properly load the fonts.

Details:
Example theme: TwentySeventeen
Loads the Google font with the following code:

	$fonts_url = '';

	/*
	 * Translators: If there are characters in your language that are not
	 * supported by Libre Franklin, translate this to 'off'. Do not translate
	 * into your own language.
	 */
	$libre_franklin = _x( 'on', 'Libre Franklin font: on or off', 'twentyseventeen' );

	if ( 'off' !== $libre_franklin ) {
		$font_families = array();

		$font_families[] = 'Libre Franklin:300,300i,400,400i,600,600i,800,800i';

		$query_args = array(
			'family' => urlencode( implode( '|', $font_families ) ),
			'subset' => urlencode( 'latin,latin-ext' ),
		);

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

	return esc_url_raw( $fonts_url );

So it prints the url encoded to the HTML source, like:
<link rel='stylesheet' id='twentyseventeen-fonts-css' href='https://fonts.googleapis.com/css?family=Libre+Franklin%3A300%2C300i%2C400%2C400i%2C600%2C600i%2C800%2C800i&subset=latin%2Clatin-ext' type='text/css' media='all' />

Autoptimize
Default settings + Optimize HTML On + Google Fonts Combine and load fonts asynchronously with webfont.js

In Autoptimize The url is not decoded back and the WebFontConfig object is not proper:

<script data-cfasync="false" id="ao_optimized_gfonts" type="text/javascript">WebFontConfig = {
    google: {families: ['Libre+Franklin%3A300%2C300i%2C400%2C400i%2C600%2C600i%2C800%2C800i:latin,latin-ext']},
    classes: false,
    events: false,
    timeout: 1500
};
</script>

But it should be:

<script data-cfasync="false" id="ao_optimized_gfonts" type="text/javascript">WebFontConfig = {
    google: {families: ['Libre Franklin:300,300i,400,400i,600,600i,800,800i:latin,latin-ext']},
    classes: false,
    events: false,
    timeout: 1500
};</script>

There might be no visual error with the encoded value of the families array, but Web Font Loader marking the font family inactive. You can try it by enabling events on the WebFontConfig object:

events:true,
fontinactive: function(){console.log('inactive',arguments);}

Solution:
Probably the best would be to decode the url:
$font = str_replace( array( '%7C', '%7c' ), '|', urldecode($font) );