4 ms·
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 wei
by 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.