Posted in
6
8:55 am, October 6, 2021
Idea: Google Font Dropdown Selector Code
just an idea at the moment, a dropdown list of google fonts and when selected it loads that selected font using the @import css tag.
Loading the fonts Gist : not tested
https://gist.github.com/PeterBooker/7199234
Using the google font API
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>View Statistics
This Week
151
This Month
394
This Year
0
Add Comment
Other Items in ideas
Related Search Terms
Other Categories in Code
c testing apache apps asp bat bootstrap bootstrap templates core css css grid design elements fancybox fonts foundation framework gimp git html icons ideas images javascript jquery js linux mac nginx node php php functions php simple html dom pi400 python react sections site bugs site documentation sql sqlite sublime svg templates tools virtual box webdev windows wordpress
