Add a TTF font file in PDF using Aspose.HTML

I am using ASPOSE.Html to convert Html document to Pdf.I need to add a TTF font file which is in resources folder of my application. I am following this example Html to Pdf. I went through the documentation i couldn't find the example to add font in the html document. This is the code -

string dataDir = RunExamples.GetDataDir_Data();

String SimpleStyledFilePath = dataDir + "FirstFile.html";
using (FileStream fs = File.Create(SimpleStyledFilePath))
using (StreamWriter sw = new StreamWriter(fs))
{
sw.Write(
    @"<style>
    body {
        font-family: 'roboto';
     }
    .st
    {
    color: green;
    }
    </style>
    <div id=id1>Aspose.Html rendering Text in Black Color</div>
    <div id=id2 class=''st''>Aspose.Html rendering Text in Green Color</div>
    <div id=id3 class=''st'' style='color: blue;'>Aspose.Html rendering Text in Blue Color</div>
    <div id=id3 class=''st'' style='color: red;'><font face='Arial'>Aspose.Html rendering Text in Red Color</font></div>
    ");
   } 

string pdf_output;
// Create HtmlRenderer object
using (Aspose.Html.Rendering.HtmlRenderer pdf_renderer = new 
Aspose.Html.Rendering.HtmlRenderer())
// Create HtmlDocument instnace while passing path of already created HTML 
file
using (Aspose.Html.HTMLDocument html_document = new 
Aspose.Html.HTMLDocument(SimpleStyledFilePath))
{
 // Set the page size less than document min-width. The content in the 
 resulting file will be cropped becuase of element with width: 200px
Aspose.Html.Rendering.Pdf.PdfRenderingOptions pdf_options = new 
Aspose.Html.Rendering.Pdf.PdfRenderingOptions
{
    PageSetup =
    {
        AnyPage = new Aspose.Html.Drawing.Page(new 
Aspose.Html.Drawing.Size(100, 100)),
        AdjustToWidestPage = false
    },
};
pdf_output = dataDir + "not-adjusted-to-widest-page_out.pdf";
using (Aspose.Html.Rendering.Pdf.PdfDevice device = new Aspose.Html.Rendering.Pdf.PdfDevice(pdf_options, pdf_output))
{
    // Render the output
    pdf_renderer.Render(device, html_document);
}

// Set the page size less than document min-width and enable AdjustToWidestPage option. The page size of the resulting file will be changed according to content width
pdf_options = new Aspose.Html.Rendering.Pdf.PdfRenderingOptions
{
    PageSetup =
    {
        AnyPage = new Aspose.Html.Drawing.Page(new Aspose.Html.Drawing.Size(100, 100)),
        AdjustToWidestPage = true
    },
};
pdf_output = dataDir +  "adjusted-to-widest-page_out.pdf";
using (Aspose.Html.Rendering.Pdf.PdfDevice device = new Aspose.Html.Rendering.Pdf.PdfDevice(pdf_options, pdf_output))
{
    // Render the output
    pdf_renderer.Render(device, html_document);
}
}

I am using the above sample code.I have Robotto.ttf file in my .Net application Resource folder.So after converting html file into pdf it takes default font.(Times Roman).So how would i apply font in the html to pdf file.

Solution

Thank you for sharing requested data.

We have modified the HTML file after downloading Roboto font from Google Fonts. Please make sure that the HTML file displays the content with respective font when opened in a browser. You may modify the HTML as per your requirements. Below code sample converts the HTML to a PDF file while rendering the content exactly as it is displayed by opening the HTML file in browser. You may download the source font files and generated PDF documents from this Google Drive link.

dataDir = dataDir + "Roboto\\";
String SimpleStyledFilePath = dataDir + "FirstFile_Aspose.HTML.html";
using (FileStream fs = File.Create(SimpleStyledFilePath))
using (StreamWriter sw = new StreamWriter(fs))
{
sw.Write(
@"<style>
@font-face { font-family: Roboto; src: url('Roboto-Bold.ttf'); }
body {
    font-family: 'Roboto';
 }
.st
{
color: green;
}
</style>
<div id=id1>Aspose.Html rendering Text in Black Color</div>
<div id=id2 class=''st''>Aspose.Html rendering Text in Green Color</div>
<div id=id3 class=''st'' style='color: blue;'>Aspose.Html rendering Text in Blue Color</div>
<div id=id3 class=''st'' style='color: red;'><font face='Arial'>Aspose.Html rendering Text in Red Color</font></div>
");
} 

string pdf_output;
// Create HtmlRenderer object
using (Aspose.Html.Rendering.HtmlRenderer pdf_renderer = new Aspose.Html.Rendering.HtmlRenderer())
// Create HtmlDocument instnace while passing path of already created HTML file
using (Aspose.Html.HTMLDocument html_document = new Aspose.Html.HTMLDocument(SimpleStyledFilePath))
{
 // Set the page size less than document min-width. The content in the  resulting file will be cropped becuase of element with width: 200px
Aspose.Html.Rendering.Pdf.PdfRenderingOptions pdf_options = new Aspose.Html.Rendering.Pdf.PdfRenderingOptions
{
    PageSetup =
    {
        AnyPage = new Aspose.Html.Drawing.Page(new Aspose.Html.Drawing.Size(100, 100)),        AdjustToWidestPage = false
    },
};
pdf_output = dataDir + "not-adjusted-to-widest-page_out.pdf";
using (Aspose.Html.Rendering.Pdf.PdfDevice device = new Aspose.Html.Rendering.Pdf.PdfDevice(pdf_options, pdf_output))
{
    // Render the output
    pdf_renderer.Render(device, html_document);
}

// Set the page size less than document min-width and enable AdjustToWidestPage option. The page size of the resulting file will be changed according to content width
pdf_options = new Aspose.Html.Rendering.Pdf.PdfRenderingOptions
{
    PageSetup =
    {
        AnyPage = new Aspose.Html.Drawing.Page(new Aspose.Html.Drawing.Size(100, 100)),        AdjustToWidestPage = true
    },
};
pdf_output = dataDir +  "adjusted-to-widest-page_out.pdf";
using (Aspose.Html.Rendering.Pdf.PdfDevice device = new Aspose.Html.Rendering.Pdf.PdfDevice(pdf_options, pdf_output))
{
    // Render the output
    pdf_renderer.Render(device, html_document);
}
}

You can compare generated PDF file with the HTML file by opening the latter in any browser. In case you notice any difference among these two files, please feel free to contact us. We will be glad to help.