Posted in
740
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
Idea: Google Font Dropdown Selector Code Demo
View Demo Full Screen View Demo New Tab
Idea: Google Font Dropdown Selector Code Code
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>Add Comment
Other Items in ideas
Related Search Terms
Other Categories in Code
php functions
php functions
php functions