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

by

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.

2 Answers
2

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)

Leave a Comment