Local font is not rendering in React Native App

What were you trying to do?

I am trying to add a dowload font from google font ( a ttf file ) to my pdf in React Native. The pdf is a acrobat pdf form, so each field has different fonts and we want to add a custom font.

How did you attempt to do it?

export const fillFormFields = async (pdfDoc, formData) => { // Add custom font. This is working but the pdfDoc.embedFont is not working // const comicSansFont = await RNFS.readFileAssets('fonts/LDFComicSansBold.ttf', 'base64')

const formFields = pdfDoc.getForm().getFields()

pdfDoc.registerFontkit(fontkit)

const [fontTimesBoldItalic, fontHelveticaOblique, fontCourierOblique] = await Promise.all([ pdfDoc.embedFont(StandardFonts.TimesRomanBoldItalic), pdfDoc.embedFont(StandardFonts.HelveticaOblique), pdfDoc.embedFont(StandardFonts.CourierOblique), // Here is where it should embed the local font or the dowloaded font but is not working // pdfDoc.embedFont(comicSansFont), ])

formFields.forEach(async (field) => { const type = field.constructor.name const name = field.getName() const parts = fieldNameTokenizer(name)

if (type === 'PDFTextField') {
  const valueParts = parts.map((part, i) =>
    part === '' || part === ',' ? formData[parts[i + 1]] : formData[part],
  )
  const value = valueParts.filter(Boolean).join(' ')

  field.setFontSize(20)
  field.setText(value.trim())

  for (const part of parts) {
    switch (part) {
      case 'first_name':
      case 'last_name':
        field.updateAppearances(fontTimesBoldItalic)
        break
      case 'company':
        field.updateAppearances(fontHelveticaOblique)
        break
      case 'city':
        field.updateAppearances(fontCourierOblique)
        break
    }
  }
}

})

pdfDoc.getForm().flatten() return pdfDoc }

What actually happened?

The embedFont is not embed the dowloaded font.

What did you expect to happen?

It should embed the new font, the local font

How can we reproduce the issue?

const formFields = pdfDoc.getForm().getFields()

pdfDoc.registerFontkit(fontkit)

formFields.forEach(async (field) => { const type = field.constructor.name const name = field.getName() const parts = fieldNameTokenizer(name)

if (type === 'PDFTextField') {
  const valueParts = parts.map((part, i) =>
    part === '' || part === ',' ? formData[parts[i + 1]] : formData[part],
  )
  const value = valueParts.filter(Boolean).join(' ')

  field.setFontSize(20)
  field.setText(value.trim())

  for (const part of parts) {
    switch (part) {
      case 'first_name':
      case 'last_name':
        field.updateAppearances(fontTimesBoldItalic)
        break
      case 'company':
        field.updateAppearances(fontHelveticaOblique)
        break
      case 'city':
        field.updateAppearances(fontCourierOblique)
        break
    }
  }
}

})

pdfDoc.getForm().flatten() return pdfDoc }

Version

^1.17.1

What environment are you running pdf-lib in?

React Native

Checklist

[X] My report includes a Short, Self Contained, Correct (Compilable) Example.
[X] I have attached all PDFs, images, and other files needed to run my SSCCE.

Additional Notes

What am i doing wrong? The font file ( tff ) shoudl be read with readFileAsset ? in base64?

Hopding / pdf-lib