Imported font is not displaying properly

If you are importing font from a remote source then please check the suggestions below. The common issue is that CSS actualy refers to another CSS. It can be fixed by replacing this link into direct CSS code insert.

Example:

By default font is imported from url like this:

<html>
<head>

<!-- ..... -->

<style>
@import url('http://fonts.cdnfonts.com/css/ocr-a-extended');
</style>

<!-- ..... -->

</head>

<body>

<div style="font-family: 'OCR A Extended';">
OCR EXT 01234567890ABCDEFG.
</div>

</body>
</html>

or like this:

<link href="http://fonts.cdnfonts.com/css/ocr-a-extended" rel="stylesheet">

Fix for this issue:

Check the url if it actually leads to another CSS with the font declaration
If it leads into another CSS style then try to embed this CSS directly into HTML template instead of the link to css as the following:

<html>
<head>

<!-- ..... -->

 /* font with OCR A Extended face */
        @font-face {
            font-family: 'OCR A Extended';
            font-style: normal;
            font-weight: 400;
            src: url('https://fonts.cdnfonts.com/s/14159/OCRAEXT_2.woff') format('woff');
        }
<!-- ..... -->

</head>

<body>

 <div style="font-family: 'OCR A Extended';">OCR EXT 01234567890ABCDEFG.</div>

</body>
</html>