![](/_astro/d8f791abbcd1b4f322ef137c4ffdd662c36e6612b0253c24030a5e1572a81ea2-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/ebd56246956203ab3793ea9d4142b6b88e87fc73a7954f484a9b587141ab5d78.CqZBYULG_Z1PV4hP.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 ครับ