Google font+variant joomla field

multifont.php

<?php
/**
 * @copyright	Copyright (C) 2012 Roberto Segura. All rights reserved.
 * @license		GNU General Public License version 3; see LICENSE.txt
 */

defined('JPATH_BASE') or die;

jimport('joomla.form.formfield');

class JFormFieldMultifont extends JFormField {
    
    protected $type = 'multifont';
    
    const GOOGLE_API_KEY = 'AIzaSyDCuX9p0CoInlBnfj_YmrtxFizvQ5sT1Cs';
    
    function getInput(){
        
        // Initialize variables.
        $options = array();
        $fontsJson = null;
        
        //$jsonResponse = @file_get_contents('https://www.googleapis.com/webfonts/v1/webfonts?key=' . self::GOOGLE_API_KEY);
        // temp load locally workaround
        $jsonResponse = @file_get_contents(dirname(__FILE__).'/webfonts');
        if ($jsonResponse) {
            $document = JFactory::getDocument();

            $decodedResponse = json_decode($jsonResponse);
            if (isset($decodedResponse->items)) {
                $fontsJson = "{";
                $options[] = JHtml::_('select.option', '', '- Select font -');
                $j = 0;
                foreach ($decodedResponse->items as $font) {
                    // replace spaces with + in option value
                    $value = str_replace(' ', '+', $font->family);
                    if ($j != 0) {
                        $fontsJson .= ",";
                    }
                    $fontsJson .= '"'.$value.'":';
                    if ( $font->variants) {
                        $i = 0;
                        $fontsJson .= '"';
                        foreach ($font->variants as $variant) {
                            if ($i != 0) {
                                $fontsJson .= ',';
                            }
                            $fontsJson .= $variant;
                            $i++;
                        }
                        $fontsJson .= '"';
                    }
                    $j++;
                    $options[] = JHtml::_('select.option', $value, $font->family);
                }
                
                $fontsJson .= "}";
                
                $fieldCssId = str_replace(' ', '_', trim(str_replace(array('][','[',']','-'), array(' ',' ',' ','_'), $this->name)));
                
                $css = "
                #multifont-selected {
                    font-weight: bold;
                    display: inline;
                    margin-right: 10px;
                }
                .multifont-btn, .multifont-btn:visited {
                    -webkit-border-radius: 5px;
                    -moz-border-radius: 5px;
                    border-radius: 5px;
                    background-color: #0088cc;
                    color: #FFFFFF;
                    padding: 3px 8px;
                }
                ";
                $document->addStyleDeclaration($css);
                
                $js = "
                    var j = jQuery.noConflict();
                    var fontsJson = {$fontsJson};
                    var multifont1 = '#multifont1';
                    var multifont2 = '#multifont2';
                    var hiddenField = '#{$fieldCssId}';
                    
                    function updateMultifont2() {
                    
                		var key = j(multifont1).val();
                		var vals = fontsJson[key].split(',');;
                		
                		var secondChoice = j(multifont2);
                		secondChoice.empty();
                		j.each(vals, function(index, value) {
                			secondChoice.append('<option value=\"' + value + '\" >' + value + '</option>');
                		});
                    }
                    
                    function updateHidden() {
                        var value = j(multifont1).val() + ':' + j(multifont2).val();
		                j(hiddenField).val(value);
		                j('#multifont-selected').text(value);
		                j('#multiremove').parent().css('display','block');
		                j('#multiadd').parent().css('display','none');
		                return false;
			        }
			        
			        function clearHidden() {
			        	j(hiddenField).val('');
		                j('#multiadd').parent().css('display','block');
		                j('#multiremove').parent().css('display','none');
		                return false;
				    }

                    j(function() {
                        updateMultifont2();
                        j(multifont1).change(function() {
                        	updateMultifont2();
                        });
                        
                        if (j(hiddenField).val() != '') {
                            updateHidden();
                        } else {
                            clearHidden();
                        }
                        
                        j('#multiadd').click(function(){
                            updateHidden();
			            });
			            
                        j('#multiremove').click(function(){
                            clearHidden();
			            });
                   });
                ";
                $document->addScript(JURI::root() . 'templates/joostrap/js/jquery-1.7.2.min.js');
                $document->addScriptDeclaration($js);
            } else{
                $options[] = JHtml::_('select.option', '', 'ERROR: None or bad JSON received');
            }
        } else {
            $options[] = JHtml::_('select.option', '', 'ERROR: Wrong URL or google API KEY?');
        }
        $output = '<div id="multifont-add">';
        $output .= JHTML::_('select.genericlist',  $options, 'multifont1', 'class="inputbox"', 'value', 'text', $this->value);
        $output .= JHTML::_('select.genericlist',  array(), 'multifont2', 'class="inputbox"', 'value', 'text', null);
        $output .= '<a href="#" id="multiadd" class="multifont-btn">Add</a>';
        $output .= '</div>';
        $output .= '<div id="multifont-remove">';
        $output .= '<p id="multifont-selected"></p>';
        $output .= '<a href="#" id="multiremove" class="multifont-btn">Remove</a>';
        $output .= '</div>';
        $output .= '<input type="hidden" id="'.$fieldCssId.'" name="'.$this->name.'" value="'.$this->value.'" />';

        return $output;
    }
    
}

Warning DIRTY CODE! :)
Still in progress.

Todo:

• Font doesn't save
• Multifont in one field

Extra:

• Download / cache fonts when user saves
• Refresh google font json only user demand

Roberto did you ever finish this?