Cannot render standard fonts locally (Vite, React, TS)

[mrjeanp]

Describe the bug

Standard fonts aren't being rendered using fontFamily on a Vite/React/TS project.

To Reproduce

1. Setup local environment.
2. Set fontFamily: "Times-Roman" on <Text /> component.

Attached screenshots show that loading the fonts from the public folder (with different name) works but directly referencing "Times-Roman" does not render the font. Using the REPL works though, am I missing something?.

Expected behavior To correctly render standard font that is pre-installed in the system.

👇 When I reference fontFamily: "Times-Roman", doesn't work.

The Code

```tsx import { Document, Font, Page, StyleSheet, Text, View, } from "@react-pdf/renderer"; import { FC } from "react"; import TimesNewRoman from './assets/Times-New-Roman.ttf'; Font.register({ family: "TimesNewRoman", format: "truetype", fonts: [ { // src: "/fonts/Times-New-Roman.ttf", src: TimesNewRoman, fontStyle: "normal", fontWeight: "normal", }, { src: "/fonts/Times-New-Roman-Italic.ttf", fontStyle: "italic", fontWeight: "normal", }, { src: "/fonts/Times-New-Roman-Bold.ttf", fontStyle: "normal", fontWeight: "bold", }, { src: "/fonts/Times-New-Roman-Bold-Italic.ttf", fontStyle: "italic", fontWeight: "bold", }, ], }); type MyDocumentProps = { cv?: Record; }; const CVDocument: FC = (props) => { const { cv } = props; return ( {"Loaded Times New Roman"} WTF? ); }; export default CVDocument; // Create styles const styles = StyleSheet.create({ page: { backgroundColor: "white", }, section: { margin: 10, padding: 10, flexGrow: 1, }, name: { fontSize: 32, fontFamily: "TimesNewRoman", }, }); ```

Main component:

Project structure

Desktop:

• OS: [MacOS]
• Browser [chrome]
• React-pdf version [^3.4.4]

[knuula]

I am having the same issue here. It is specifically popping up with elements that are inside of elements that are "inline-flex", "inline", or "inline-block"

[knuula]

some more context on this --- the non-standard fonts are rendering in some situations.

if the parent element is a "flex" for example, the non-standard font is rendering correctly.

if the parent element is a "inline-flex", the non-standard font will default to some basic font or not show up at all.

[mrjeanp]

I cloned the react-pdf-site repo and the REPL page has the same problem on a localhost. I don't understand why,

localhost:3000/repl

react-pdf.org/repl:

[mrjeanp]

Submitted a PR to fix this https://github.com/diegomura/react-pdf/pull/2827