วันก่อนเห็นข่าว Google ปล่อยฟอนต์ที่สามารถแก้ปัญหาไม่แสดงตัวอักษรเมื่อฟอนต์ใดฟอนต์หนึ่งไม่รองรับหรือที่เรียกว่าตัวเต้าหู้ (ตัวช่องสี่เหลี่ยม) โดยตั้งชื่อว่า Noto (No tofu – ไม่มีตัวเต้าหู้) แบบว่าฟอนต์เดียวรองรับทุกภาษาเลยว่างั้น แต่ถ้าจะรองรับทุกภาษาจริง ๆ ก็ต้องโหลดไฟล์ขนาดใหญ่พอสมควรอยู่ดีแหละ งั้นวันนี้เลยจะขอแนะนำและแอบนำมาใช้ในบล็อกนี้แล้วด้วย
ที่จะแนะนำก็คือฟอนต์ Noto ที่เป็นภาคภาษาไทยนั่นแหละ เพราะเห็นว่าสวยดี ดูได้ที่นี่ เลย Noto Sans Thai
ภาษาที่รองรับ
- Northern Khmer
- Kuy
- Eastern Lawa
- Western Lawa
- Pali (Thai script)
- Northeastern Thai
- Southern Thai
- Thai
นำไปใช้
มองหาไฟล์ stylesheet ของเว็บไซต์แล้วใส่ code ตามด้านล่าง โดยให้ในตัวผมวางไฟล์ style.css ไว้ในระดับเดียวกับโฟลเดอร์ fonts ซึ่งข้างในจะมีไฟล์ฟอนต์อยู่
/* ตัวหนา */
@font-face {
font-family: 'noto_sans_thai';
src: url('fonts/notosansthai-bold-webfont.eot');
src: url('fonts/notosansthai-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/notosansthai-bold-webfont.woff2') format('woff2'),
url('fonts/notosansthai-bold-webfont.woff') format('woff'),
url('fonts/notosansthai-bold-webfont.ttf') format('truetype'),
url('fonts/notosansthai-bold-webfont.svg#noto_sans_thaibold') format('svg');
font-weight: bold;
font-style: normal;
}
/* ตัวปกติ */
@font-face {
font-family: 'noto_sans_thai';
src: url('fonts/notosansthai-regular-webfont.eot');
src: url('fonts/notosansthai-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/notosansthai-regular-webfont.woff2') format('woff2'),
url('fonts/notosansthai-regular-webfont.woff') format('woff'),
url('fonts/notosansthai-regular-webfont.ttf') format('truetype'),
url('fonts/notosansthai-regular-webfont.svg#noto_sans_thairegular') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-family: ‘noto_sans_thai’, sans-serif;
}
ดาวน์โหลด
ผมเตรียมไฟล์พร้อมใช้ให้แล้วตามไฟล์แนบด้านล่างครับ
