Skip to content

Instantly share code, notes, and snippets.

@PeterBooker
Created October 28, 2013 15:45
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save PeterBooker/7199234 to your computer and use it in GitHub Desktop.
Save PeterBooker/7199234 to your computer and use it in GitHub Desktop.
Imports Google Webfonts and creates a Dropdown to select a font from.
<?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>
@clifgriffin
Copy link

clifgriffin commented Feb 28, 2020

Just FYI your Google API key is here for the world to see :-)

Edit: Google actually seems to take a pretty low view of security of this key so maybe never mind. 🤷‍♂️

@PeterBooker
Copy link
Author

PeterBooker commented Mar 1, 2020

I appreciate the heads up Clifton. I no longer have access to the account the key was setup on, so I am not sure there is a constructive action I can take now. If you have any suggestions I am open to them- after 6 years it feels like deleting it would have a minimal effect, but might be the only course I can take?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment