Jspdf: Add external font

[abdullah9said]

how i can using external font in jspdf

[olsp]

+1

[jaredtmartin]

I'd also love this, the ability to embed external fonts.

[Abromeit]

+1 ( impossible to generate branded pdfs without that feature. i know it was on your todo-list [ https://github.com/MrRio/jsPDF/issues/32#issuecomment-8587980 ] but the code doesn't look like its done yet. seems like i really have to go back to serverside generation with my x-year old php-scripts -.-' )

[menzil]

+1

[diegoleme]

+1

[dominik0711]

+1

[fru]

+1

[mayarichman]

+1

[victorbucutea]

+1 here

[aphex13]

+1

[DanHanf]

+1, this would really be great to have.

[SebasAcevedo]

+1

[CodeBrauer]

:+1:

[JosuaStadelmaier]

+1

[morioust]

+1

[maybegeek]

+1

[abenevaut]

+1

[sanderboom]

+1

[dominik0711]

+1

[lanegoolsby]

+1

[inbonk]

+1

[ghost]

+1, would really like to see this. Is there a current workaround?

[LightAir]

+1

[wubobuaa]

+1

[helizabethwhite]

+1

[rebelholic]

How about with solution below?
http://stackoverflow.com/questions/26908266/custom-font-faces-in-jspdf

[donatsu]

@rebelholic Unfortunately it does not embed the fonts, so basically it's only good in the browser. Then if you open the pdf file through your file manager the font will disappear :(

[d668]

+1

[rokyed]

+1

[esthrim]

+1

[seleshmaster]

+1

[tholu]

+1

[josencv]

+1

[kuroky360]

+1

[FireVolkhov]

+1

[samowen62]

+1

[Dediggefedde]

Could this be implemented in a similar way pdfmake is doing it?
First you seem to need a .ttf font file, which you convert into a base64 data-string, which gets packed into a string and somehow converted into a font inside the .pdf document (I think that's the FontWrapper object called from the PDFPrinter object)...

In the end, you get chunks like

12 0 obj
<<
/Length 3648
/Length1 3648
>>
stream
[... font file data in binary]
endstream
endobj
13 0 obj
<<
/Type /FontDescriptor
/FontName /AAAAAA+Roboto-Regular
/FontFile2 12 0 R
/FontBBox [-681 -271 1182 1048]
/Flags 32
/StemV 0
/ItalicAngle 0
/Ascent 928
/Descent -244
/CapHeight 1456
/XHeight 1082
>>
endobj
7 0 obj
<<
/Type /Font
/BaseFont /AAAAAA+Roboto-Regular
/Subtype /TrueType
/FontDescriptor 13 0 R
/FirstChar 33
/LastChar 57
/Widths [676 248 527 521 248 318 566 597 501 248 548 566 598 876 276 501 566 343 566 349 611 566 566 529 566]
/Encoding /MacRomanEncoding
/ToUnicode 14 0 R
>>
endobj

Where the first obj (12) is the file, the second (13) the descriptor that loads (12) and the third (7) that loads the desciptor (13). the Widths in (7) are the widths of each character as far as I know...

[liadb]

+1

[yuanqijue]

+1

[askie]

+1

[weslly99]

+1

[emilio93]

Hi!
I am pretty new to github(the collaboration part anyway), but I would really like to see this feature on jsPDF, so I would be interested in helping.

Here is what I have found/done:

• plugins/standard_fonts_metrics.js inserts the fonts metrics(i.e. the kerning data and the width of the chars) into somewhere, what it does is API.events.push('addFont', function(font){uses the data mentioned}).
• The width and kerning data are obtained from an afm file normally, but on the script of previous point, this data is compressed(with a base16 compression algo) and then written into the code as is, within a decompress method, so what you end up is an object with 2 objects, one is kerningand the other one is widths.
• There is currently 14 fonts, the 14 standard ones.
• I have found more afm's, which can be parsed to json and compressed(or simply use the json). I am currently here, as I can't correctly compress the parsed json.
• My supposition is that by adding the compressed data into the script, and then adding the font on the jspdf.js file I should be able to actually embed the font into the file.

So if anyone has any extra info about this I would greatly appreciate.
Also, am I missing something on my approach? Something I am not considering?

I did a test with verdana and when I opened the file on acrobat it says

The font 'Verdana' contains a bad /BBox
And shows a sans font type(helvetica I think)

I am aware of at least one ttf(or any true type if I recall correctly) to afm converter, however I am not yet interested on putting any ttf.

Given my approach, It would still be impossible to embed google fonts as there doesn't seem to be afm files available for those fonts, am I right?

EDIT:
my mistake, jsPDF supports 12 fontTypes, but there are 2 commented types :D

[Dediggefedde]

I read up a bit about BBox Errors... apparently this can be caused e.g. by declaring a wrong font-type (truetype, opentype, postscript etc.) or by having a faulty BBox table... Maybe you still need to provide a /Widths object with the _correct_ widths... My guess is there is a problem with a width or the amount of widths that pdf readers have problems with... Especial Adobe seems to give this kind of warning while other readers silently exchange faulty fonts...

About google's ttf-fonts: can't you download them and put them into something like FontForge to generate .afm files?

[bsotodo]

come one men, we need this
+1

[rrroberto]

+1

[multivisions]

+1

[Undistraction]

+1

[grundlag]

+1

[kadusalles]

+1

[holtermonster]

+1

[angeagu]

+1

[MrLesion]

+1

[rokyed]

+2

[devmount]

+1

[subhamk79]

I changed a .ttf file in online converter .afm, but I can't find widths and kerning.
I found StartKernData
StartKernPairs 6745
So how I embed font in plugins/standard_fonts_metrics.js ??
Please help me and tell me detailed process

[subhamk79]

I have special font, but I can't embed in jsPDF.
I write
API.addFont = function(postScriptName, fontName, fontStyle) {
addFont(postScriptName, fontName, fontStyle, 'StandardEncoding');
};
this code under public API in debug.jspdf.js and jspdf.js both,
still it come default times font

[LukyVj]

+1

[tavurth]

+1

http://stackoverflow.com/questions/26908266/custom-font-faces-in-jspdf

[sphilee]

https://github.com/sphilee/jsPDF-CustomFonts-support

[mediaotg]

+1

[chrihech]

+1

[ThibaultJanBeyer]

+1 to have it in maincode

[Uzlopak]

Wil be part of #12