![](/_astro/aaa84bc256847582d26e658e04f81142cbd0d8322e71b0992ee797efc69cd6a6-cover.D3TJwdhr.webp)
ใครที่ใช้บริการ Vercel อยู่บ้างจะเห็นว่าทาง Vercel มีบริการมากมายเลือกใช้งานกันไม่ถูก หนึ่งในนั้นก็คือทำ Open Graph Image as a Service ซึ่งเป็นบริการที่เราสามารถเขียน API เพื่อให้ทางเว็บ auto generate รูป Open Graph และ Twitter card ให้ ซึ่งเป็นเรื่องที่ดีครับ แต่สิ่งหนึ่งที่ไม่ดีเลยก็คือ “pim thai mai dai (พิมพ์ไทยไม่ได้)“
![Blog Image](/_astro/fb5783d62bc5821bcc55d1ec40cd41c96d2763db173c1264d181f1485e99172f.CqZBYULG_rU9eq.webp)
พอเราใส่ภาษาไทยเข้าไปมันกลายเป็นสี่เหลี่ยมแบบนี้
แต่โชคดีที่เขาเปิด Open repository ให้เอาไปแก้ไขและ deploy ใช้เองได้ด้วย ใครอยากลองก็คลิกที่นี่เลยครับ
สิ่งที่ต้องทำ
สั้นๆคือ เพิ่มฟ้อนต์ไทยเข้าไปนั่นแหละ แต่วิธีการมันก็ออกจะหลายขั้นตอนอยู่
- ทำการโหลดฟ้อนต์ที่ต้องการ (ในที่นี้ผมใช้ NotoSansThai-Black) copy ไปวางไว้ที่
../api/_fonts/NotoSansThai-Black.ttf
- ที่ไฟล์ vercel.json แต่เดิมจะเป็นโค้ดดังนี้
{
"regions": ["all"],
"functions": {
"api/**": {
"memory": 3008
}
},
"rewrites": [
{ "source": "/(.+)", "destination": "/api" }
]
ทำการลบโค้ดออกให้เหลือเพียงส่วนของ rewrites
{
"rewrites": [
{ "source": "/(.+)", "destination": "/api" }
]
}
- ที่ไฟล์
api/_lib/template.ts
และเพิ่มฟ้อนต์ที่เรานำไปวางในขั้นตอนที่ 1 ด้วยแพทเทิร์นเดียวกับที่มีอยู่แล้ว
const noto = readFileSync(
`${__dirname}/../_fonts/NotoSansThai-Black.ttf`
).toString("base64");
ในไฟล์เดียวกัน ที่ส่วนของ @font-face ให้ทำการเรียกใช้ฟ้อนต์ที่ const ไว้ด้านบน
@font-face
{
font-family: 'Noto Sans Thai';
font-style: normal;
font-weight: normal;
src: url(data:font/otf;charset=utf-8;base64,${noto}) format('truetype');
}
และให้นำ font-family มาเพิ่มในส่วน .header ในส่วน font-family ในไฟล์เดียวกัน (ต้องเป็น string นะอย่าลืม ไม่งั้นมันไม่อ่าน)
font-family: 'Inter', 'Noto Sans Thai', sans-serif;
จากนั้นให้ลองนำไป deploy ที่ vercel ดูครับ ถ้าไม่ผิดพลาดตรงไหน deploy ผ่านก็จะพบว่าเราสามารถพิมพ์ไทยได้แล้ว
สำหรับการเพิ่มไอคอนของตัวเอง ผมจะเขียนคราวหน้านะครับ (ถ้าไม่ลืม) หรือใครสนใจจะไปนั่งแกะจาก repository ของผมก็ได้ตามลิงค์นี้เลยครับ
หรือแวะไปลองเล่นตัวอย่างที่ทำเสร็จแล้วได้ที่ https://og.pickyzz.dev ครับ