อ่าน รายชื่อ Font ที่อยู่ในเครื่อง ด้วย Local Font Access API

ปัญหานึงของเรื่อง Font ที่เรามักจะเจอกันบ่อยๆคือเราไม่รู้เลยว่าในเครื่อง Client มี Font อะไรอยู่บ้าง ทำให้เราต้องคอยบอก User ว่า ให้ ลง Font ตามนี้ด้วยนะ ถึงจะใช้ Font นั้นได้ หลายๆคนก็คงบอกว่า ก็ใช้ Web Font ไปสิ ซึ่งก็จริง แต่ถ้าคุณกำลังทำ Application แบบ Microsoft Office หรือ Photoshop แทบเป็นไปไม่ได้เลยที่จะ ยัด Font ทั้งหมดให้เป็น Webfont เพราะนอกจาก เราจะไม่รู้ว่าเค้าอยากจะให้ font อะไร ฝั่ง browser เลย implement feature ที่ทำให้เรา เรียก list ของ วิธีการนี่ง่ายๆเลย แค่เรียก function ตามนี้ เราก็จะได้ list ของ font ที่อยู่ใน client เป็น array ออกมา

const availableFonts = await window.queryLocalFonts();

ด้วย UX ของเว็บที่ไม่ต้องการให้ใครเข้าถึง ของใน platform โดยไม่มีการขอ permission นั้นตัว browser จะเด้ง popup ถามขึ้นมาว่า จะ allow มั้ย

หลังจากนั้นเราก็จะได้ array ที่เต็มไปด้วย list ของ font object ออกมา หน้าตาประมาณนี้

{"postscriptName": "OriyaMN-Bold", fullName: "Oriya MN Bold", family: "Oriya MN", style: "Bold"} 

แค่นี้เราก็แค่เอา property family ไปใส่ใน css เท่านี้ก็จบแล้ว ผมลองทำ Demo เล็กๆมาให้ทุกคนลองเล่นกันดูว่าถ้าทำออกมาแล้วจะหน้าตาเป็นแบบไหน

https://glitch.com/edit/#!/carnation-horn-neighbor

ใครอยากจะหาข้อมูลเพิ่มเติมลองไปอ่านได้ที่ https://developer.chrome.com/en/articles/local-fonts/ ได้เลยครับ