JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://font.arphic.com/FontSubsetOutput/1416799708191/0E394822420DE531D5C1DD8645D7EE13/1416799708191.JS?8520232928"></script>
<table>
    <caption id="show">{{ 套用結果將顯示於此 }}</caption>
    <tr>
        <td>字型：</td>
        <td><input id="font-name" value="文鼎W鋼筆行楷M" /></td>
    </tr>
    <tr>
        <td>文字：</td>
        <td><textarea id="input-text" rows="4">永字八法 Abcdef 123456</textarea></td>
    </tr>    
</table>
<button id="set">套用</button>

CSS

caption {
    font-size: 200%;
}
input, textarea {
    width: 300px;
    padding: 5px;
    margin: 5px;
}
button {
    margin: 10px;
}

JavaScript

$(document).ready(function () {
    $('#set').on('click', function () {
        var inputText = $('#input-text').val();
        var fontName = $('#font-name').val();
        $('#show').text(inputText);
        arphicWebFontApi.ajaxWebFont('#show', fontName, 'fontkey1', function () {
           console.log('套用成功');
        });
    });
});