WordPress Customizer Typography: How to load just the unique Google Fonts?

Question

I have 10 big dropdown select combo boxes of hundreds of font-faces, including System Fonts and Google Fonts. All combo boxes carry the same values.

There are two more combo boxes for each of the boxes above, for loading the language and the font-weight sets. These should only be visible/active if the selected font is a Google font.

I'm getting all the font-faces in the select lists through a JSON file via json_decode. Before, I was using separate combo boxes for System Fonts and Google Fonts, and the task was little simpler than what I have now.

JSON file is like below (just an example):

{
   "fonts":[
      "Arial",
      "Helvetica",
      "Georgia",
      "Aclonica",
      "Acme",
      "Actor",
      "Adamina",
      "Advent Pro",
      "Aguafina Script"
   ]
}

Then I'm using a function (call it JSON_fonts) to get all these values from the JSON file as an array.

$wp_customize->add_control( 'font_1',
    array(
        'label' => esc_html( 'Body Font', 'my_theme' ),
        'section' => 'typography',
        'type' => 'select',
        'choices' => JSON_fonts()
    )
);

(I think I should use separate JSON files for System fonts and Google Fonts).

What I want to do is, to assign keys to the fonts in the select boxes to detect their type (is it a system font or Google).

If the selected value is a Google font, then:

1. Collect it in an variable to use it further for en-queuing.
2. Enable the language and font-weight select boxes for the respective font-face.

En-queuing is not a problem, but getting the type of the font and the unique values is very problematic to me.

• Complexity 1: Getting the font-type
• Complexity 2: If the fonts match, merge their respective language and font-weight lists (one-to-one matching will be too much code).
• Complexity 3: Asking wp-ajax to reload the font without refreshing the customizer.

Any help would be greatly appreciated. Also, feel free to share your ideas to bring down the complexity-level.

Answer 1

This question is way too broad for a complete answer in a Q&A format, but here is roughly what I would do:

1. Collect all system fonts in an array $sys_fonts
2. Collect all Google fonts in an array $ggl_fonts
3. Collect the complete info about Google fonts in a multidimensional array $ggl_fontinfo
4. Merge $sys_fonts and $ggl_fonts in an array $total_fonts
5. Use $total_fonts for your dropdown
6. Using jquery, detect which item is selected from the dropdown
7. If the item is in sys_fonts use the normal procedure to change the css without reloading the page.
8. If the item is in ggl_fonts use it as a key to look up variants (bold, italics, etc) and subsets (languages) in ggl_fontinfo. Then, dynamically add fields to the form. Once all is set, look up which font files you need in ggl_fontinfo and load them dynamically into the page.

Beware that depending on your skills this may take several days to implement (which is why you are unlikely to get a cut-and-paste-ready answer here for free)

Answer 2

What you can do is add a prefix to each choice key for each Google font, so that your choices would look something like this:

$choices = array(
     '_google_open_sans' => 'Open Sans',
     '_google_titillium' => 'Titillium Web',
     'arial' => 'Arial',
);

Then, when you go through your list of selected fonts, you can just check for the _google_ prefix in the key. You can use the Web Font Loader to update the Customizer without refreshing. Just plug into a selective refresh.

A bit too complicated?

I actually tried above approach for a theme I made for a client. I used the Google Fonts API to pull in the list of fonts, cache it, then mix it up with a pre-generated list of system fonts, all for the font selector dropdowns.

However, the final system was a bit unwieldy. I replaced each dropdown with two text boxes. The first specified what Google Font import statement to execute (like Titillium+Web:400,400i,600,600i), while the second specified the font-family (like "Titillium Web", Arial, sans-serif).

This was actually easier for my client. Instead of scanning through a loooong dropdown, he just had to copy-paste what he needed. This also eliminated the need to cache the font list.