Fonts: allow registration of fonts from Buffer and blob: URLs

packages/font/src/font-source.ts

@@ -1,7 +1,13 @@
 import isUrl from 'is-url';
 import * as fontkit from 'fontkit';
 
-import { Font, FontSourceOptions, FontStyle, RemoteOptions } from './types';
+import {
+  BufferFontSource,
+  Font,
+  FontSourceOptions,
+  FontStyle,
+  RemoteOptions,
+} from './types';
 import StandardFont, { STANDARD_FONTS } from './standard-font';
 
 const fetchFont = async (src: string, options: RemoteOptions) => {
@@ -30,7 +36,7 @@ const isDataUrl = (dataUrl: string) => {
 };
 
 class FontSource {
-  src: string;
+  src: string | BufferFontSource;
   fontFamily: string;
   fontStyle: FontStyle;
   fontWeight: number;
@@ -39,7 +45,7 @@ class FontSource {
   loadResultPromise: Promise<void> | null;
 
   constructor(
-    src: string,
+    src: string | BufferFontSource,
     fontFamily: string,
     fontStyle?: FontStyle,
     fontWeight?: number,
@@ -60,7 +66,9 @@ class FontSource {
 
     let data = null;
 
-    if (STANDARD_FONTS.includes(this.src)) {
+    if (typeof this.src !== 'string') {
+      data = fontkit.create(this.src.buffer, postscriptName);
+    } else if (STANDARD_FONTS.includes(this.src)) {
       data = new StandardFont(this.src);
     } else if (isDataUrl(this.src)) {
       const raw = this.src.split(',')[1];
@@ -70,7 +78,7 @@ class FontSource {
           .map((c) => c.charCodeAt(0)),
       );
       data = fontkit.create(uint8Array, postscriptName);
-    } else if (BROWSER || isUrl(this.src)) {
+    } else if (BROWSER || isUrl(this.src) || this.src.startsWith('blob:')) {
       const { headers, body, method = 'GET' } = this.options;
       const buffer = await fetchFont(this.src, { method, body, headers });
       data = fontkit.create(buffer, postscriptName);

packages/font/src/types.ts

@@ -40,8 +40,12 @@ export type FontSourceOptions = {
   postscriptName?: string;
 } & RemoteOptions;
 
+export type BufferFontSource = {
+  buffer: Buffer;
+};
+
 export type FontSource = {
-  src: string;
+  src: string | BufferFontSource;
   fontStyle?: FontStyle;
   fontWeight?: FontWeight;
 } & FontSourceOptions;

packages/font/tests/font-source.test.ts

@@ -0,0 +1,43 @@
+import { readFile } from 'node:fs/promises';
+
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import FontStore from '../src/index';
+import FontSource from '../src/font-source';
+
+const fontPath = new URL('../../layout/tests/assets/font.ttf', import.meta.url);
+
+describe('FontSource', () => {
+  beforeEach(() => {
+    vi.stubGlobal('BROWSER', false);
+  });
+
+  it('loads blob URLs', async () => {
+    const font = await readFile(fontPath);
+    const src = URL.createObjectURL(new Blob([font], { type: 'font/ttf' }));
+
+    try {
+      const source = new FontSource(src, 'BlobFont');
+
+      await source.load();
+
+      expect(source.data).not.toBeNull();
+    } finally {
+      URL.revokeObjectURL(src);
+    }
+  });
+
+  it('loads buffer sources registered through FontStore', async () => {
+    const buffer = await readFile(fontPath);
+    const fontStore = new FontStore();
+
+    fontStore.register({
+      family: 'BufferFont',
+      src: { buffer },
+    });
+
+    await fontStore.load({ fontFamily: 'BufferFont' });
+
+    expect(fontStore.getFont({ fontFamily: 'BufferFont' }).data).not.toBeNull();
+  });
+});