[Fonts] Font family Times New Roman is not display, not work

[tnmhoang]

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

import Normal from "./Times_New_Roman.ttf";
import { useCallback, useEffect, useState } from "react";

const PDF = () => {
Font.clear();
Font.reset();
Font.register({
family: 'Times-New-Roman',
src: Normal
})

console.log('font register should have happened', Normal);
console.log('registered getRegisteredFontFamilies', Font.getRegisteredFontFamilies());
console.log('registered getRegisteredFonts', Font.getRegisteredFonts())

const [isFontLoaded, setIsFontLoaded] = useState(false);

const loadFonts = useCallback(async () => {
await Promise.all([
Font.load({ fontFamily: 'Times-New-Roman' }),
]);
setIsFontLoaded(true);
console.log(Font.getRegisteredFontFamilies());
console.log('fonts loaded');
}, []);

useEffect(() => {
loadFonts();
}, [loadFonts]);

if (!isFontLoaded) {
// tslint:disable-next-line:no-console
console.log('isFontLoaded is FALSE');
return (
<></>
);
}
return (

        <Text style={{ fontFamily: 'Times-New-Roman' }}>Trịnh Ngọc Minh Hoàng</Text>
      </View>
      <View style={styles.section}>
        <Text style={{ fontFamily: 'Times-New-Roman' }}>Section #2</Text>
      </View>
    </Page>
  </Document>
</PDFViewer>

)
}

export default PDF;

const styles = StyleSheet.create({
page: {
flexDirection: 'row',
backgroundColor: '#E4E4E4'
},
section: {
margin: 10,
padding: 10,
flexGrow: 1
},
txt: {
fontFamily: 'Times-New-Roman'
}
});