Fonts not applied while converting from HTML to PDF

[adityarlv]

I’m using v17.9 running MVC .net application.
I’m having issues on loading the fonts while converting HTML to PDF. Here is the code I’m using-

var basePath = HttpContext.Current.Request.Url.Scheme + “://” + HttpContext.Current.Request.Url.Authority;
var htmlOptions = new HtmlLoadOptions(basePath);
htmlOptions.PageInfo.Height = 725;
htmlOptions.PageInfo.Width = 792;
htmlOptions.PageInfo.Margin.Left = 10;
htmlOptions.PageInfo.Margin.Right = 10;
htmlOptions.PageInfo.Margin.Top = 75;
htmlOptions.PageInfo.Margin.Bottom = 20;

var pdf = new Document(new MemoryStream(System.Text.Encoding.UTF8.GetBytes(htmlString)), htmlOptions);
var headerHtml = new HtmlFragment(headerHTML);
HeaderFooter hf;
foreach (Aspose.Pdf.Page page in document.Pages)
{
hf = new Aspose.Pdf.HeaderFooter();
hf.Paragraphs.Add(headerHtml);
page.Header = hf;
if(page.Resources.Fonts != null)
{
foreach(Aspose.Pdf.Text.Font pageFont in page.Resources.Fonts)
{
if (!pageFont.IsEmbedded)
pageFont.IsEmbedded = true;
}
}
}
pdf.Save(dataDir + “Output.pdf”);

I’m referencing my style.css file from my razor(cshtml) file. I’m copy pasting a sample of how the font-family is defined in my style.css. I want to use 3 different fonts in the pdf file (I have all .otf font files placed in the same directory as the stylesheet)

@font-face {
font-family: ‘HelveticaNeueLTStd-BdCnO’;
src: url(‘HelveticaNeueLTStd-BdCnO.otf’) format(‘opentype’);
}
@font-face {
font-family: ‘HelveticaNeueLTStd-MdCn’;
src: url(‘HelveticaNeueLTStd-MdCn.otf’) format(‘opentype’);
}
@font-face {
font-family: ‘HelveticaNeueLTStd-Roman’;
src: url(‘HelveticaNeueLTStd-Roman.otf’) format(‘opentype’);
}

I can load all the styles except that it is not loading the proper font-families in the pdf file.

Thanks.

[imran.rafique]

@adityarlv,
You can use the custom fonts from other than the system default font path, you need to add that folder path into a font repository as follows:

