CSS เปลี่ยน font เปลี่ยนตัวอักษร ด้วย font-family

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

ตัวอย่างที่ 1 CSS เปลี่ยน font เปลี่ยนตัวอักษร ด้วย font-family

<style>
    body {
        font-family: 'sans-serif';
    }
</style>

จากโค้ดตัวอย่างใช้คำสั่ง font-family: 'sans-serif' คือ โหลดฟอนต์ sans-serif โดยเขียนไว้ใน body ทำตัวอักษรทั้งหมดในหน้าเว็บไซต์ใช้รูปแบบฟอนต์ดังกล่าว

ตัวอย่างที่ 2 CSS เปลี่ยน font เปลี่ยนตัวอักษร ด้วย font-family ผ่าน Google Fonts

<link href="https://fonts.googleapis.com/css2?family=Roboto" rel="stylesheet">

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

จากโค้ดตัวอย่างใช้ฟอนต์ Roboto จาก Google Fonts โดยเริ่มแรกต้องโหลดฟอนต์ผ่านแท็ก link ก่อนโดยวางไว้ภายในแท็ก head ของเว็บไซต์ จากนั้นใช้คำสั่ง font-family ตามด้วยชื่อฟอนต์ที่ต้องการใช้งาน เช่น font-family: 'Roboto', sans-serif โดยวิธีการนี้มีลักษณะเป็นการเรียกใช้ฟอน์ตจากภายนอก