Google Font เป็นเว็บไซต์ที่ให้บริการฟอนต์ฟรีสำหรับใช้ในการออกแบบเว็บไซต์ ซึ่งเราสามารถนำมาใช้กับ CSS ได้โดยตรง โดยทำการลิงก์ไปยังไฟล์ฟอนต์ที่เก็บอยู่บน Google Font และกำหนด font-family ให้เป็นชื่อฟอนต์ที่ต้องการใช้ ตัวอย่างการใช้งาน Google Font ใน CSS ดังนี้
1. ให้เพิ่มลิงก์ไปยังไฟล์ CSS ของ Google Font ในส่วนหัวของเอกสาร HTML ดังนี้
<head>
<link rel=”stylesheet” href=”https://fonts.googleapis.com/css2?family=Roboto”>
</head>
2. กำหนด font-family ใน CSS เพื่อใช้ฟอนต์ Roboto ที่เราเพิ่มเข้ามา ดังนี้
body {
font-family: ‘Roboto’, sans-serif;
}
โดยเราใช้คำสั่ง font-family เพื่อกำหนดฟอนต์ของข้อความทั้งหน้าเว็บไซต์ ในที่นี้เราใช้ฟอนต์ Roboto เป็นหลัก ถ้าไม่พบ Roboto ในเครื่องผู้ใช้ เราก็จะใช้ฟอนต์ sans-serif แทน
จากตัวอย่างข้างต้น เมื่อเรานำไปใช้กับ HTML ที่มีข้อความ ก็จะแสดงผลข้อความด้วยฟอนต์ Roboto ทันทีเมื่อแสดงหน้าเว็บไซต์
แบ่งปันกัน เราอยู่กันไม่เกิน 100 ปีหรอกครับ
สุดท้ายก็ทิ้งไว้ที่โลก จะคงเหลือไว้แต่คุณงามความดีที่ให้ระลึกถึงกันครับ
Follow Us / Thanat Sirikitphattana