Simple Font Selector using Google Web Fonts api With jQuery Fontselect Plugin

Google has provided web font api which help you to use lot’s of font styles on your web project. the plugin font selector to choose from fonts available as part of the Google Web Fonts api. Let users easily select and preview a font from Google’s large range of free fonts. FontSelect jQuery plugin has used google web font api to convert you simple website font into many stylish fonts. This plugin create a select box with lot’s of font family and and when ever user choose any font it dynamic render font family to css and convert you simple website fonts into stylish font’s.

Crete Font Selector using Google Web Fonts api

Libraries

Load required plugin’s libraries on page.

<link rel="stylesheet" type="text/css" href="fontselect-alternate.css" />
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">script>
<script src="jquery.fontselect.min.js">script>

HTML

Create a simple text input field which all font’s family form google web font api.

JS

initialize the plugin and call the function on the text input and set selected font family dynamically via css to html paragraph.

    <script>
      $(function(){
        $('#font').fontselect().change(function(){
 
          // replace + signs with spaces for css
          var font = $(this).val().replace(/\+/g, ' ');
 
          // split font into family and weight
          font = font.split(':');
 
          // set family on paragraphs 
          $('p').css('font-family', font[0]);
        });
      });
    script>

See live demo and download source code.

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.

Related