3 ms·

Can you point me to something that explains how to do what you did (embedding the base64 of the font TTF)? I'm wondering how I can make a PDF of a webpage use t

Can you point me to something that explains how to do what you did (embedding the base64 of the font TTF)? I'm wondering how I can make a PDF of a webpage use the same font I used on the webpage. Edit: Never mind. I found the instructions on one of your links: https://github.com/MrRio/jsPDF#use-of-unicode-characters--utf-8 https://github.com/MrRio/jsPDF#use-of-unicode-characters--ut...

busymom0 6y ago
In case you are still stuck, here's what I do. If you have questions about this, email me using the "Send Feedback" from my site. I serve the base64 of each weight and style (normal, normal italic, bold, bold italic) inside a JSON. Here's one example of the JSON I serve for the Open Sans family: https://resumetopdf.com/fonts/OpenSans.json https://resumetopdf.com/fonts/OpenSans.json And here's me embedding it and making it available to jsPDF. NOTE the font.replaceAll to remove white spaces from the font name when embedding. jsPDF has this bug (or maybe expected behavior where it can't handle white spaces in the font name): var fontBase64 = {} const doc = new jspdf.jsPDF({ orientation: 'p', unit: 'mm', format: currentresume.size, putOnlyUsedFonts: true, }) const fontsToEmbed = [currentresume.headingfont, currentresume.bodyfont]; for (font of fontsToEmbed) { const fontName = font.replaceAll(' ', '') if (!doesExist(fontBase64[fontName])) { let response = await fetch(`https://resumetopdf.com/fonts/${fontName}.json`) let data = await response.json() fontBase64[fontName] = data } Object.keys(fontBase64[fontName]).forEach(style => { doc.addFileToVFS(`${fontName}-${style}.ttf`, fontBase64[fontName][style]) doc.addFont(`${fontName}-${style}.ttf`, fontName, style) }) } Once added to jsPDF, later on you can set the font and style, weight etc: doc.setFontSize(originalFontSizeInPt) doc.setFont(fontFamily, fontStyle) Also the JSON with base64 of font families is served over CloudFlare with an infinite cache - this prevents any costs on my end and also speeds up the user experience when they return to the page.

busymom0 6y ago

In case you are still stuck, here's what I do. If you have questions about this, email me using the "Send Feedback" from my site. I serve the base64 of each weight and style (normal, normal italic, bold, bold italic) inside a JSON. Here's one example of the JSON I serve for the Open Sans family: https://resumetopdf.com/fonts/OpenSans.json https://resumetopdf.com/fonts/OpenSans.json And here's me embedding it and making it available to jsPDF. NOTE the font.replaceAll to remove white spaces from the font name when embedding. jsPDF has this bug (or maybe expected behavior where it can't handle white spaces in the font name): var fontBase64 = {} const doc = new jspdf.jsPDF({ orientation: 'p', unit: 'mm', format: currentresume.size, putOnlyUsedFonts: true, }) const fontsToEmbed = [currentresume.headingfont, currentresume.bodyfont]; for (font of fontsToEmbed) { const fontName = font.replaceAll(' ', '') if (!doesExist(fontBase64[fontName])) { let response = await fetch(`https://resumetopdf.com/fonts/${fontName}.json`) let data = await response.json() fontBase64[fontName] = data } Object.keys(fontBase64[fontName]).forEach(style => { doc.addFileToVFS(`${fontName}-${style}.ttf`, fontBase64[fontName][style]) doc.addFont(`${fontName}-${style}.ttf`, fontName, style) }) } Once added to jsPDF, later on you can set the font and style, weight etc: doc.setFontSize(originalFontSizeInPt) doc.setFont(fontFamily, fontStyle) Also the JSON with base64 of font families is served over CloudFlare with an infinite cache - this prevents any costs on my end and also speeds up the user experience when they return to the page.