diegomura / react-pdf

📄 Create PDF files using React
https://react-pdf.org
MIT License
14.22k stars 1.11k forks source link

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

Open tnmhoang opened 1 month ago

tnmhoang commented 1 month ago

Screenshot 2024-04-12 at 08 53 40 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 (

Trịnh Ngọc Minh Hoàng Section #2

) }

export default PDF;

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