In this article, learn how to render Japanese characters with your Paid Memberships Pro PDF Invoices. PDFs only render text using fonts that are either embedded in the document or already installed on the system, which is why specifying a Unicode-compatible font like Noto Sans JP is essential for displaying Japanese characters correctly.
Why Noto Sans JP?
Noto Sans JP is part of Google’s Noto font family, designed to support all languages with a harmonious look and feel. The “Noto” name comes from the phrase “No Tofu,” referring to the blank rectangles (□) that appear when a font doesn’t support a character. This makes it an ideal choice for rendering Japanese text in PDFs.
The Challenge with PDF Generation
When generating PDFs from HTML, the rendering engine needs access to fonts that support the character sets you’re using. Standard web fonts often lack Japanese character support, leading to rendering issues. The solution involves:
- Properly loading the font in your HTML
- Ensuring the font is applied to all relevant elements
- Setting the correct character encoding
- Making the font accessible to your PDF generation tool
1. Include the Google Fonts Link
The first step is to include the Noto Sans JP font from Google Fonts in your HTML head section:
<link href="https://fonts.googleapis.com/css2?display=swap&family=Noto+Sans+JP:wght@300;400;700&display=swap" rel="stylesheet">This link provides three font weights (300 for light, 400 for regular, and 700 for bold), giving you flexibility in your typography while maintaining consistent Japanese character support.
2. Apply the Font Family Globally
To ensure all text uses the Noto Sans JP font, apply it broadly in your CSS:
html, div, p, table {
font-family: 'Noto Sans JP', sans-serif;
}This approach covers most HTML elements you’ll use in a typical document. The sans-serif fallback ensures that if Noto Sans JP fails to load, the browser will use another sans-serif font.
View the full working template of the default PDF template.
Conclusion
This article should help you understand how to change the font type for your PDF. You may use any font you wish from Google fonts or load from a custom path locally. If you need any assistance, please do not hesitate to reach out to our support staff as we’re more than happy to help.