การนำฟอนต์มาใช้งานในเว็บไซต์ง่ายๆจาก Google Fonts

Google Fonts

การใช้งาน Google Fonts นั้นมีอยู่ 2 แบบนะครับ แบบแรกคือดาวน์โหลดมาไว้ในโฮสต์ของเว็บไซต์เรา แล้วเรียกใช้จากในโฮสต์ได้เลย หรือแบบหลังเรียกใช้โดยการโหลดตรงจาก Google เลย ซึ่งแบบแรกก็น่าจะเร็วกว่าเพราะเหมือนโหลดจากเครื่องคอมตัวเอง แต่อย่างหลังก็โหลดจากเว็บอื่น เลือกเอาตามสะดวก

วิธีใช้งานนั้นก็ง่ายมากๆ ก่อนอื่นๆก็ค้นหาเลยครับ Google Fonts แล้วก็ตรงดิ่งเข้าไปในเว็บหลักได้เลย แล้วเราก็แค่เลือกฟอนต์ที่เราต้องการใช้งาน แล้วก็กดดาวน์โหลดมาได้เลยสำหรับการใช้งานในโฮสต์ส่วนตัว หรือจะให้หน้าเว็บเราโหลดตรงจาก Google เลยก็แค่กดเลือกน้ำหนักที่เราจะใช้ แล้วก็ copyโค้ดด้านขวามาใส่ในแท็ก head ของเว็บเราได้เลย เวลาเรียกใช้ก็เรียกเป็น font-family:’font-name’, snas-serif; ตามที่เค้าเขียนไว้ใน เว็บด้านขวามือได้เลย ตัวอย่างเช่นถ้าผมเลือก Kanit น้ำหนักปกติ กลางๆแล้วก็หนามา ผมก็จะได้โค้ดมาแบบนี้

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;700&display=swap" rel="stylesheet">

เอามาใส่ในแท็ก head ของเว็บเราอย่างที่บอก แล้วเวลาเขียนโค้ดก็แค่กำหนด font family ด้วย css เหมือนด้านล่างนี้

font-family: 'Kanit', sans-serif;

แค่นี้เองครับ ง่ายๆ บทความถัดไปเดี๋ยวผมจะเขียนวิธีการเรียกใช้งานฟอนต์บนเว็บไซต์ส่วนตัวแปะไว้ให้

Leave a comment

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *