How to trigger an event when user chooses font family for a text input?

Question

I am trying to figure out how I can change the font-family below and still trigger the event that fits the text in the given width. When I type a long string, then change font-family... the new font family's characters extended outside the area. See photo attached.

This code uses the inputfit.js which fits text to a specific area by increasing/decreasing font size when new text is added. The clone font-family isn't changing and font size doesn't change unless keyup or keydown. I've been at this for hours now and I can't seem to make it work. Any help would be greatly appreciated.

// http://vadim.sikora.name/jquery.inputfit.js
// jquery.inputfit.js with modifications
// global define:true
(function (factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['jquery'], factory);
    } else {
        // Browser globals
        factory(jQuery);
    }
}
(function ($) {
    $.fn.inputfit = function(options) {
        var settings = $.extend({
            minSize   : 10,
            maxSize   : 150,
        }, options);
        this.each(function() {
            var $input = $(this);
            if ( !$input.is(':input') ) {
                return;
            }
            $input.off('keyup.inputfit keydown.inputfit');
            var maxSize = parseFloat(settings.maxSize || $input.css('font-size'), 10);
            var width   = $input.width();
            var clone   = $input.data('inputfit-clone'); // why do I need clone?
            if (!clone) {
                clone = $('<div></div>', {
                    css : {
                        fontSize     : $input.css('font-size'),
                        fontFamily   : $input.css('font-family'),
                        fontStyle    : $input.css('font-style'),
                        fontWeight   : $input.css('font-weight'),
                        fontVariant  : $input.css('font-variant'),
                        letterSpacing: $input.css('letter-spacing'),
                        whiteSpace   : 'pre', // counts the spaces on the ends, use to be 'nowrap' *modification*
                        position     : 'absolute',
                        left         : '-9999px',
                        visibility   : 'hidden'
                    }
                }).insertAfter($input);
                $input.data('inputfit-clone', clone);
            }

            // how do I make text fit after font family changes?? clone font family not changing
            // clone.css('font-family', $input.css('font-family')); ????

            $input.on('keyup.inputfit keydown.inputfit', function() {
                var $this = $(this);
                clone.text($this.val());
                var ratio = width / (clone.width() || 1),
                currentFontSize = parseInt( $this.css('font-size'), 10 ),
                fontSize = Math.floor(currentFontSize * ratio);
                if (fontSize > maxSize) {
                	fontSize = maxSize;
                }
                if (fontSize < settings.minSize) {
                	fontSize = settings.minSize;
                }
                $this.css('font-size', fontSize);
                clone.css('font-size', fontSize);
            }).triggerHandler('keyup.inputfit');
        });
        return this;
    };
}));

$(document).ready(function(){
    $('#input').inputfit();
    $(window).resize(function(){
        $('#input').inputfit();
    });
});
$(function () {
    $('select[name="font"]').on('change', function () {
        $('input[name="input"]').css('font-family', this.value);
    });
    $('select[name="color"]').on('change', function () {
        $('input[name="input"]').css('color', this.value);
    });
});

body {
	overflow-x: hidden;
	overflow-y: auto;
}
input:focus {
	outline: none;
}	
section {
	text-align: center;
}
input {
	width: 100%;
    height: 300px;
    text-align: center;
    border-width: 0;
    font-family: "Berkshire Swash";
    color: #00000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	    <title>jquery.inputfit.js</title>
	    <link href="https://fonts.googleapis.com/css?family=Arimo|Berkshire+Swash|Fredoka+One|Pacifico" rel="stylesheet">
	</head>
	<body>
	    <input id="input" name="input" value="Type Here" type="text" maxlength="100" spellcheck="false">
	    <section>
	    	<select name="font">
	    		<option value="Berkshire Swash">Berkshire Swash</option>
			    <option value="Pacifico">Pacifico</option>
			    <option value="Fredoka One">Fredoka One</option>
			    <option value="Arimo">Arimo</option>
			</select>
			<select name="color">
				<option value="#000000">black</option>
	    		<option value="#0000ff">blue</option>
	    		<option value="#ff0000">red</option>
	    		<option value="#ffff00">yellow</option>
			</select>
	    </section>
	</body>
</html>

Answer 1

You could do this by "triggering" keyup. By triggering keyup, inputfit will be ran.

    $('select[name="font"]').on('change', function () {
            $('input[name="input"]').css('font-family', this.value);
            $("#input").trigger("keyup");
    });