<main>
  <p>
    <strong>เลือกฟอนต์:</strong>
  </p>
  <ul>
    <li>
      <a class="active font-sans" onclick="notoSans()"><em>Noto Sans Thai</em></a>
    </li>
    <li>
      <a class="font-serif" onclick="notoSerif()"><em>Noto Serif Thai</em></a>
    </li>
  </ul>
  <p>
    <textarea rows="20" placeholder="พิมพ์ข้อความที่นี่เพื่อทดสอบ"></textarea>
  </p>
  <h2>ตัวอย่างบทความ</h2>
  <small><em>ที่มา
      <a href="https://th.wikipedia.org/wiki/%E0%B9%84%E0%B8%97%E0%B8%9B%E0%B9%8C%E0%B9%80%E0%B8%9F%E0%B8%8B" target="_blank">Wikipedia</a>
    </em></small>
  <p>
    ไทป์เฟซ หรือ ฟอนต์ หรือในชื่อไทยว่า ชุดแบบอักษร (อังกฤษ: typeface หรือ
    font) คือชุดของรูปอักขระ (glyph)
    ที่ได้รับการออกแบบไว้อย่างเป็นเอกภาพด้วยรูปแบบเฉพาะตัว
    ไทป์เฟซอาจประกอบด้วยตัวอักษร ตัวเลข เครื่องหมายวรรคตอน
    และอาจรวมไปถึงอักษรภาพ (ideogram) เช่นอักษรจีนหรือสัญลักษณ์ต่างๆ
    เช่นสัญลักษณ์ทางคณิตศาสตร์หรือทางเทคนิค
  </p>
  <h3>ความแตกต่างของไทป์เฟซกับฟอนต์</h3>
  <p>
    บุคคลทั่วไปมักใช้คำว่า ฟอนต์ (font/fount) เรียกแทนไทป์เฟซ
    หรือใช้เรียกสลับกัน แต่ในความจริงแล้วมีความหมายที่แตกต่างกัน
    ไทป์เฟซหมายถึงชุดตัวอักษรที่มีรูปแบบเดียวกัน ไม่ว่าจะมีขนาดใหญ่เล็กเท่าไร
    เช่น Arial, Arial Bold, Arial Italic และ Arial Bold Italic
    ต่างเป็นไทป์เฟซคนละชนิดกัน
    ส่วนฟอนต์จะหมายถึงชุดตัวอักษรที่มีทั้งไทป์เฟซและขนาดเดียวกัน ตัวอย่างเช่น
    Arial 12 พอยต์ก็เป็นฟอนต์หนึ่ง Arial 14 พอยต์ก็เป็นฟอนต์หนึ่ง Arial Bold
    14 พอยต์ก็เป็นอีกฟอนต์หนึ่ง เป็นต้น ในการสร้างเอกสารแบบดิจิทัล
    ผู้ใช้สามารถเปลี่ยนขนาดฟอนต์ได้เองในคอมพิวเตอร์
    ทำให้ความแตกต่างของไทป์เฟซกับฟอนต์จึงลดความสำคัญลงไป
  </p>
  <p>
    สำหรับตระกูลหรือสกุลของตัวอักษร (font/type family)
    มีความหมายกว้างกว่าไทป์เฟซ กล่าวคือ
    แบบตัวอักษรชื่อเดียวกันที่อาจมีรูปแบบต่างๆ กัน
    ถือเป็นแบบอักษรตระกูลเดียวกัน โดยปกติจะมี 4 รูปแบบคือ roman, italic, bold,
    bold italic แบบอักษรบางตระกูลอาจมี narrow, condensed หรือ black
    อยู่ด้วยก็ได้ ดังนั้น Arial, Arial Bold, Arial Italic และ Arial Bold
    Italic ทั้งหมดเป็นแบบอักษรในตระกูล Arial ในขณะที่ Helvetica หรือ Courier
    ก็เป็นอีกตระกูลหนึ่ง
  </p>
  <hr />
  <h2>คำไทยแบบสุ่ม</h2>
  <small><em>สร้างด้วย
      <a href="http://lorem.in.th" target="_blank">lorem.in.th</a></em></small>
  <p>
    ศิลปากรคอมเมนท์เทเลกราฟ มั้ยฟิวเจอร์สโตร์ แฟกซ์ ถ่ายทำแพลนเพนตากอนแมชีน
    วอลนัทคอมเมนท์แชมป์พรีเมียม แอปเปิ้ล ปิโตรเคมีเซ็นเตอร์ไฮเปอร์ ต่อรอง
    บอยคอตต์ไฮบริดวีไอพี แอปเปิลแอคทีฟแชมเปี้ยนโพลล์ไฟลท์ คอนเทนเนอร์
    กีวีซีอีโอ เซ่นไหว้ไดเอ็ตเปราะบางวอล์ก มาเฟียแฟร์วันเวย์ฮาโลวีน
    อุรังคธาตุยิวศากยบุตรเกรย์ละติน ไฟแนนซ์สามแยกแจ็กพอตเหมย
  </p>
  <p>
    ปทุมธานีอ่างขางบุรีรัมย์ล้านช้างน่าน สมุทรสาคร
    แม่ฮ่องสอนนครศรีธรรมราชล้านช้างพังงาพัทลุง
    อำนาจเจริญล้านนากรุงเทพนครปฐมอุดรธานี
    ปัตตานีแม่ฮ่องสอนเพชรบูรณ์นครพนมอยุธยา มหาสารคามระนองกาญจนบุรีสตูลถลาง
    จตุจักรลำปาง นราธิวาสปทุมธานีชัยภูมิราชบุรี
    สระบุรีแม่ฮ่องสอนทวาราวดีลาดพร้าว สุราษฎร์มหาสารคามรังสิตสุรินทร์มุกดาหาร
    กาญจนบุรีถลางหนองบัวลำภู ลันตาจันทบุรี นราธิวาส อุตรดิตถ์สมุทรปราการ
    นราธิวาสสุรินทร์อ่างทองพิจิตร
  </p>
  <p>
    คึ่นฉ่ายหยอมแหยมพลูโตเนียมทิฏฐิคาทอลิค อีรุงตุงนังหยอยทรมาณ กุฎฐังฃวด
    ทิฏฐิพนิชพากษ์ ศรีษะอัตคัตบ๊องแบ๊ว อะดรีนาลีน เฟิร์น ยากี้อัตคัตอุลตรา
    วิศิษฐ์พยักเพยิดทิฏฐิสาราณียากรโปรเตสแตนท์ สุกี้ยากี้ ฤาษีโอกาศคลีนิค
    แคตตาล็อกสัตตสดกล็อคสาราณียากร กุฎฐังวันทยาหัตถ์วันทยาหัตถ์
    คลีนิกโปรเตสแตนท์ กงเต็กพากษ์ ทิฏฐิแซ่ด
  </p>
  <p>
    ฟลูออเรสเซนซ์แอสพาร์แตมอันโดรเมดาอินทิกรัล
    พอลิเมอร์เวก้าเมทริกซ์ออโรร่าเคอราติน พันธุศาสตร์สเกลาร์
    แกนีมีดฟลูออเรสเซนซ์เมทริกซ์ อันโดรเมดา พันธุศาสตร์คอนดักเตอร์ไคโตซาน
    ฟอสซิล เคอราตินไดออกไซด์ไดนามิกไซบอร์ก อะซีโตนดอปเพลอร์อัลตราซาวนด์
    เมลามีนไฮดรอกไซด์แคสสินี ซิริอุส ควอนตัมคอปเปอร์ คอนดักเตอร์
    ฟลูออไรด์จุลชีววิทยาอัลตราซาวด์ ออกเทนเอ็กซ์โพเนนเชียลแอนดรอยด์ออกเทน
    โครมาโทกราฟีเพอร์ออกไซด์โมเมนตัมเนกาตีฟอะลูมินา
  </p>
