Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PdfViewer render blank screen when korean font applied #2681

Closed
AMATEURTOSS opened this issue Mar 18, 2024 · 1 comment
Closed

PdfViewer render blank screen when korean font applied #2681

AMATEURTOSS opened this issue Mar 18, 2024 · 1 comment

Comments

@AMATEURTOSS
Copy link

AMATEURTOSS commented Mar 18, 2024

Describe the bug
PdfViewer render blank screen when korean font applied

To Reproduce

  1. create nextjs project with create-next-app
  2. install @react-pdf/renderer
  3. add korean font Font.register({ family: "Nanum Gothic", src: "https://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.ttf", })

bug reproduce repository: https://github.com/AMATEURTOSS/react-pdf-bug

Expected behavior
Render korean

Desktop:

  • OS: macos
  • Browser safari, chrome both
  • React-pdf version 3.4.0

Code

'use client'

import { PDFViewer, Font, Document, Page, Text } from '@react-pdf/renderer'
import dynamic from 'next/dynamic'

Font.register({ family: 'Nanum Gothic', src: 'https://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.ttf' })

function Home() {
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <PDFViewer width='100%' height='100%'>
        <Document>
          <Page size='A4' style={{
            paddingTop: 35,
            paddingBottom: 65,
            paddingHorizontal: 35,
          }}>
            <Text style={{
              margin: 12,
              fontSize: 14,
              textAlign: 'justify',
              fontFamily: 'Nanum Gothic' // when remove this line, its work!
            }}>
              안녕하세요 (Korean)
            </Text>
          </Page>
        </Document>
      </PDFViewer>
    </div>
  )
}

export default dynamic(() => Promise.resolve(Home), { ssr: false })

Maybe related PR

#2302

@AMATEURTOSS
Copy link
Author

AMATEURTOSS commented Mar 19, 2024

problem solved
check below

#2675 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant