changing font-family on the page is not always working

Question

I am a feature which allows user to change font-family of text inside divs and it kind of works. I will try to explain what is wrong hopefully you will understand.

User clicks on font and select "Arial Black" Click on div, font changes. User clicks on "Times New Roman" Click on div, font changes. User clicks on google font "Lato" Click on div, font changes. User clicks on font "Arial Black" Click on div, nothing happens (I did console.log and both font and font2 are undefined at this point). It only starts to work again when user selects "Arial" and click on div.

var originalFont = $('#fonts1').data('font');
            var originalgFont = $('#googlefonts1').data('font');
            var originalsFont = $('#fontsizes1').data('fontsize');
            var originalColor = $('#colorChoice').css('background', 'white');
            var textColor =$('#textColor').css('color', 'black');
            var font;
            $("#fonts1").on("change", function() {
                font = $(this).val();
            });
            $("#content-link2").on("click", "*", function() {
                $(this).css('font-family', font);
                console.log(font);
                font = originalFont;
            });
            var font2;
            $("#googlefonts1").on("change", function() {
                font2 = $(this).val();
            });
            $("#content-link2").on("click", "*", function() {
                $(this).css('font-family', font2);
                console.log(font2);
                font2 = originalgFont;
            });


<button style="display: none" onclick="$('#fonts1').bfhfonts({font: 'Arial'})" id="fontsShow" class="btn btn-primary form-control margin hide_all">Load Fonts</button>
        <button style="display: none" class="btn btn-primary form-control margin hide_all" id="fontsHide">Hide Fonts</button>
        <select title="Choose a font and then click on any box" style="display: none" id="fonts1" class="form-control margin hide_all"></select>

        <button style="display: none" onclick="$('#googlefonts1').bfhgooglefonts({font: 'Lato'})" id="googleShow" class="btn btn-primary form-control margin hide_all">Google fonts</button>
        <button style="display: none" class="btn btn-primary form-control margin hide_all" id="googleHide">Hide Google</button>
        <select title="Choose a font and then click on any box" style="display: none" id="googlefonts1" class="form-control margin hide_all"></select>