เปลี่ยนฟอนต์ใน CSS ด้วยคำสั่ง font-family

เปลี่ยนฟอนต์ใน CSS ด้วยคำสั่ง font-family บทความนี้สอนใช้คำสั่ง font-family เพื่อเปลี่ยนรูปแบบของฟอนต์ภายในเว็บไซต์ โดยปกติฟอนต์จะมีแบบเรียกใช้งานได้เลย กับแบบต้องติดตั้ง โดยมีรายละเอียดดังนี้

ตัวอย่างที่ 1 เปลี่ยนฟอนต์ใน CSS แบบเรียกใช้งานได้เลย

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

จากโค้ดเป็นการเปลี่ยนฟอนต์ของเว็บไซต์ให้เป็น Tahoma หาก Tahoma ไม่สามารถใช้งานได้ให้แสดงฟอนต์สำรองคือ sans-serif วิธีนี้จะเป็นการเลือกฟอนต์จากที่มีมาให้อยู่แล้ว ไม่ต้องติดตั้งฟอนต์เพิ่ม

ตัวอย่างที่ 2 เปลี่ยนฟอนต์ใน CSS แบบติดตั้งฟอนต์เพิ่มผ่าน Google Fonts

<style>
	@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
	* {
		font-family: 'Roboto', sans-serif;
	}
</style>

จากโค้ดเป็นการติดตั้งฟอนต์เพิ่มชื่อ Roboto โดยใช้บริการของ Google Fonts วิธีนี้ใช้สำหรับกรณีที่เจ้าของเว็บไซต์ไม่ชอบฟอนต์ที่มีมาให้เลือก ต้องการใช้ฟอนต์ภายนอก ซึ่งจะต้องติดตั้งฟอนต์โดยใช้คำสั่ง @import และใช้คำสั่ง font-family ตามด้วยชื่อฟอนต์ที่ได้มีการติดตั้งไป