Comments (9)
I have run into the same "tofu" issue with Japanese characters and got stuck for a while.
As @r0mflip mentioned, adding the Noto family was the way to go.
I share the procedure in case someone is in the same trouble.
const noto = readFileSync(`${__dirname}/../_fonts/NotoSansJP-Black.otf`).toString('base64');
- Inject it to CSS
@font-face {
font-family: 'Noto Sans Japanese';
font-style: normal;
font-weight: normal;
src: url(data:font/otf;charset=utf-8;base64,${noto}) format('opentype');
}
- Add its font family name to the heading class
.heading {
font-family: 'Inter', 'Noto Sans Japanese', sans-serif;
font-size: ${sanitizeHtml(fontSize)};
font-style: normal;
color: ${foreground};
line-height: 1.8;
}
That's it. It works fine most of the time.
An unresolved issue is that the some characters are still not visible.
But If I double the character ("あ" in this case), the problem has gone.
Dunno why.. I will try to add some more font files and see how it goes.
from og-image.
Not all fonts support all scripts. Some of the suggested ones would be to use from the Noto family, but even then it doesn't include CJK, Devanagri, Arabic, ...
If #70 works then it would be awesome that we can the required font and tweak the CSS a bit to support the required script. IMHO all-in-one solution might be a far fetch.
from og-image.
Hi @ryanckulp
We haven't tried posting in non-english languages since all our content is English at this time.
This could be related to #70.
from og-image.
update.. after 10 hours i'm almost. there.
tldr -- replaced puppateer w/ selenium-webdriver.
one question about Zeit server config: what's the executable path i should be using for Chrome, in prod?
tried: /tmp/chromium
// /usr/local/bin/chromedriver
the latter works locally but not in production, says "PATH NOT FOUND."
from og-image.
ZEIT Now doesn't ship Chrome so you would have to consult the docs for selenium-webdriver to find out where it installs Chrome for Linux. If you can set a path, I would suggest /tmp
because that is the only writable directory on the filesystem.
from og-image.
@ryanckulp Could you share with me how did you solve this issue? Also it it applicable for Arabic language for example?
from og-image.
I want to point out that even though most of us can get around with this problem by injecting Noto fonts in to HTML templates for now, the true issue here is actually lies within the chrome-aws-lambda
.
I did some experiment:
- Try running on my local dev: worked -> which means the currently provided fonts is fine.
- Deployed on Vercel: failed -> Something happened on the cloud went wrong.
- Deployed another instance with
OG_HTML_DEBUG=1
envs: worked -> The render html can properly display, which leaves the only possibility to the screenshot function.
from og-image.
@tomy0000000 thanks for the fix! really appreciate it.
from og-image.
Closing in favor of #226
from og-image.
Related Issues (20)
- Would you consider allowing the first image to be custom ? HOT 2
- How much does it cost to host on vercel HOT 3
- Does this generate images on each request HOT 4
- Koyeb hosting support
- trying to run my own as written in the readme HOT 1
- serverless function exceeds maximum size limit of 50mb HOT 4
- Can't start dev server in freshly forked repo HOT 4
- UI doesn't work, outputs code instead. HOT 4
- Issue deploying to Vercel on `Hobby` and `Team` plan HOT 1
- The engine "node" is incompatible with this module. Expected version "14.x" HOT 2
- Update to new `Next.js` logo 🎉 HOT 2
- Announcing Vercel OG HOT 26
- (opened in error) apologies
- OG image is not working on twitter HOT 1
- Can't resolve custom fonts when deploying at Vercel HOT 1
- Twitter image needs to be one word HOT 2
- How to return a 401 error on one endpoint of these? HOT 2
- How to call the database from a vercel OG endpoint? Is it possible? HOT 1
- Error: Can't load image x: Failed to parse URL from x HOT 1
- Deploying to Netlify HOT 1
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 og-image.