diegomura / diegomura/react-pdf
Cannot render standard fonts locally (Vite, React, TS)
- 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.
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]
Contributor guide
Assessment
This issue has not been assessed yet.