Comments (15)
patrick91
commented on May 21, 2024
4
The workaround is to use a non variable version of the same font, which was fine for my use case (I only needed one weight) :)
from satori.
mxswat
commented on May 21, 2024
2
Same issue here using Montserrat-VariableFont_wght.ttf from https://fonts.google.com/specimen/Montserrat
from satori.
karelnagel
commented on May 21, 2024
Having the same issue, has anyone found a fix?
from satori.
arimendelow
commented on May 21, 2024
Same issue here, still no fix?
from satori.
levz0r
commented on May 21, 2024
Same issue, Next.js v13.0.3.
from satori.
mcnaveen
commented on May 21, 2024
Any update on this? Facing a similar issue.
from satori.
mrmianbao
commented on May 21, 2024
did you try removing style? I'm using variable fonts in the latest version without issue, but just { name, data }.
from satori.
mixeden
commented on May 21, 2024
Btw if you use variable .woff, the message disappears, but the font is not getting applied
from satori.
heychazza
commented on May 21, 2024
+1 hitting this with the same font
Same issue here using
Montserrat-VariableFont_wght.ttffrom https://fonts.google.com/specimen/Montserrat
from satori.
jahirfiquitiva
commented on May 21, 2024
I'm facing this issue when using a .woff2 font 😬
from satori.
fromaline
commented on May 21, 2024
I'm facing the same issue, any updates on this?
from satori.
tifandotme
commented on May 21, 2024
Any update?
from satori.
AlbertMarashi
commented on May 21, 2024
+1 would like support for variable fonts
from satori.
imsanchez
commented on May 21, 2024
I lost so much time trying to debug this.
The error via ImageResponse from next/og (@vercel/og):
⨯ Error: failed to pipe response
at pipeToNodeResponse (/Users/isaiah/Desktop/CodeTrackr/codetrackr/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/pipe-readable.js:126:15)
at async DevServer.runEdgeFunction (/Users/isaiah/Desktop/CodeTrackr/codetrackr/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/next-server.js:1248:13)
at async NextNodeServer.handleCatchallRenderRequest (/Users/isaiah/Desktop/CodeTrackr/codetrackr/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/next-server.js:248:37)
at async DevServer.handleRequestImpl (/Users/isaiah/Desktop/CodeTrackr/codetrackr/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/base-server.js:811:17)
at async /Users/isaiah/Desktop/CodeTrackr/codetrackr/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/dev/next-dev-server.js:339:20
at async Span.traceAsyncFn (/Users/isaiah/Desktop/CodeTrackr/codetrackr/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/trace/trace.js:154:20)
at async DevServer.handleRequest (/Users/isaiah/Desktop/CodeTrackr/codetrackr/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/dev/next-dev-server.js:336:24)
at async invokeRender (/Users/isaiah/Desktop/CodeTrackr/codetrackr/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/lib/router-server.js:174:21)
at async handleRequest (/Users/isaiah/Desktop/CodeTrackr/codetrackr/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/lib/router-server.js:353:24)
at async requestHandlerImpl (/Users/isaiah/Desktop/CodeTrackr/codetrackr/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/lib/router-server.js:377:13)
at async Server.requestListener (/Users/isaiah/Desktop/CodeTrackr/codetrackr/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/lib/start-server.js:141:13)
Switching to a non-variable font works, thank you.
from satori.
Kas-tle
commented on May 21, 2024
If working with google fonts to get non-variable weight ones I found that you have to spoof the user agent to something old get it to return non-variable weight ttf files:
async function getTtfFont(family: string, axes: string[], value: number[]): Promise<ArrayBuffer> {
const familyParam = axes.join(',') + '@' + value.join(',');
// Get css style sheet with user agent Mozilla/5.0 Firefox/1.0 to ensure non-variable TTF is returned
const cssCall = await fetch(`https://fonts.googleapis.com/css2?family=${family}:${familyParam}&display=swap`, {
headers: {
'User-Agent': 'Mozilla/5.0 Firefox/1.0',
},
});
const css = await cssCall.text();
const ttfUrl = css.match(/url\(([^)]+)\)/)?.[1];
return await fetch(ttfUrl).then(res => res.arrayBuffer());
}from satori.
Related Issues (20)
- Using CSS `border`, images are broken and exposed
- Optional TailwindCSS
- Functionality for getting bounding box of text from satori
- 2x faster with SatoriOptions.fonts as a global variable HOT 2
- Title HOT 1
- Image in SVG doesn't work when exported to PNG HOT 10
- Transparent linear gradient rendered incorrectly HOT 2
- `word-break: keep-all` breaks when used with `text-wrap: balance`
- Satori cannot render svg data URI with comma inside
- Misplacement text when Embed Font is turned off
- Satori does not work with components which are using forwardRef HOT 1
- BUG: Fails to apply HSL colors with a decimal point in the hue.
- Absolute child of fragment does not position properly with true relative parent
- Type 'ArrayBuffer' is not assignable to type 'string'. when using local image. HOT 1
- Base64 encoded Webp Images are not working
- `span` background does not match the way browser renders
- Error: t is undefined when using base64-encoded image as `background-image`
- `lineClamp` / `textOverflow` incorrectly overflows after first word in a line HOT 1
- Add links to text/images
- @vercel/og and next/og: Can't load image: Unsupported image type: unknown
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from satori.