Posted in ideas
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 

Using the google font API 


 * Google Font Chooser

$path = "/home/kebopowe/public_html/functions/fonts.txt";
//$path = ""; // use this if remote

$request = file_get_contents( $path );

$fonts = json_decode( $request );


<!DOCTYPE html>
        <script src=""></script>
        <style type="text/css">
            select {
                border: 1px solid #ddd;
                font-size: 18px;
                height: 12em;
            select optgroup {
            select option {
                padding: 2px 6px;
        <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="<?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>
            <?php } ?>
            $( 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 );

View Statistics
This Week
This Month
This Year

No Items Found.

Add Comment
Type in a Nick Name here
Search Code
Search Code by entering your search text above.

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

Join me on Substack if you want me to send you a collection of the things i have done or found or read for the week. Or follow me on twitter if you prefer, i dont post much but i probably should!


Random Quote
I'm a big believer in energy and the secret and that sort of thing.