TinyMCE shows builder font change tags - system-font

Question

After integration, I used to create a template and save the HTML source code. After I view that HTML code it shows the below as in the attached screenshot.
Inside that editor shows like the below-attached screenshot:
Here is my code
var tinyconfig = {
skin: 'oxide-dark',
inline: true,
menubar: false,
force_br_newlines : false,
force_p_newlines : false,
forced_root_block : '',
inline_boundaries: false,
relative_urls: false,
convert_urls: false,
remove_script_host : false,
valid_elements : '*[*],meta[*]',
valid_children: '+h1[div],+h2[div],+h3[div],+h4[div],+h5[div],+h6[div],+a[div]',
plugins: 'image link textcolor lists autolink',
//toolbar: 'undo redo | bold italic underline | fontselect fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignfull | numlist bullist outdent indent',
// toolbar: [
// 'undo redo | bold italic underline | fontselect fontsizeselect | link | menuDateButton',
// 'forecolor backcolor | alignleft aligncenter alignright alignfull | numlist bullist outdent indent'
// ],
toolbar:false,
external_filemanager_path:'{{ url('/') }}'.replace('/index.php','')+"/filemanager2/",
filemanager_title:"Responsive Filemanager" ,
external_plugins: { "filemanager" : '{{ url('/') }}'.replace('/index.php','')+"/filemanager2/plugin.min.js"},
setup: function (editor) {
/* Menu button that has a simple "insert date" menu item, and a submenu containing other formats. */
/* Clicking the first menu item or one of the submenu items inserts the date in the selected format. */
editor.ui.registry.addMenuButton('menuDateButton', {
text: getI18n('editor.insert_tag'),
fetch: function (callback) {
var items = [];
thisEditor.tags.forEach(function(tag) {
if ( tag.type == 'label') {
items.push({
type: 'menuitem',
text: tag.tag.replace("{", "").replace("}", ""),
onAction: function (_) {
if (tag.text) {
editor.insertContent(tag.text);
} else {
editor.insertContent(tag.tag);
}
}
});
}
});
callback(items);
}
});
}
};