การนำ Google Font ไทย มาใช้งานในเว็บไซต์, ฟรี เพิ่มฟอนต์หน้าเว็บ
สวัสดีครับใน workshop นี้ ผมจะพาเอา Google Font ภาษาไทยมาใช้งานในเว็บไซต์ แบบฟรีๆ ฝึกไว้ครับเผื่อได้ใช้
โดยมีขั้นตอนดังนี้ครับ
- เข้าไปเลือกรูปแบบของ font ที่เราต้องการได้ที่ลิงค์ https://fonts.google.com/?subset=thai
- เลือก font ที่เราชอบ ตัวอย่างผมเลือก Font Mitr จะแสดงดังภาพ
- จากนั้นให้เลือกสไตล์ที่เราต้องการอีกที (ในกรอบสีแดง) คลิกเลือก + Select this style แสดงดังภาพ
- เมื่อคลิก + Select this style จะแสดงแทบ Use on the web อยู่ทางขวามือของหน้าจอ ตรงนี้แหละครับที่เราต้องเอาไปใส่ในหน้าเว็บของเรา จะมี 2 ส่วนด้วยกัน ส่วนแรกคือ link และอีกส่วนคือ CSS
- ขั้นตอนต่อไปเราก็ลองสร้างหน้าเว็บไฟล์ .html ขึ้นมาทดสอบแบบง่ายๆ ครับ
– จุดสังเกต 1 บรรทัด 8-9 คือส่วนของ link เรียกไฟล์ font Mitr มาใช้งานครับ (ไฟล์ css)
– จุดสังเกต 2 บรรทัด 11 – 15 การเปิด tag style เพื่อเรียก css มาใช้งาน โดยการกำหนดให้ใน tag body มีการเรียกใช้ font Mitr ทั้งหมด
123456789101112131415161718192021222324<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>ทดสอบการใช้ google font for web devbanban.com</title><link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Mitr:wght@300&display=swap" rel="stylesheet"><style type="text/css">body{font-family: 'Mitr', sans-serif;}</style></head><body>การเดินทางขากลับคงจะเหงา <br>การเดินทางขากลับคงจะเหงา <br>การเดินทางขากลับคงจะเหงา <br>การเดินทางขากลับคงจะเหงา <br></body></html>
ผลการทำงาน
เสร็จเรียบร้อยแล้วครับ ลองเอาไปประยุกต์ใช้ดูครับผม
ขอแนะนำระบบพร้อมใช้ ราคาเบาๆ เอาไปต่อยอดได้ รายละเอียดเพิ่มเติมใต้คลิป
ร่วมสนับสนุน ค่ากาแฟ ค่าโฮส devbanban.com และทีมงานได้ที่
ธนาคารกรุงไทย สาขาเดอะมอลล์ท่าพระ
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 878-0-17747-6
————————————————————————————
ธนาคารไทยพาณิชย์ สาขามหาวิทยาลัยราชภัฏธนบุรี
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 406-359094-1
fanpage : https://www.facebook.com/sornwebsites/