更改页面上的font-family并不总是有效

Question

我是一个允许用户更改div内部文本字体系列的功能，它有点工作。我会尝试解释有什么问题，希望你会理解。

用户点击字体并选择“Arial Black” 单击div，字体更改。 用户点击“Times New Roman” 单击div，字体更改。 用户点击谷歌字体“Lato” 单击div，字体更改。 用户点击字体“Arial Black” 点击div，没有任何反应（我做了console.log，此时字体和font2都是未定义的）。 当用户选择“Arial”并单击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>