jeremykenedy/google_font_importer.php

## google_font_importer.php
<?php
/*
 * Google Font Importer
 */

$fonts = "https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyCpfnm5kVng8hhP_jnAnnTXVP7MEUM89-k";

$fonts = file_get_contents($fonts, 0, null, null);

$fp = fopen('fonts.txt', 'w');
fwrite($fp, $fonts);
fclose($fp);

## google_font_select.php
<?php
/*
 * Google Font Chooser
 */

$path = "/home/kebopowe/public_html/functions/fonts.txt";
//$path = "http://kebopowered.com/functions/fonts.txt"; // use this if remote

$request = file_get_contents( $path );

$fonts = json_decode( $request );

?>

<!DOCTYPE html>
<html>

    <head>

        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

        <style type="text/css">
            select {
                border: 1px solid #ddd;
                font-size: 18px;
                height: 12em;
            }
            select optgroup {
            }
            select option {
                padding: 2px 6px;
            }
        </style>

    </head>

    <body>

        <h2>Google Webfonts Selector</h2>

        <select id="font-selector" style="font-family: '<?php echo $fonts->items[0]->family; ?>', Arial, sans-serif;" size="4" multiple="multiple">

            <?php foreach ( $fonts->items as $font ) { ?>

            <optgroup style="font-family: '<?php echo $font->family; ?>', Arial, sans-serif;" data-src="http://fonts.googleapis.com/css?family=<?php echo str_replace(' ', '+', $font->family); ?>&text=<?php echo str_replace(' ', '+', $font->family); ?>">
                <option value="<?php echo str_replace(' ', '+', $font->family); ?>"><?php echo $font->family; ?></option>
            </optgroup>

            <?php } ?>

        </select>

        <script>
            $( document ).ready(function() {

                setTimeout( function() {

                    $.each( $("#font-selector optgroup"), function() {

                        var src = $(this).data( "src" );
                        $('head').append("<link href='" + src + "' rel='stylesheet' type='text/css'>");

                    });

                }, 0);

                $("#font-selector").change(function() {
                    var selected = $("#font-selector option:selected").text();
                    $(this).css( 'font-family', selected );
                });

            });
        </script>

    </body>

</html>
	<?php
	/*
	* Google Font Importer
	*/

	$fonts = "https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyCpfnm5kVng8hhP_jnAnnTXVP7MEUM89-k";

	$fonts = file_get_contents($fonts, 0, null, null);

	$fp = fopen('fonts.txt', 'w');
	fwrite($fp, $fonts);
	fclose($fp);
	<?php
	/*
	* Google Font Chooser
	*/

	$path = "/home/kebopowe/public_html/functions/fonts.txt";
	//$path = "http://kebopowered.com/functions/fonts.txt"; // use this if remote

	$request = file_get_contents( $path );

	$fonts = json_decode( $request );

	?>

	<!DOCTYPE html>
	<html>

	<head>

	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

	<style type="text/css">
	select {
	border: 1px solid #ddd;
	font-size: 18px;
	height: 12em;
	}
	select optgroup {
	}
	select option {
	padding: 2px 6px;
	}
	</style>

	</head>

	<body>

	<h2>Google Webfonts Selector</h2>

	<select id="font-selector" style="font-family: '<?php echo $fonts->items[0]->family; ?>', Arial, sans-serif;" size="4" multiple="multiple">

	<?php foreach ( $fonts->items as $font ) { ?>

	<optgroup style="font-family: '<?php echo $font->family; ?>', Arial, sans-serif;" data-src="http://fonts.googleapis.com/css?family=<?php echo str_replace(' ', '+', $font->family); ?>&text=<?php echo str_replace(' ', '+', $font->family); ?>">
	<option value="<?php echo str_replace(' ', '+', $font->family); ?>"><?php echo $font->family; ?></option>
	</optgroup>

	<?php } ?>

	</select>

	<script>
	$( document ).ready(function() {

	setTimeout( function() {

	$.each( $("#font-selector optgroup"), function() {

	var src = $(this).data( "src" );
	$('head').append("<link href='" + src + "' rel='stylesheet' type='text/css'>");

	});

	}, 0);

	$("#font-selector").change(function() {
	var selected = $("#font-selector option:selected").text();
	$(this).css( 'font-family', selected );
	});

	});
	</script>

	</body>

	</html>