เลือกฟอนต์:
<a class="active font-unlooped" onclick="unlooped()">- IBM Plex Thai</a>
<a class="font-looped" onclick="looped()">- IBM Plex Thai Looped</a>

# ฉันเฝ้าดูพายุ มันทั้งสวยงามและน่ากลัว

ขณะที่ฉันเดินต่อไป ด้วยความเร็วที่เพิ่มขึ้น จังหวะของกลางคืนและกลางวันเริ่มรวมกันเป็นสีเทาที่ต่อเนื่อง ท้องฟ้าเปลี่ยนเป็นสีน้ำเงินที่ล้ำลึกอย่างวิเศษ สีงดงามแจ่มจรัสราวแสงยามพลบค่ำ ดวงอาทิตย์สั่นไหวกลายเป็นเส้นสีเพลิง ซุ้มประตูแสนงดงามในอวกาศ ดวงจันทร์เป็นวงกระเพื่อมสีจางๆ และฉันไม่เห็นดวงดาวเลย

มันเป็นการเดินทางที่ยอดเยี่ยมจริงๆ ฉันได้พบกับผู้คนมากมายที่เมื่อได้รู้จักแล้วจะรัก แต่จะไม่ได้พบเจออีก เพราะชีวิตที่มีพื้นที่ไม่เพียงพอ และแต่ละคนต้องทำหน้าที่ของตนเองในการดูแลความมั่นคงและความอยู่ดีมีสุขของฐาน กระนั้นก็ตามจากทุกที่ๆ ฉันได้พบ เราได้เดินทางมาไกลเสมอมา มีสถานที่มากมายเป็นล้านแห่งแต่กลับมีเวลาเพียงไม่กี่ปี

<textarea rows="5" placeholder="พิมพ์ข้อความที่นี่เพื่อทดสอบ"></textarea>

ตัวอย่างฟอนต์ [IBM Plex Thai](https://www.ibm.com/plex/) - สร้างโดย [PAKIN.ME](https://pakin.me/)
<small>ข้อความตัวอย่างจาก <a href="https://fonts.google.com/">Google Fonts</a></small>
View Compiled
@font-face {
  font-family: "IBM Plex Thai";
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: url("https://fonts-cdn.pakin.me/fonts/IBMPlexThai/IBMPlexThai-Regular.woff2")
      format("woff2"),
    url("https://fonts-cdn.pakin.me/fonts/IBMPlexThai/IBMPlexThai-Regular.woff")
      format("woff");
}

@font-face {
  font-family: "IBM Plex Thai";
  font-display: swap;
  font-style: normal;
  font-weight: 700;
  src: url("https://fonts-cdn.pakin.me/fonts/IBMPlexThai/IBMPlexThai-Bold.woff2")
      format("woff2"),
    url("https://fonts-cdn.pakin.me/fonts/IBMPlexThai/IBMPlexThai-Bold.woff")
      format("woff");
}

@font-face {
  font-family: "IBM Plex Thai Looped";
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: url("https://fonts-cdn.pakin.me/fonts/IBMPlexThaiLooped/IBMPlexThaiLooped-Regular.woff2")
      format("woff2"),
    url("https://fonts-cdn.pakin.me/fonts/IBMPlexThaiLooped/IBMPlexThaiLooped-Regular.woff")
      format("woff");
}

@font-face {
  font-family: "IBM Plex Thai Looped";
  font-display: swap;
  font-style: normal;
  font-weight: 700;
  src: url("https://fonts-cdn.pakin.me/fonts/IBMPlexThaiLooped/IBMPlexThaiLooped-Bold.woff2")
      format("woff2"),
    url("https://fonts-cdn.pakin.me/fonts/IBMPlexThaiLooped/IBMPlexThaiLooped-Bold.woff")
      format("woff");
}

::placeholder {
  color: white;
  opacity: 0.75;
}

::selection {
  background-color: white;
  color: black;
}

html {
  font-size: 16px;
}

body,
textarea {
  background: #2094f3;
  color: white;
  font-family: "IBM Plex Thai", system-ui, sans-serif;
  font-size: 1.2rem;
  line-height: 1.4;
  padding: .75em;
  max-width: 40rem;
  margin: 0 auto;
}

body.looped,
body.looped textarea {
  font-family: "IBM Plex Thai Looped", system-ui, sans-serif;
}

a {
  color: white;
  cursor: pointer;
  text-decoration: none;
  font-style: italic;
}

a.active {
  font-weight: bold;
}

textarea {
  padding: 5%;
  width: 90%;
  border: 2px solid white;
  outline: none;
  resize: none;
}
body = document.body;
fontLooped = document.querySelector(".font-looped");
fontUnlooped = document.querySelector(".font-unlooped");

function looped() {
  body.classList.add("looped");
  fontLooped.classList.add("active");
  fontUnlooped.classList.remove("active");
}

function unlooped() {
  body.classList.remove("looped");
  fontLooped.classList.remove("active");
  fontUnlooped.classList.add("active");
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.