React pdf-renderer does not display characters č, ć and đ

Question

I'm using @react-pdf/renderer version "1.6.8". However, am unable to get the following characters: čćđ. Instead get empty spaces.

The characters are from the Croatian language and can be tested on their official page.

https://react-pdf.org/repl?example=page-wrap

Might someone know what to setup or how to approach the problem. Haven't found anything on their official docs.

Github issue: https://github.com/diegomura/react-pdf/issues/780

Answer 1

Try this

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

// Register Font
Font.register({
  family: "Roboto",
  src:
    "https://cdnjs.cloudflare.com/ajax/libs/ink/3.1.10/fonts/Roboto/roboto-light-webfont.ttf"
});

// Create style with font-family
const styles = StyleSheet.create({
  page: {
    fontFamily: "Roboto"
  },
});

const MyDocument = () => (

    <Document > 
      <Page size="A4" style={styles.page} > <!--Add Font style to the page-->
          <Text >Some text čćđ</Text>
      </Page>
    </Document>
  )

it works for me, for the Polish language

Answer 2

Just imported custom fonts like this and it worked for me:

import font from '/styles/localFonts/Poppins-Medium.ttf

Font.register({ family: 'Poppins', src: font })

Answer 3

If you want to add several font weights then use this approach:

import { Font } from "@react-pdf/renderer"

Font.register({
  family: "Roboto",
  fonts: [
    { src: "https://cdnjs.cloudflare.com/ajax/libs/ink/3.1.10/fonts/Roboto/roboto-light-webfont.ttf", fontWeight: 300 },
    { src: "https://cdnjs.cloudflare.com/ajax/libs/ink/3.1.10/fonts/Roboto/roboto-regular-webfont.ttf", fontWeight: 400 },
    { src: "https://cdnjs.cloudflare.com/ajax/libs/ink/3.1.10/fonts/Roboto/roboto-medium-webfont.ttf", fontWeight: 500 },
    { src: "https://cdnjs.cloudflare.com/ajax/libs/ink/3.1.10/fonts/Roboto/roboto-bold-webfont.ttf", fontWeight: 600 },
  ],
})

const styles = StyleSheet.create({
  page: {
    fontFamily: "Roboto",
    backgroundColor: "#ffffff",
    padding: 24,
  }
})