Unhandled Rejection (Error): Could not resolve font for undefined, fontWeight

Describe:

I try to import font for the page, firstly import with source font but got the error, then even I copy exactly what the example imported in the doc like this: Font.register({ family: 'Oswald', src: 'https://fonts.gstatic.com/s/oswald/v13/Y_TKV6o8WovbUd3m_X9aAA.ttf' });

But it still got the error once again

Code: Please help me have a look on this

const testData = {
    name:'Phan Nguyen Minh Kha',
    gender: 'MALE',
    groupName: 'TH1501',
    departureName: 'Cong nghe thong tin',
    birthday: '04/11/1997',
    ethenic: 'Kinh',
    religion: 'Tin Lanh',
    phone: '0938499460',
    email: '[e-mail]',
    positions: 'Doan vien',
    camTinhDang: true,
    decisionNumber: '1312311111',
    decisionNumberDate: '2/9/2019',
    issuePlace: 'Binh Thuan',
    signer: 'Anh Kha',
    position: 'Aloooo',
    fee: 25000
}


   const getGender = gender => {
        if (gender === 'MALE')
            return 'Name'
        return 'Nữ'
    }

    const ReceiptTemplate = ({academicYear, ...props}) => {

    return (
        <Document>
            <Page size="A4" style={styles.page}>
                <View style={styles.header}>
                    <View>
                        <Text>THÀNH ĐOÀN TP.HỒ CHÍ MINH</Text> 
                        <Text style={styles.bold}>BCH ĐOÀN TRƯỜNG ĐẠI HỌC</Text>
                        <Text style={styles.bold}>NGOẠI NGỮ - TIN HỌC TP.HỒ CHÍ MINH</Text>
                        <Text />
                        <Text>--------</Text>
                    </View>
                    <View style={{textAlign: 'center'}}>
                        <Text style={styles.underline}>ĐOÀN TNCS HỒ CHÍ MINH</Text>
                    </View>
                </View>
                <View style={styles.numberAndDate}>
                    <Text>Số:             /GXN-ĐTN</Text>
                    <View style={{textAlign: 'center'}}>
                        <Text style={styles.italic}>{`TP.Hồ Chí Minh, ngày ${new Date().getDay()} tháng ${new Date().getMonth()} năm ${academicYear}`}</Text>
                    </View>
                </View>
                <Text style={styles.title}>
                    {`GIẤY XÁC NHẬN TIẾP NHẬN CHUYỂN SINH HỌA ĐOÀN (KHÓA ${academicYear})`}
                </Text>
                <Text style={styles.alignCenter}>Ban Thường vụ Đoàn trường Đại học Ngoại ngữ - Tin học TP. Hồ Chí Minh xác nhận:</Text>
                <Text>Đồng chí: {testData.name}. Giới tính: {getGender(testData.gender)}. Lớp: {testData.groupName}. Khoa: {testData.departureName}</Text>
                <Text>Sinh ngày: {testData.birthday}. Tại: {testData.placeOfBirth}. Dân tộc: {testData.ethenic}. Tôn giáo: {testData.religion}</Text>
                <Text>Điện thoại: {testData.phone}. Email: {testData.email}. {testData.camTinhDang ? 'Cảm tình đảng' : 'Đảng viên'}</Text>
                {testData.positions && <Text>{testData.positions}</Text>}
                <Text>Đã chuyển hồ sơ đoàn (Sổ đoàn) về sinh hoạt tại Đoàn trường Đại học Ngoại ngữ - Tin học TP.HCM.</Text>
                <Text>(Số nghị quyết kết nạp: {testData.decisionNumber}. Ngày ký: {testData.decisionNumberDate}. Nơi cấp: {testData.issuePlace}</Text>
                <Text>Người ký: {testData.signer}. Chức vụ: {testData.position}</Text>
                <Text>Đã đóng: <Text style={styles.bold}>{testData.fee} đồng</Text> (Bao gồm: Đoàn phí từ tháng: <Text style={styles.bold}>09/2016</Text> đến tháng: <Text style={styles.bold}>09/2017</Text>
                : {testData.fee - 1} đồng, Quản lý thông tin: 1000 đồng
                </Text>
                <Text>(<Text style={styles.bold}>Ghi chú:</Text>Trình giấy xác nhận này cho Bí thư Chi đoàn để bổ sung vào danh sách Đoàn viên của Chi đoàn, sau đó giữ lại. 
                    <Text style={styles.boldUnderline}>Giấy có giá trị trong suốt khóa học tại trường. Khi khóa học kết thúc, đoàn viên phải chuyển sinh họat đoàn trong vòng 6 tháng)</Text>
                </Text>
                <View style={styles.header}>
                    <View style={styles.alignCenter}>
                        <Text style={styles.bold}>Người nhận</Text>
                    </View>
                    <View style={styles.alignCenter}>
                        <Text style={styles.bold}>TM.BAN THƯỜNG VỤ ĐOÀN TRƯỜNG</Text>
                        <Text>BÍ THƯ</Text>
                    </View>
                </View>
            </Page>
        </Document>
    )
}

// Create styles
const styles = StyleSheet.create({
    page: {
      paddingVertical: 45,
      paddingHorizontal: 35,
      fontSize: 14,
    //   fontFamily: 'Open Sans',
      fontFamily: 'Oswald',
    //   fontFamily: 'Oswad'
    },
    header: {
    //   display: 'flex',
    //   justifyContent: 'space-between',
    //   width: '100%',
        flex: 1,
        flexDirection: 'row',
    },
    numberAndDate: {
        flex: 1,
        flexDirection: 'row'
    },
    title: {
        fontSize: 25,
        fontWeight: 'bold',
    },
    bold: {
        fontWeight: 'bold'
    },
    italic: {
        fontStyle: 'italic',
    },
    underline: {
        textDecoration: 'underline'
    },
    alignCenter: {
        textAlign: 'center'
    },
    boldUnderline: {
        fontWeight: 'bold',
        textDecoration: 'underline'
    }
  });

Font.register({
  family: 'Oswald',
  src: 'https://fonts.gstatic.com/s/oswald/v13/Y_TKV6o8WovbUd3m_X9aAA.ttf'
});

ReactPDF.render(<ReceiptTemplate academicYear={2019} />);

Can see the error after running this T_T : Unhandled Rejection (Error): Could not resolve font for undefined, fontWeight 400

Have anyone experienced that issue? Pls advise me.

[jnguyen10]

Since you’re asking for variants of the font-family, it looks like you’ll need to declare a font for each variant.

Font.register({ family: 'Oswald', fonts: [
 { src: 'https://fonts.gstatic.com/s/oswald/v13/Y_TKV6o8WovbUd3m_X9aAA.ttf' }, // font-style: normal, font-weight: normal
 { src: '<italics_oswald_source>', fontStyle: 'italic' },
 { src: '<bold_oswald_source>'', fontWeight: 'bold' },
]});

Ref: https://react-pdf.org/fonts#register Ref: https://stackoverflow.com/questions/60705386/styles-in-react-pdf-showing-abnormal-behaviour

[mariusc23]

@ryancarville I ran into the same issue. It was fixed in #996, just need a new version to be published.