PeterBooker · October 28, 2013 15:45 · Oct 28, 2013
diff --git a/google_font_importer.php b/google_font_importer.php
@@ -0,0 +1,12 @@
+<?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);
diff --git a/google_font_select.php b/google_font_select.php
@@ -0,0 +1,77 @@
+<?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>