Custom fonts break PDFs when viewed in Adobe Reader

[makranczizoltan]

Description When using (some?) custom fonts, the contents of the PDF file will not show up at all when viewed in Adobe Reader. I know this sounds like a possible issue with the library you use for rendering fonts, but I thought it's best to start here.

To Reproduce I've created this minimalistic example:

import {
  Font,
  Page,
  Text,
  Document,
  pdf,
  StyleSheet,
  View
} from '@react-pdf/renderer';

import bodoniModa from '@fontsource/bodoni-moda/files/bodoni-moda-latin-400-normal.woff';
import lato from '@fontsource/lato/files/lato-latin-400-normal.woff';
import sourceSansPro from '@fontsource/source-sans-pro/files/source-sans-pro-cyrillic-400-normal.woff';

const OUT_DIR = `${import.meta.dir}/../out`;

Font.register({ family: 'Bodoni Moda', src: bodoniModa });
Font.register({ family: 'Lato', src: lato });
Font.register({ family: 'Source Sans Pro', src: sourceSansPro });

const styles = StyleSheet.create({
  section: {
    margin: '16px'
  },
  bodoniModa: {
    fontFamily: 'Bodoni Moda'
  },
  lato: {
    fontFamily: 'Lato'
  },
  sourceSansPro: {
    fontFamily: 'Source Sans Pro'
  },
  helvetica: {
    fontFamily: 'Helvetica'
  }
});

const text =
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed leo ornare, finibus nisi sit amet, egestas enim. Proin posuere augue ut turpis sodales, eget eleifend lectus consectetur.';

const Doc = () => (
  <Document>
    <Page size="A4">
      <View style={styles.section}>
        <View style={styles.helvetica}>
          <Text>Helvetica</Text>
          <Text>{text}</Text>
        </View>
      </View>
      <View style={styles.section}>
        <View style={styles.bodoniModa}>
          <Text>Bodoni Moda</Text>
          <Text>{text}</Text>
        </View>
      </View>
      <View style={styles.section}>
        <View style={styles.lato}>
          <Text>Lato</Text>
          <Text>{text}</Text>
        </View>
      </View>

      <View style={styles.section}>
        <View style={styles.sourceSansPro}>
          <Text>Source Sans Pro</Text>
          <Text>{text}</Text>
        </View>
      </View>
      <View style={styles.section}>
        <View style={styles.helvetica}>
          <Text>Helvetica</Text>
          <Text>{text}</Text>
        </View>
      </View>
    </Page>
  </Document>
);

const generateDoc = async () => {
  return pdf(<Doc />).toBlob();
};

const blob = await generateDoc();

Bun.write(`${OUT_DIR}/${new Date().toISOString()}.pdf`, blob);

Expected behavior I'd expect all the content showing up, with the correct font families in Adobe Reader as well, just like it happens in every other tool I used (mostly browsers and Preview on mac os). What actually happens is that anything after the 3rd party font is omitted (visually, at least), and I sometimes get an error from Adobe (attached below).

Screenshots On the left, you'll see the file opened in the built-in Preview app, on the right, opened in Adobe Reader.

Desktop (please complete the following information):

• OS: Adobe Reader on both MacOS (v 2023.006.20360) and Windows (v 2023.006.20320)
• React-pdf version 3.1.13

Thank you in advance!

[af]

Have you tried your test case in node, instead of bun?

I've been playing with react-pdf and bun as well, and the custom fonts that work fine when I build my document via node, don't work using bun (1.0.11). Everything else about the document seems to work fine and there are no errors 🤷

[makranczizoltan]

Hey, No, not yet, but I'll try to give it a shot when I'll have the chance.

Based on your experiences, it seems that just switching to node from bun is promising!

Thank you

[ttmx]

I had the same issue. It was fixed by using node instead of Bun. Sad since bun does jsx transpilation on the fly and is much nicer for this usecase than node.

[ttmx]

It would be nice if react-pdf devs could attempt to reproduce and understand where it went wrong, as pdfs are hard to debug for people that do not know the insides of the lib and of the pdf format. This would make it easier for Bun to ship a fix :)

[af]

Found where the bug is occurring and wrote it up here: https://github.com/oven-sh/bun/issues/8645#issuecomment-2002526639

I'm sure there is a much better solution than the hacky workaround there, I'm willing to put the workaround up as a PR though if nobody can think of one. Maybe the bun devs can find a way to resolve it on their end.

This font embedding problem the only issue I've run into with Bun and react-pdf, otherwise it's been a great combo so I'd love to have this resolved.