วิธีใช้ฟอนต์ไทยสลับกับฟอนต์อังกฤษ รวมกัน ในหน้าเว็บเดียว (CSS)

หลักการรวม Font ภาษาอังกฤษ และภาษาไทยรวมกัน โดยให้ระบบ Identify ว่าอักขระนี้เป็นภาษาไทยหรือภาษาอังกฤษ และดึงฟอนต์มาแสดงตามภาษานั้น ๆ ทำได้ดังต่อไปนี้ครับ

Step 1: ดึงฟอนต์มาทั้ง 2 ภาษา

สมมุติว่าผมจะใช้ Font Roboto สำหรับภาษาอังกฤษและ Noto Sans Thai สำหรับภาษาไทย โดยที่ผมดึง Font มาแล้วในเว็บโดยทำแบบ Local (มีไฟล์ฟอนต์จริง ๆ โดยที่ไม่ดึงโดยตรงจาก Google Fonts) มาด้วยโค้ดประมาณนี้ครับ โดยใส่ไว้ในไฟล์ css หลักของผม โดยจะทำยังไงก็ได้นะครับ อันนี้เป็นตัวอย่าง บางท่านใช้ Plugin Wordpress ที่สามารถดึงได้โดยตรงไม่ต้องโค้ด ก็ได้นะครับ หรือบางท่านแปะ code Google Fonts เลย ถ้าดึงมาแล้วติดก็โอเคครับ

<!-- Load Font Roboto -->
@font-face {
  font-family: "Roboto";
  src: url('fonts/roboto/Roboto-Regular.eot');
  src: url('fonts/roboto/Roboto-Regular.eot') format('embedded-opentype'),
       url('fonts/roboto/Roboto-Regular.woff2') format('woff2'),
       url('fonts/roboto/Roboto-Regular.woff') format('woff'),
       url('fonts/roboto/Roboto-Regular.ttf') format('truetype');
}
<!-- Load Font Noto Sans Thai -->
@font-face {
  font-family: "noto-sans-thai";
  src: url('fonts/notosansthai/notosansthai-Regular.eot');
  src: url('fonts/notosansthai/notosansthai-Regular.eot') format('embedded-opentype'),
       url('fonts/notosansthai/notosansthai-Regular.woff2') format('woff2'),
       url('fonts/notosansthai/notosansthai-Regular.woff') format('woff'),
       url('fonts/notosansthai/notosansthai-Regular.ttf') format('truetype');
}

Step 2: ดึงฟอนต์มาทั้ง 2 ภาษา

พอเว็บผมโหลดฟอนต์ Roboto และ Noto Sans Thai แล้ว ผมก็ดึงมาใช้งานโดยทำเป็น Font Face ครับ

@font-face {
    font-family: 'Roboto';
}
@font-face {
    font-family: 'noto-sans-thai';
    unicode-range: U+0E00–U+0E7F;
}

โดยจะสังเกตว่า @font-face อันที่สอง (noto-sans-thai) มีส่วนของ unicode-range เข้ามาเกี่ยวข้องด้วย นั่นคือย่านของภาษาไทยเราใน unicode นั่นเองครับ โดยเราเลือกให้ย่านนี้เป็นภาษาไทย และให้ apply font นี้เข้าไปครับ

Step 3: เอาไปใช้งาน

ดึงมาอย่างเดียวไม่พอครับ ต้องเอาไปใช้งานด้วยครับ โดยที่จะ apply กับ element ไหนก็ได้ครับเช่น body, p, h1, h2, h3 ฯลฯ ตามต้องการเลยครับ ขึ้นกับโครงสร้าง code ด้วยครับ แต่เพื่อให้เป็น universal ผมทำแบบนี้ครับ

h1, h2, h3, h4, h5, h6, a, button, input, b, strong, span, nav, p, body {
    font-family: 'Roboto', 'noto-sans-thai';
}

เท่านี้เป็นอันเสร็จพิธีครับ สามารถลองตรวจเช็คหน้าเว็บได้เลยนะครับว่าฟอนต์ไทยอังกฤษมาถูกต้องไหมครับ

👋จ้างทำเว็บไซต์ ที่ไหนดี?

Make2Web
รับทำเว็บไซต์
ปรับปรุงเว็บไซต์
สอบถามได้นะครับ

Line: @make2web อ่านรายละเอียด

บทความแนะนำ

อยากได้เว็บไซต์คุณภาพดี สวยงาม ทันสมัย โดดเด่นและมีเอกลักษณ์ มองหาผู้ให้บริการรับทำเว็บไซต์ รับทำเว็บบริษัท เว็บองค์กร รับออกแบบเว็บไซต์ ฝีมือดี Make2Web เรายินดีให้บริการ มั่นใจในประสบการณ์มากกว่า 8 ปี ยินดีให้คำปรึกษา ฟรี ตลอดระยะเวลาที่ผ่านมาเราให้บริการลูกค้ามาแล้วกว่า 1,000 ราย มีผลงานมาแล้วมากมาย สร้างความประทับใจให้กับลูกค้าทุกคน การันตีคุณจะได้เว็บไซต์ดีๆ กลับไปต่อยอดธุรกิจแน่นอน