My opengraph-image should be the root one!
\n \n\n```\n\n# Options Reference\n\nThe integration requires the following options:\n\n- `getSvgOptions.fonts`: an array of fonts that will be used in your image component. Each font requires:\n - `name`: This is whatever you reference in your css, e.g. `Inter`\n - `path`: A string path to your font file. Can be in your node_modules folder, e.g. `\"node_modules/@fontsource/inter/files/inter-latin-400-normal.woff\"`\n - `weight`: A weight, from 100 to 900. You can provide different fonts for different weights.\n\nSee the TypeScript type-hints and comments for more info.\n\n# Examples\n\n## Using custom fonts\n\n`astro.config.mts`:\n\n```ts\nimport { defineConfig } from \"astro/config\";\nimport opengraphImage from \"@altano/astro-opengraph-image\";\n\n// https://astro.build/config\nexport default defineConfig({\n integrations: [\n opengraphImage({\n async getSvgOptions() {\n return {\n fonts: [\n {\n name: \"Inter\",\n path: \"node_modules/@fontsource/inter/files/inter-latin-400-normal.woff\",\n weight: 400,\n style: \"normal\",\n },\n {\n name: \"Inter\",\n path: \"node_modules/@fontsource/inter/files/inter-latin-800-normal.woff\",\n weight: 800,\n style: \"normal\",\n },\n ],\n };\n },\n }),\n ],\n});\n```\n\n`src/pages/opengraph-image.png.astro`:\n\n```astro\n---\n/**\n * This is not used during image generation. It is only here\n * to make the fonts consistent between the generated image\n * and how the component is rendered if the image generation\n * middleware is disabled.\n */\nimport \"@fontsource-variable/inter\";\n---\n\n\n\n This is rendered as a PNG image.\n
\n \n