วิธีตั้งค่าตระกูลแบบอักษร (Font Family) ด้วย JavaScript

บทนำ

Property fontFamily ใน JavaScript DOM ใช้สำหรับเปลี่ยนแบบอักษรของข้อความใน element ใดๆ แบบไดนามิก

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
<body>
  <h1>Heading 1</h1>
  <p id="myID">
    This is Demo Text. This is Demo Text. This is Demo Text. This is Demo Text.
    This is Demo Text. This is Demo Text. This is Demo Text. This is Demo Text.
  </p>
  <button type="button" onclick="display()">ตั้งค่า Font Family</button>
  <script>
    function display() {
      document.getElementById("myID").style.fontFamily = "verdana,sans-serif";
    }
  </script>
</body>
</html>

รูปแบบค่า fontFamily

// ระบุหลาย font สำรอง (fallback) คั่นด้วย comma
element.style.fontFamily = "font1, font2, font3, generic-family";

ตัวอย่าง Font Families ยอดนิยม

Google Fonts / Web Fonts

// ต้องโหลด font ก่อนใน HTML
// <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

element.style.fontFamily = "'Roboto', sans-serif";

ข้อสังเกต

• ชื่อ font ที่มีช่องว่างต้องหุ้มด้วย quote: "Times New Roman"
• ควรระบุ generic family (serif, sans-serif, monospace) ตอนท้ายเป็น fallback
• Font ต้องมีในระบบผู้ใช้ หรือโหลดผ่าน @font-face / Google Fonts

Properties ที่เกี่ยวข้อง

• fontSize - ขนาดตัวอักษร
• fontWeight - ความหนา (normal, bold, 400, 700)
• fontStyle - สไตล์ (normal, italic, oblique)
• font - shorthand สำหรับทั้งหมด