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

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<string, any>;
};
const CVDocument: FC<MyDocumentProps> = (props) => {
  const { cv } = props;

  return (
    <Document>
      <Page size="A4" style={styles.page}>
        <View
          style={{
            textAlign: "center",
            paddingVertical: 24,
          }}
        >
          <Text
            style={{
              fontSize: 32,
              fontFamily: "TimesNewRoman",
            }}
          >
            {"Loaded Times New Roman"}
          </Text>
        </View>
        <View style={styles.section}>
          <Text style={{ fontFamily: "Times-Roman" }}>WTF?</Text>
        </View>
      </Page>
    </Document>
  );
};

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 #2827