feat(PDF): Adding support for custom fonts.

Author: gedinakova

CHANGELOG.md

@@ -2,6 +2,24 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+# 21.1.0
+
+## New Features
+
+### PDF Exporter
+- **Custom Font Support for CJK and Arabic Scripts**: Added pre-configured font constants for easy PDF export with non-Latin character support:
+  - `NOTO_SANS_FONT` - Supports Latin, Cyrillic, and Greek characters
+  - `NOTO_SANS_CJK_FONT` - Supports Chinese, Japanese, and Korean characters (CJK)
+  - `NOTO_SANS_ARABIC_FONT` - Supports Arabic script and related languages
+  
+  These fonts can be imported from `igniteui-angular/grids/core` and used with `IgxPdfExporterOptions.customFont`:
+  
+  ```typescript
+  import { NOTO_SANS_CJK_FONT } from 'igniteui-angular/grids/core';
+  
+  const options = new IgxPdfExporterOptions('Export');
+  options.customFont = NOTO_SANS_CJK_FONT;
+
 ## 21.0.0
 
 ### New Features

projects/igniteui-angular/grids/core/src/public_api.ts

@@ -125,6 +125,7 @@ export * from './services/excel/excel-exporter';
 export * from './services/excel/excel-exporter-options';
 export * from './services/pdf/pdf-exporter';
 export * from './services/pdf/pdf-exporter-options';
+export * from './services/pdf/fonts/noto-fonts';
 
 /*
 

projects/igniteui-angular/grids/core/src/services/pdf/fonts/noto-fonts.ts

@@ -0,0 +1,54 @@
+import { NOTO_SANS_BASE64, NOTO_SANS_BOLD_BASE64 } from './noto-sans';
+import { NOTO_SANS_ARABIC_BASE64, NOTO_SANS_ARABIC_BOLD_BASE64 } from './noto-sans-arabic';
+import { NOTO_SANS_CJK_BASE64, NOTO_SANS_CJK_BOLD_BASE64 } from './noto-sans-cjk';
+
+/**
+ * Pre-configured Noto Sans font for PDF exports
+ * Supports Latin, Cyrillic, Greek, and extended Latin characters
+ *
+ * @example
+ * ```typescript
+ * import { NOTO_SANS_FONT } from 'igniteui-angular/pdf-fonts';
+ *
+ * const options = new IgxPdfExporterOptions('Export');
+ * options.customFont = NOTO_SANS_FONT;
+ * ```
+ *
+ * @publicApi
+ */
+export const NOTO_SANS_FONT = {
+    data: NOTO_SANS_BASE64,
+    name: 'NotoSans',
+    bold: {
+        data: NOTO_SANS_BOLD_BASE64,
+        name: 'NotoSans-Bold'
+    }
+};
+
+/**
+ * Pre-configured Noto Sans CJK font for PDF exports
+ *
+ * @publicApi
+ */
+export const NOTO_SANS_CJK_FONT = {
+    data: NOTO_SANS_CJK_BASE64,
+    name: 'NotoSansCJK',
+    bold: {
+        data: NOTO_SANS_CJK_BOLD_BASE64,
+        name: 'NotoSansCJK-Bold'
+    }
+};
+
+/**
+ * Pre-configured Noto Sans Arabic font for PDF exports
+ *
+ * @publicApi
+ */
+export const NOTO_SANS_ARABIC_FONT = {
+    data: NOTO_SANS_ARABIC_BASE64,
+    name: 'NotoSansArabic',
+    bold: {
+        data: NOTO_SANS_ARABIC_BOLD_BASE64,
+        name: 'NotoSansCJK-Bold'
+    }
+};

projects/igniteui-angular/grids/core/src/services/pdf/fonts/noto-sans-arabic.json

@@ -0,0 +1,39 @@
+import fontData from './noto-sans-arabic.json'
+/**
+ * Base64-encoded Noto Sans Arabic font data (Regular weight).
+ *
+ * This font provides comprehensive support for Arabic script and related languages,
+ * including Arabic, Persian/Farsi, Urdu, Pashto, and Kurdish (Sorani).
+ *
+ * @remarks
+ * This constant is used with `IgxPdfExporterOptions.customFont` to enable
+ * Arabic and related right-to-left (RTL) scripts in exported PDF documents.
+ *
+ * The font uses the SIL Open Font License 1.1.
+ * Source: https://fonts.google.com/noto/specimen/Noto+Sans+Arabic
+ *
+ * @example
+ * ```typescript
+ * const options = new IgxPdfExporterOptions('MyExport');
+ * options.customFont = {
+ *   name: 'Noto Sans Arabic',
+ *   data: NOTO_SANS_ARABIC_BASE64,
+ *   bold: { data: NOTO_SANS_ARABIC_BOLD_BASE64 }
+ * };
+ * ```
+ */
+export const NOTO_SANS_ARABIC_BASE64 = fontData.normal;
+
+/**
+ * Base64-encoded Noto Sans Arabic Bold font data.
+ *
+ * This is the bold variant of the Noto Sans Arabic font, used for headers and emphasized text
+ * in PDF exports with Arabic script support.
+ *
+ * @remarks
+ * Pair this with `NOTO_SANS_ARABIC_BASE64` in the `IgxPdfExporterOptions.customFont.bold` property
+ * to ensure consistent rendering of both regular and bold Arabic text.
+ *
+ * @see NOTO_SANS_ARABIC_BASE64
+ */
+export const NOTO_SANS_ARABIC_BOLD_BASE64 = fontData.bold;

projects/igniteui-angular/grids/core/src/services/pdf/fonts/noto-sans-arabic.ts

@@ -0,0 +1,46 @@
+import fontData from './noto-sans-cjk.json';
+
+/**
+ * Base64-encoded Noto Sans CJK font data (Regular weight).
+ *
+ * This font provides comprehensive support for CJK (Chinese, Japanese, Korean) characters,
+ * including Hiragana, Katakana, Kanji, Hangul, and CJK Unified Ideographs, as well as
+ * Latin, Cyrillic, and Greek scripts.
+ *
+ * @remarks
+ * This is a large font file (~15-25MB when Base64-encoded). Consider loading it
+ * asynchronously or on-demand to avoid impacting initial application load time.
+ *
+ * The font uses the SIL Open Font License 1.1.
+ * Source: https://fonts.google.com/noto/specimen/Noto+Sans+JP
+ *
+ * This constant is used with `IgxPdfExporterOptions.customFont` to enable
+ * CJK characters in exported PDF documents.
+ *
+ * @example
+ * ```typescript
+ * const options = new IgxPdfExporterOptions('MyExport');
+ * options.customFont = {
+ *   name: 'Noto Sans CJK',
+ *   data: NOTO_SANS_CJK_BASE64,
+ *   bold: { data: NOTO_SANS_CJK_BOLD_BASE64 }
+ * };
+ * ```
+ */
+export const NOTO_SANS_CJK_BASE64 = (fontData as any).normal;
+
+/**
+ * Base64-encoded Noto Sans CJK Bold font data.
+ *
+ * This is the bold variant of the Noto Sans CJK font, used for headers and emphasized text
+ * in PDF exports with CJK character support.
+ *
+ * @remarks
+ * Pair this with `NOTO_SANS_CJK_BASE64` in the `IgxPdfExporterOptions.customFont.bold` property
+ * to ensure consistent rendering of both regular and bold CJK text.
+ *
+ * Like the regular weight, this is a large font file that may impact bundle size.
+ *
+ * @see NOTO_SANS_CJK_BASE64
+ */
+export const NOTO_SANS_CJK_BOLD_BASE64 = (fontData as any).bold;

projects/igniteui-angular/grids/core/src/services/pdf/fonts/noto-sans-cjk.json

@@ -0,0 +1,38 @@
+import fontData from './noto-sans.json';
+
+/**
+ * Base64-encoded Noto Sans font data (Regular weight).
+ *
+ * This font provides extended Latin, Cyrillic, and Greek character support.
+ * For CJK (Chinese, Japanese, Korean) character support, use a CJK-specific font
+ * such as Noto Sans CJK or Arial Unicode MS.
+ *
+ * @remarks
+ * This constant is used with `IgxPdfExporterOptions.customFont` to enable
+ * non-Latin characters in exported PDF documents.
+ *
+ * @example
+ * ```typescript
+ * const options = new IgxPdfExporterOptions('MyExport');
+ * options.customFont = {
+ *   name: 'Noto Sans',
+ *   data: NOTO_SANS_BASE64,
+ *   bold: { data: NOTO_SANS_BOLD_BASE64 }
+ * };
+ * ```
+ */
+export const NOTO_SANS_BASE64 = fontData.normal;
+
+/**
+ * Base64-encoded Noto Sans Bold font data.
+ *
+ * This is the bold variant of the Noto Sans font, used for headers and emphasized text
+ * in PDF exports.
+ *
+ * @remarks
+ * Pair this with `NOTO_SANS_BASE64` in the `IgxPdfExporterOptions.customFont.bold` property
+ * to ensure consistent rendering of both regular and bold text.
+ *
+ * @see NOTO_SANS_BASE64
+ */
+export const NOTO_SANS_BOLD_BASE64 = fontData.bold;

projects/igniteui-angular/grids/core/src/services/pdf/fonts/noto-sans-cjk.ts

@@ -48,7 +48,41 @@ export class IgxPdfExporterOptions extends IgxExporterOptionsBase {
      */
     public fontSize = 10;
 
+     /**
+     * Custom font data for Unicode support (optional).
+     * If not provided, uses Helvetica (Latin characters only).
+     *
+     * @example
+     * ```typescript
+     * import { NOTO_SANS_FONT } from './fonts';
+     *
+     * const options = new IgxPdfExporterOptions('Export');
+     * options.customFont = {
+     *     data: NOTO_SANS_FONT,
+     *     name: 'NotoSans'
+     * };
+     * ```
+     */
+    public customFont?: PdfUnicodeFont;
+
     constructor(fileName: string) {
         super(fileName, '.pdf');
     }
 }
+
+/**
+ * Font configuration for PDF export
+ */
+export interface PdfUnicodeFont {
+    /** Base64-encoded font data */
+    data: string;
+    /** Font family name */
+    name: string;
+    /** Bold variant of the font (optional) */
+    bold?: {
+        /** Base64-encoded bold font data */
+        data: string;
+        /** Font family name (usually same as normal) */
+        name: string;
+    };
+}