diegomura / diegomura/react-pdf

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

Open
#2,818 4 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
16.8k
Forks
1.3k
Avg merge
5h 6m
Merged PRs (30d)
52

Description

### **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 `` 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.

image

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:
image

Project structure
image

### **Desktop:**

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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.