ใส่ font HTML ด้วยบริการ font ของ Google Fonts

ใส่ font HTML ด้วยบริการ font ของ Google Fonts บทความนี้สอนการใส่ font ภายในเว็บไซต์ HTML โดยใช้คำสั่งของ CSS คือ font-family ซึ่งคำสั่งนี้ใช้สำหรับใส่ font ตามที่ต้องการ โดยมีรายละเอียดดังนี้

ตัวอย่าง ใส่ font HTML ด้วยบริการ font ของ Google Fonts

1. เข้าเว็บไซต์ของ Google Fonts

https://fonts.google.com/

2. เลือก font ที่ต้องการใส่ในเว็บไซต์ HTML จากตัวอย่างเลือก font อันแรก Roboto

3. เลือกแท็บเมนู Select styles กดคลิกปุ่ม Select this style ของ Regular 400 จะปรากฏแทบเมนูด้านซ้ายสำหรับคัดลอกโค้ด

4. ตรงส่วน Use on the web มีตัวเลือกระหว่าง <link> กับ @import ให้เลือกตามความชอบ โดยเลือกแบบใดก็ตามให้นำโค้ดไปวางไว้ภายในแท็ก head ของเว็บไซต์

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
</style>

5. ใน CSS ให้ใช้คำสั่ง font-family ตามด้วยชื่อ font ที่จะใส่ในเว็บไซต์ HTML และทดสอบดูผลการเปลี่ยนแปลง

<style>
	* {
		font-family: 'Roboto', sans-serif;
	}
</style>

ใส่ font HTML ด้วยบริการ font ของ Google Fonts มีหลัการคือ เลือก font ที่ต้องการนำมาใส่ในเว็บไซต์ หลังจากนั้นเลือก styles ของ font สามารถเลือกได้มากกว่า 1 styles เช่น ตัวหนา, ตัวเอียง แต่ปกติคือ Regular 400 จากนั้นเลือกวิธีที่จะติดตั้งมี 2 วิธี คือ <link> กับ @import ถ้า <link> ก็ใส่ไว้ใน head ส่วนถ้า @import สามารถใส่ในไฟล์ CSS หรือภายใน head ก็ได้ สุดท้ายใช้คำสั่ง font-family ตามด้วยชื่อ font ที่ต้องการใส่