diegomura / diegomura/react-pdf

Korean(or Unicode) character is not displayed correctly

Open
#1,837 0 comments 8 reactions 0 assignees View on GitHub
new feature
Dominant language
TypeScript
Stars
16.8k
Forks
1.3k
Avg merge
5h 6m
Merged PRs (30d)
52

Description

Korean(or Unicode) character is not displayed correctly in browser when <Document> is created before fonts are loaded.
Please check if fonts are loaded in react-pdf before <Document> is created.

**Code**
```
Font.register({ family: "NanumGothic", src: "https://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.ttf" });

const styles = StyleSheet.create({
body: {
fontSize: 30,
fontFamily: 'NanumGothic'
}
});

const MyDocument = () => (


한글 (Korean)


);

function App() {
return (

);
}
```
**Result**
![image](https://user-images.githubusercontent.com/8775150/170906243-9d26ed0e-01c0-43ca-b5d7-06880efc1fbb.png)

**Code 2**
If I check font before document creation everything works fine.
It would be great if react-pdf can do this without additional codes.
```
...

const useFont = (fontFamily: string) => {
const [loaded, setLoaded] = useState(false);
useEffect(() => {
(async () => {
await Font.load({fontFamily: fontFamily});
const timer = setInterval(() => {
if (Font.getFont({fontFamily: fontFamily})?.loading === false) {
clearInterval(timer);
setLoaded(true);
}
}, 100);
})();
}, []);
return loaded;
}

function App() {
const loaded = useFont("NanumGothic");
if (!loaded) return

Loading Fonts..

return (<>
{loaded &&


}
);

}
```
**Result 2**
![image](https://user-images.githubusercontent.com/8775150/170907052-42807da8-3b0a-416d-bf97-6d6783349000.png)

**Desktop (please complete the following information):**
- OS [MacOS]
- Browser [chrome]
- React-pdf version [v2.1.1]

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.