Support » Plugin: Autoptimize » Bug in Google Fonts Async mode

  • Resolved Nextendweb


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

    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, '' );
    	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='' type='text/css' media='all' />

    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

    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

    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:

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

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

Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Bug in Google Fonts Async mode’ is closed to new replies.