Enqueue Google Web Fonts Without Messing Up Symbols In URL

Question

Enqueuing Google Web Fonts the usual way, i.e., using the wp_enqueue_style function like so...

function wpse_google_webfonts() {
    wp_enqueue_style( 'google-webfonts', 'http://fonts.googleapis.com/css?family=Ubuntu+Condensed|Open+Sans:400italic,700italic,400,700' );
}
add_action( 'wp_enqueue_scripts', 'wpse_google_webfonts' );

...results in a link tag placed in the header like so:

<link rel='stylesheet' id='google-webfonts-css'  href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed%7COpen+Sans%3A400italic%2C700italic%2C400%2C700&#038;ver=3.5' type='text/css' media='all' />

As you can see, the resultant URL is encoded.

I am pretty sure it poses no problems, but to keep things clean and clear, I would like to go ahead and ask -- Is there a way to enqueue Google Web Fonts (via functions.php and not a plugin) in a way that the URL output is not encoded?

That's like so:

<link rel='stylesheet' id='google-webfonts-css'  href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed|Open+Sans:400italic,700italic,400,700?ver=3.5' type='text/css' media='all' />

Reason For Bounty

@webaware's answer is near perfect, especially because it's similar to the method employed in enqueuing 'Open Sans' Google Web Font in the Twenty Twelve theme.

The only problem in the output is that it's like this:

<link rel='stylesheet' id='twentytwelve-fonts-css'  href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed|Open+Sans:400italic,700italic,400,700&#038;subset=latin,latin-ext' type='text/css' media='all' />

Notice the &? It should be &, otherwise the font-files served only have the latin glyphs (i.e. the subset parameter in the URL is neglected unless you use & and NOT its HTML entity).

Anyone who can help modify @webaware's answer so that the output's looks like this...

<link rel='stylesheet' id='twentytwelve-fonts-css'  href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed|Open+Sans:400italic,700italic,400,700&subset=latin,latin-ext' type='text/css' media='all' />

...wins the bounty.

Answer 1

WordPress knows what it is doing here. Honest.

When rendering an ampersand in HTML, you should always use & or &. The browser then converts it to & before actually firing the HTTP request. See for yourself by inspecting the network calls in a web inspector tool. You're not actually losing your non-latin subsets.

Notice the &? It should be &, otherwise the font-files served only have the latin glyphs (i.e. the subset parameter in the URL is neglected unless you use & and NOT its HTML entity).

This tells me you have inspected the source to see that there is an escaped ampersand, without actually verifying the resulting behavior. Yes, it occurs when you paste a URL with an escaped ampersand in an address bar. But not when you have a properly encoded and escaped URL in an HTML src or href attribute.

You should look over http://www.blooberry.com/indexdot/html/topics/urlencoding.htm for additional unsafe and reserved characters. Both groups should always be encoded.

Answer 2

Try this (will also handle HTTP vs HTTPS):

function wpse_google_webfonts() {
    $protocol = is_ssl() ? 'https' : 'http';
    $query_args = array(
        'family' => 'Ubuntu+Condensed|Open+Sans:400italic,700italic,400,700',
        'subset' => 'latin,latin-ext',
    );

    wp_enqueue_style('google-webfonts',
        add_query_arg($query_args, "$protocol://fonts.googleapis.com/css" ),
        array(), null);
}

add_action( 'wp_enqueue_scripts', 'wpse_google_webfonts' );

Answer 3

Based on this answer you could try something like this untested code:

add_filter( 'clean_url', 'wpse_77227_decode_googlefont_url' );

function wpse_77227_decode_googlefont_url( $url )
{
    $host = parse_url ($url, PHP_URL_HOST );

    if ( 'fonts.googleapis.com' === $host )
        return urldecode( $url );

    return $url;
}

Answer 4

Actually, it's as simple as this:

wp_enqueue_style( 'google-webfonts', 'http://fonts.googleapis.com/css?family=Ubuntu+Condensed|Open+Sans:400italic,700italic,400,700&subset=latin,latin-ext', array(), null );

And that should output:

<link rel='stylesheet' id='google-webfonts-css'  href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed|Open+Sans:400italic,700italic,400,700&#038;subset=latin,latin-ext' type='text/css' media='all' />

That's pretty close to what I'd wanted (only regret being that & becomes & in output). But then I realized it doesn't matter, really, largely thanks to Andrew Nacin's answer.

But I must thank everyone for their efforts.