Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:

Description of problem:
I am using WordPress classic editor and when I add the datatable code, I can see some box in the header and the font for the footer and top area of the table has a different font. Please check and advise as I am stuck here.

<code>

<table id="example" class="hover" style="font-family:open sans, arial, sans-serif">
<thead>
<tr><th>Name</th><th>Position</th><th>Office</th></tr>
</thead>

<tbody>

<tr>
<td>ANISH Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
</tr>

<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
</tr>

<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
</tr>

<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
</tr>

</tbody>
</table>

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css"/>

<script type="text/javascript" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>

<script language="javascript" type="text/javascript"></script>

<script>
$(document).ready(function() {
    $('#example').DataTable();
} );
</script>

</code>