Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<?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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment