Making the Google Fonts control work

[gabydevdev]

Hi,

I was wondering how does the Google Font controller would be used in the front page, how would i call it?

[ehrig]

Echo the Google Font like this:

<?php echo get_theme_mod('google_font_setting'); ?>

Though the output is numeric, not the font family, as the option's value isn't the actual font. Any fix?

[gabydevdev]

Yes, that's what I got. I'll keep looking into it, if I get an answer I'll post it, thanks :)

[davebonds]

+1 Also looking for a way to get the selected font name instead of the option value. Any help is appreciated!

EDIT: Just figured it out. Line 35 change:
printf('<option value="%s" %s>%s</option>', $k, selected($this->value(), $k, false), $v->family);

To:
printf('<option value="%s" %s>%s</option>', $v->family, selected($this->value(), $k, false), $v->family);

[steveshead]

Thanks for the fix @davebonds - however I've noticed that only some of the Google Fonts are working and can't make out why. I would have thought all would be available but for some reason not. Any clue?

Once I have Google fonts sorted I'm going to upload my base theme with a healthy suite of options and let folks have access to it, and improve it. It's based on roots sass, using Grunt - fun times.

[davebonds]

It's limited to 30 at line 51 - just change the amount or set it to all.

[steveshead]

@davebonds - thanks so much for the reply - I'm only getting five out of the main list though - that's the issue. I'm okay with the amount, just wondering why when selected they don't show.

I tried uploading the theme to a live web host and it still doesn't show the fonts. Any help on getting them to show gratefully received.

[ghost]

Hello,
same problem here. I have changed the $amout to all but only some fonts work (the most popular like Oswald...). When I try other fonts, nothing happen. How can I fix that?
Thanks.

[ekazda]

I'll share some information that I had to figure out on my own.

On line 51, you can change the number of fonts you wish to return. Changing this value to 'all' will return all the fonts within Google Fonts.

By default, the font list returned is ordered by Popularity. However, you can change this by adding one of the following values to the API call on line 78:

alpha: Sort the list alphabetically
date: Sort the list by date added (most recent font added or updated first)
popularity: Sort the list by popularity (most popular family first)
style: Sort the list by number of styles available (family with most styles first)
trending: Sort the list by families seeing growth in usage (family seeing the most growth first)

[shermandy]

@steveshead - sorry for the out-of-nowhere response. But I experienced the same problem you had and fixed it.

The only fonts that weren't working were ones with multiple word names (basically any font with a space in the title, e.g., Slabo 27px). To fix this, you just need to add ' ' around the CSS font declaration:

font-family: '';

[mairagall]

Hi all, I have problems integrating the fonts...it seems that fonts are not being loaded properly from the cache file, when I select a font the style is applied correctly via CSS but it shows a serif font instead of the selected font. I've created and added the API KEY but I'm not sure what else should I do...

Appreciate any help...

[robertdevore]

I'm experiencing the same issue as @mairagall and others, where only a few of the fonts that are in cache actually display when selected in a theme, defaulting to a serif font.

Anyone with an idea of what is happening?

[monparaashvin]

only default apply not all please help

[webmix]

@ehrig I had the same issue, this is how I did to retrieve the json data:

    <?php

        $json = file_get_contents( get_stylesheet_directory().'/inc/wordpress-theme-customizer-custom-controls/select/cache/google-web-fonts-request.txt' );
        $data = json_decode($json, true);
        $font_id = get_theme_mod('setting_name', '0');

        $family = ($data['items'][$font_id]['family']);
        $name = str_replace(' ', '+', $family);

        $file = ($data['items'][$font_id]['files']['regular']); // if you need the file

    ?>

    <style>
        @import url('https://fonts.googleapis.com/css?family=<?php echo $name; ?>');
        h1, h2, h3, h4, h5 {
            font-family: <?php echo $family; ?> !important;
        }
    </style>