เพิ่มฟ้อนต์ไทยให้ og-image ของ vercel

ใครที่ใช้บริการ Vercel อยู่บ้างจะเห็นว่าทาง Vercel มีบริการมากมายเลือกใช้งานกันไม่ถูก หนึ่งในนั้นก็คือทำ Open Graph Image as a Service ซึ่งเป็นบริการที่เราสามารถเขียน API เพื่อให้ทางเว็บ auto generate รูป Open Graph และ Twitter card ให้ ซึ่งเป็นเรื่องที่ดีครับ แต่สิ่งหนึ่งที่ไม่ดีเลยก็คือ “pim thai mai dai (พิมพ์ไทยไม่ได้)“

พอเราใส่ภาษาไทยเข้าไปมันกลายเป็นสี่เหลี่ยมแบบนี้

แต่โชคดีที่เขาเปิด Open repository ให้เอาไปแก้ไขและ deploy ใช้เองได้ด้วย ใครอยากลองก็คลิกที่นี่เลยครับ

สิ่งที่ต้องทำ

สั้นๆคือ เพิ่มฟ้อนต์ไทยเข้าไปนั่นแหละ แต่วิธีการมันก็ออกจะหลายขั้นตอนอยู่

1. ทำการโหลดฟ้อนต์ที่ต้องการ (ในที่นี้ผมใช้ NotoSansThai-Black) copy ไปวางไว้ที่ ../api/_fonts/NotoSansThai-Black.ttf
2. ที่ไฟล์ vercel.json แต่เดิมจะเป็นโค้ดดังนี้

{
"regions": ["all"],
"functions": {
"api/**": {
"memory": 3008
}
},
"rewrites": [
{ "source": "/(.+)", "destination": "/api" }
]

ทำการลบโค้ดออกให้เหลือเพียงส่วนของ rewrites

{
  "rewrites": [
    { "source": "/(.+)", "destination": "/api" }
  ]
}

1. ที่ไฟล์ 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 ครับ