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

https://stackoverflow.com/questions/36872550/google-web-fonts-in-a-dropdown-list-dynamically-with-respective-font-weights 

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
81
This Month
408
This Year
408

No Items Found.

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

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.
Unknown