[C#]

String fontFolderPath = “C:\temp”;
FolderFontSource fs = new FolderFontSource(fontFolderPath);
FontRepository.Sources.Add(fs);
FontRepository.FindFont(@“HelveticaNeueLTStd-Roman”);

[adityarlv]

@imran.rafique

Thanks for the response. I tried the same, now i get an error saying Font “…” was not found. This is the code I am using-

var fontFolderPath1 = @"…/CommStatementPDF/HelveticaNeueLTStd-BdCn.otf";
var fontFolderPath2 = @"…/CommStatementPDF/HelveticaNeueLTStd-BdCnO.otf";
var fontFolderPath3 = @"…/CommStatementPDF/HelveticaNeueLTStd-MdCn.otf";
var fontFolderPath4 = @"…/CommStatementPDF/HelveticaNeueLTStd-Roman.otf";
var fontFolderPath5 = @"…/fonts/fontawesome-webfont.eot";
var fontFolderPath6 = @"…/fonts/fontawesome-webfont.svg";
var fontFolderPath7 = @"…/fonts/fontawesome-webfont.ttf";
var fontFolderPath8 = @"…/fonts/fontawesome-webfont.woff";
var fontFolderPath9 = @"…/fonts/fontawesome-webfont.woff2";
var fontFolderPath10 = @"…/fonts/FontAwesome.otf";

		var fs = new FolderFontSource(fontFolderPath1);
		FontRepository.Sources.Add(fs);			
		var fs1 = new FolderFontSource(fontFolderPath2);
		FontRepository.Sources.Add(fs1);			
		var fs2 = new FolderFontSource(fontFolderPath3);
		FontRepository.Sources.Add(fs2);			
		var fs3 = new FolderFontSource(fontFolderPath4);
		FontRepository.Sources.Add(fs3);			
		var fs4 = new FolderFontSource(fontFolderPath5);
		FontRepository.Sources.Add(fs4);			
		var fs5 = new FolderFontSource(fontFolderPath6);
		FontRepository.Sources.Add(fs5);
		var fs6 = new FolderFontSource(fontFolderPath7);
		FontRepository.Sources.Add(fs6);
		var fs7 = new FolderFontSource(fontFolderPath8);
		FontRepository.Sources.Add(fs7);
		var fs8 = new FolderFontSource(fontFolderPath9);
		FontRepository.Sources.Add(fs8);
		var fs9 = new FolderFontSource(fontFolderPath10);
		FontRepository.Sources.Add(fs9);

		FontRepository.FindFont(@"FontAwesome", true);
		FontRepository.FindFont(@"HelveticaNeueLT Std Cn", true);
		FontRepository.FindFont(@"HelveticaNeueLTStd-BdCnO", true);
		FontRepository.FindFont(@"HelveticaNeueLTStd-MdCn", true);
		FontRepository.FindFont(@"HelveticaNeueLTStd-Roman", true);

It is throwing the error right at this line - “FontRepository.FindFont(@“FontAwesome”, true);”

fonts.zip (506.3 KB)

[imran.rafique]

@adityarlv,
Please move all font files in a folder, and then specify the font path with the following code. It works in our environment.

[C#]

string dataDir = @"C:\Pdf\test326\fonts\";
var fs = new Aspose.Pdf.Text.FolderFontSource(dataDir);
FontRepository.Sources.Add(fs);
FontRepository.FindFont(@"FontAwesome", true);

[adityarlv]

@imran.rafique

Alright, so there is change of action on how we are loading the fonts. We are using a Adobe Typekit to load fonts for our website and we use “Proxima-nova” fonts and that is exactly what I would like to use in our pdf as well.

And the way we load those fonts is calling the external javascript file under “head” section of the razor file as below-

<script type="text/javascript" src="//use.typekit.com/blah.js"> </script>
<script> try { Typekit.load({ async: true }); } catch (e) { }</script>

So I tried the same in my cshtml file before it gets streamed in my Aspose pdf convertion. It did not work, meaning the fonts loading were all “Arial” which is a system font.
I later tried to use the following code from your documentation, but did not work either. When PDF got loaded in the browser, it threw a warning message saying - “Javascript is not supported”

pdf.JavaScript["something"] = "<script type=\"text/javascript\" src=\"https://use.typekit.com/blah.js\"></script>";
pdf.JavaScript["something1"] = " try { Typekit.load({ async: true }); } catch (e) { }";

I even tried this, it did not work either

JavascriptAction js = new JavascriptAction("<script type=\"text/javascript\" src=\"https://use.typekit.com/blah.js\"></script> try { Typekit.load({ async: true }); } catch (e) { }");
pdf.OpenAction = js;

So, basically how do I get this javascript thing loaded in my pdf to display the Adobe typekit fonts.

Thanks.

[imran.rafique]

@adityarlv,
Kindly create a small MVC project application which reproduces the same problem in your environment, and then send us a Zip of this project. We will investigate and share our findings with you. Your response is awaited.

[adityarlv]

Ok, you can download a small MVC project from the link below-

https://drive.google.com/file/d/0Bxo28HWyjB4Wa01zbElneXpfM3M/view?usp=sharing

Important thing to notice is you need to run the application as localhost, as localhost is one of the domains we have registered for the typekit account. The fonts will get loaded only for the registered domains.

So, I have a home page which loads accurate font - “Proxima-Nova”
http://localhost:8662/Home/Index
Then I have this Aspose pdf page, which loads only the system font and not “Proxima-Nova”
http://localhost:8662/Commission/Index

All we need is to refer the following lines to load the fonts from typekit-

 < link rel="stylesheet" type="text/css" href="/Content/style.css"> 
 < script type="text/javascript" src="https://use.typekit.com/blah.js"></script>
 < script> try { Typekit.load({ async: true }); } catch (e) { }</script>

I have the above references in 2 places - one for webpage and another one for pdf
-Views/Shared/_Layout.cshtml (Loads the correct font, checked this by using Firebug)
-Views/Commission/_CommStatement.cshtml (Does not load the correct font)

Thanks.

[imran.rafique]

@adityarlv,
We managed to replicate the problem of not being able to load font from external Javascript. We have logged an investigation under the ticket ID PDFNET-43398 in our issue tracking system. We have linked your post to this ticket and will keep you informed regarding any available updates. We have also created and logged a simple use case along with your MVC project like:

Files: Files.zip (25.8 KB)
[C#]

string dataDir = @"C:\Pdf\test336\Convert\";
var htmlOptions = new HtmlLoadOptions(dataDir);
htmlOptions.PageInfo.Height = 725;
htmlOptions.PageInfo.Width = 792;
htmlOptions.PageInfo.Margin.Left = 10;
htmlOptions.PageInfo.Margin.Right = 10;
htmlOptions.PageInfo.Margin.Top = 75;
htmlOptions.PageInfo.Margin.Bottom = 20;
Document document = new Document(dataDir + "inputHTML.html", htmlOptions);
document.Save(dataDir + "PDF.pdf");