</main>

@font-face {
  font-family: "Noto Sans Thai";
  font-style: normal;
  font-weight: 400;
  src: url("https://cdn.lazywasabi.net/fonts/NotoSansThai/NotoSansThai-Regular.woff2")
      format("woff2"),
    url("https://cdn.lazywasabi.net/fonts/NotoSansThai/NotoSansThai-Regular.woff")
      format("woff");
}

@font-face {
  font-family: "Noto Sans Thai";
  font-style: normal;
  font-weight: 700;
  src: url("https://cdn.lazywasabi.net/fonts/NotoSansThai/NotoSansThai-Bold.woff2")
      format("woff2"),
    url("https://cdn.lazywasabi.net/fonts/NotoSansThai/NotoSansThai-Bold.woff")
      format("woff");
}

@font-face {
  font-family: "Noto Serif Thai";
  font-style: normal;
  font-weight: 400;
  src: url("https://cdn.lazywasabi.net/fonts/NotoSerifThai/NotoSerifThai-Regular.woff2")
      format("woff2"),
    url("https://cdn.lazywasabi.net/fonts/NotoSerifThai/NotoSerifThai-Regular.woff")
      format("woff");
}

@font-face {
  font-family: "Noto Serif Thai";
  font-style: normal;
  font-weight: 700;
  src: url("https://cdn.lazywasabi.net/fonts/NotoSerifThai/NotoSerifThai-Bold.woff2")
      format("woff2"),
    url("https://cdn.lazywasabi.net/fonts/NotoSerifThai/NotoSerifThai-Bold.woff")
      format("woff");
}

body {
  font-family: "Noto Sans Thai", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
    "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body.serif {
  font-family: "Noto Serif Thai", Lora, Georgia, Cambria, "Times New Roman",
    Times, serif;
}

textarea {
  height: 8.8em;
}

textarea::placeholder {
  color: #212121;
}

a {
  cursor: pointer;
}

a.active {
  font-weight: bold;
}

var body = document.body;
var fontSans = document.querySelector(".font-sans");
var fontSerif = document.querySelector(".font-serif");

function notoSerif() {
  body.classList.add("serif");
  fontSerif.classList.add("active");
  fontSans.classList.remove("active");
}

function notoSans() {
  body.classList.remove("serif");
  fontSerif.classList.remove("active");
  fontSans.classList.add("active");
}