How about providing some code example???

Hi @viktordart,

PDF Specifications has only a few 14 fonts available by default, http://www.enfocus.com/manuals/ReferenceGuide/PP/10/enUS/en-us/concept/c_aa1140975.html
in order to display your icons that are embedded inside the font format, you will need to add it to the PDF as a ressource. (which will increase the PDF size)

With JSPDF see the function addFont to inclure your icons into the PDF,

with regards,

Hi,
Thanks for the answers.
The one followed by the steps, but I can not get them to show.

I put part of the code:

var doc = new jsPDF('p', 'pt', 'a4');
doc.addFont('/fonts/awesome/fontawesome-webfont.ttf', 'FontAwesome', 'normal', 'StandardEncoding');
doc.setFont('FontAwesome');

doc.addHTML($(idContainer), 0, 0, options, function() {	
...			
});

A example HTML:

<i class="fa fa-outline fa-outline-mini fa-retweet" aria-hidden="true"></i>

I have imported another icon source: http://ionicons.com/ and with that I have not problems

thanks!

great !
if this is working fine i let you close this issue

regards,

Hello,
With ionicons.com it works properly, but with fontawesome does not work.

Is there any way to fix it?

Thank you

what the error ?

could you send me the PDF file please.

Hello,

Attached two images with the results.

The image with the red "circles" corresponds to the HTML. The other, when the PDF is exported.

The clock icon corresponds to another library.

Any suggestions on why the icons are not exported?

Thank you

i trust the fact that the font/icon is not visible in your PDF but if you share your PDF result i can dig into the generated code and see if the font as an external ressources is actually in the PDF file.

if you want to check by yourself use PDF specifications available here (http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_reference_1-7.pdf) page 390.

Hello,
I think I found the problem.
To the icons, I apply a css to make an outline effect.

.fa-outline { color: rgba(0, 0, 0, 0) !important; -webkit-text-stroke-width: 0.6px; -webkit-text-stroke-color: black; }

I have checked that yes I remove those properties (-webkit *), they are exported correctly, even without importing the fonts to the document.

Is there any way I can interpret those properties?

Thank you!

Hello,
I found a solution.
Before the addHTML function, delete the properties (-webkit *), and add the following CSS

color: white !important; text-shadow: 0px 0px 1px #000, 0px 0px 1px #000, 0px 0px 1px #000, 0px 0px 1px #000;

Thanks for everything!

In my case the output is as below.
The user icon in HTML is not rendered as it should be in PDF preview on right.

@havenchyk great news !
@neerajbhatt29 check the addFont functionality

Hi @buenjybar
I have added the font but still the output is same.
My code snippet

<script>           
	var pdf = new jsPDF('p', 'pt', 'letter');
	pdf.addFont('FontAwesome', 'FontAwesome', 'normal');
	pdf.setFont('FontAwesome');
	var canvas = pdf.canvas;
	var width = 600;
	document.body.style.width=width + "px";
	html2canvas(document.body, {
	    canvas:canvas,
	    onrendered: function(canvas) {
	        var iframe = document.createElement('iframe');
	        iframe.setAttribute('style', 'position:absolute;top:0;right:0;height:100%; width:600px');
	        document.body.appendChild(iframe);
	        iframe.src = pdf.output('datauristring');
	    }
	});
</script>

I also tried to add FontAwsome ttf font like @viktordart did but it didn't work.

pdf.addFont('/fonts/awesome/fontawesome-webfont.ttf', 'FontAwesome', 'normal', 'StandardEncoding');
pdf.setFont('FontAwesome');

Hi,

Right now i am working on integrating Fonts into the pdf file, the things is UTF-8 is not a recognized standard for PDF , so even if your font is embedded inside your PDF, you cannot call it using utf-8 encoded character.

I will PR really soon and link it to this message.

#1364

@neerajbhatt29 Did you found solution for including font?

May I ask till now, is there a way to support FortAwesome in jsPdf?

I'm still unable to get this to work with the inclusion of the new addFont features.

    const doc = new jsPDF({ orientation: pdfState?.orientation });
    await doc.addFileToVFS('fontawesome-webfont-normal.ttf', font); //font is the base64 encored font
    await doc.addFont('fontawesome-webfont-normal.ttf', 'fontawesome-webfont', 'normal');
    await doc.setFont('fontawesome-webfont', 'normal');
    await doc.html(content, {
      html2canvas: { scale: pdfState?.scale },
      margin: pdfState?.pageMargin,
      fontFaces: [
        {
          family: "fontawesome-webfont",
          style: "normal",
          src: [{
            url: font,
            format: "truetype"
          }],
        }
      ]
    });
    return doc;