Next.js Discord

Discord Forum

Dynamic font OG Image

Unanswered
Savannah posted this in #help-forum
Open in Discord
SavannahOP
Hello I'd like to pass a fontname as parameter just like other parameters such as title etc
However when i try to make it dynamic / using variables i get an error

Here is before with static font https://github.com/OzakIOne/local-og-image-generator/blob/ozaki/project/packages/web/pages/api/param.tsx

Here is what i try to do but I get this error below, https://github.com/OzakIOne/local-og-image-generator/blob/ozaki/project-test/packages/web/pages/api/param.tsx

 ⨯ fetch failed
  25 |   })}.ttf`;
  26 |
> 27 |   const font = fetch(new URL(fontpath, import.meta.url)).then((res) =>
     |               ^
  28 |     res.arrayBuffer(),
  29 |   );
  30 |


I tried to debug a bit and found this
const test = new URL('../../assets/Roboto-Regular.ttf', import.meta.url);
console.log('test:', test);

test: URL {
  toString: [Function],
  href: 'blob:Roboto-Regular.d0bc87a819730d23.ttf',
  origin: '',
  protocol: '',
  username: '',
  password: '',
  host: '',
  hostname: '',
  port: '',
  pathname: 'blob:Roboto-Regular.d0bc87a819730d23.ttf',
  search: '',
  searchParams: URLSearchParams {
  [Symbol(query)]: [],
  [Symbol(context)]: URL {
  [Symbol(context)]: URLContext {
  href: 'blob:Roboto-Regular.d0bc87a819730d23.ttf',
  protocol_end: 5,
  username_end: 5,
  host_start: 5,
  host_end: 5,
  pathname_start: 5,
  search_start: 4294967295,
  hash_start: 4294967295,
  port: 4294967295,
  scheme_type: 1
}
}
},
  hash: '',
  toJSON: [Function]
}

const fontpath = '../../assets/Roboto-Regular.ttf';
const test2 = new URL(fontpath, import.meta.url);
console.log('test2:', test2);

test2: URL {
  [Symbol(context)]: URLContext {
  href: 'file:///home/ozaki/dev/local-og-image-generator/packages/web/assets/Roboto-Regular.ttf',
  protocol_end: 5,
  username_end: 7,
  host_start: 7,
  host_end: 7,
  pathname_start: 7,
  search_start: 4294967295,
  hash_start: 4294967295,
  port: 4294967295,
  scheme_type: 6
}
}

0 Replies