メインコンテンツまでスキップ

カスタムフォント

pdfmeはデフォルトでRoboto Regular 400フォントを使用していますが、お好きなフォントを使用することができます。

デザインを優先する場合は、お気に入りのフォントを使用できます。また、日本語や中国語などのデフォルトのRobotoフォントに含まれていない文字を使用している場合、PDFでは豆腐（Tofu）として表示されます。

この機能を使用して、これらの問題を解決することができます。

フォントタイプについて​

以下のように@pdfme/commonからインポートできます。

import type { Font } from '@pdfme/common';

フォントの型は以下の通りです。

type Font = {
  [fontName: string]: {
    data: string | Uint8Array | ArrayBuffer;
    fallback?: boolean;
    subset?: boolean;
  };
};
  • data: httpで始まるstringを登録すると、自動的にフェッチされます。または、Uint8Array | ArrayBufferのようなバイナリデータを直接設定します。
  • *fallback: trueに設定すると、fontNameが設定されていない場合に使用するフォントになります。フォントオブジェクトのうち1つだけをtrueに設定する必要があります。
  • *subset: デフォルトはtrueですが、フォント埋め込みをサブセットにしないようにfalseに設定できます。（この設定は、特定のフォントをサブセットで埋め込む際のfontkitのバグに対応するためのものです。）
const font: Font = {
  serif: {
    data: 'https://example.com/fonts/serif.ttf',
    fallback: true,
  },
  sans_serif: {
    data: 'https://example.com/fonts/sans_serif.ttf',
  },
};

フォントの設定方法​

ジェネレーターとUIパッケージでフォントを設定する方法を見てみましょう。

ジェネレーター​

generate関数のオプションとしてフォントを設定します。

import { Template, BLANK_PDF, Font } from '@pdfme/common';
import { generate } from '@pdfme/generator';

const font: Font = {
  serif: {
    data: 'https://example.com/fonts/serif.ttf',
    fallback: true,
  },
  sans_serif: {
    data: 'https://example.com/fonts/sans_serif.ttf',
  },
};
const template: Template = {
  basePdf: BLANK_PDF,
  schemas: [
    [
      {
        name: 'a',
        type: 'text',
        fontName: 'serif',
        position: { x: 0, y: 0 },
        width: 10,
        height: 10,
      },
      {
        name: 'b',
        type: 'text',
        fontName: 'sans_serif',
        position: { x: 10, y: 10 },
        width: 10,
        height: 10,
      },
      {
        // <- フォールバックフォントを使用（serif）
        name: 'c',
        type: 'text',
        position: { x: 20, y: 20 },
        width: 10,
        height: 10,
      },
    ],
  ],
};
const inputs = [{ a: 'a1', b: 'b1', c: 'c1' }];

generate({ template, inputs, options: { font } }).then((pdf) => {
  console.log(pdf);

  // ブラウザ
  // const blob = new Blob([pdf.buffer], { type: 'application/pdf' });
  // window.open(URL.createObjectURL(blob));

  // Node.js
  // fs.writeFileSync(path.join(__dirname, `test.pdf`), pdf);
});

UI​

UIでフォントを設定する方法は2つあります。インスタンス初期化時と、メソッドを通じての設定です。
サンプルコードはデザイナー用ですが、同じ方法でフォームとビューワーにも使用できます。

インスタンス初期化時にフォントを設定​

import { Designer } from '@pdfme/ui';

const domContainer = document.getElementById('container');
const template = {
  // 省略...
};
const font = {
  serif: {
    data: 'https://example.com/fonts/serif.ttf',
    fallback: true,
  },
  sans_serif: {
    data: 'https://example.com/fonts/sans_serif.ttf',
  },
};

const designer = new Designer({ domContainer, template, options: { font } });

updateOptionsでフォントを更新​

const font = {
  serif: {
    data: 'https://example.com/fonts/serif.ttf',
  },
  sans_serif: {
    data: 'https://example.com/fonts/sans_serif.ttf',
    fallback: true,
  },
};
designer.updateOptions({ font });