Issue
When converting HTML to PDF, custom fonts from an external source (like a CDN or linked CSS) don’t appear in the PDF—even though they’re imported in your HTML file.
Why This Happens
The CSS link you’re using doesn’t point directly to the font files. Instead, it links to another CSS file that loads the fonts. Some PDF rendering engines don’t follow this chain of linked files, so the fonts never load into the PDF.
How to Fix It
To make sure the fonts display in the PDF:
Don’t use
@importor<link>tags that reference external CSS files.Instead, copy the direct
@font-facedeclaration with the actual font file URL into your HTML.
Example – What Doesn’t Work
If you’re importing the font like this, it may fail:
<style> @import url('http://fonts.cdnfonts.com/css/ocr-a-extended'); </style>
or:
<link href="http://fonts.cdnfonts.com/css/ocr-a-extended" rel="stylesheet">
These point to a stylesheet, not directly to the font files.
Solution – What to Do Instead
Open the CSS URL (e.g.,
http://fonts.cdnfonts.com/css/ocr-a-extended) in your browser.Look inside for the
@font-facerule and the direct.woffor.ttffont file link.Copy that
@font-faceblock directly into your HTML’s<style>tag:
<head>
<style>
@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');
}
</style>
</head>
<body>
<div style="font-family: 'OCR A Extended';">
OCR EXT 01234567890ABCDEFG.
</div>
</body>
This makes sure the PDF converter loads the font directly without relying on external CSS files.
Tips
Always check the CSS link in a browser to confirm it leads to actual font file URLs.
Use direct
.woffor.ttfURLs with@font-facefor better compatibility.Use HTTPS links to avoid security or mixed-content issues.