วิธีเพิ่มฟอนต์ที่กำหนดเองใน Joomla

การเพิ่มฟอนต์ที่กำหนดเองใน Joomla ทำได้โดยนำไฟล์ฟอนต์ขึ้นเว็บไซต์ แล้วกำหนด CSS ด้วย @font-face จากนั้นระบุให้ส่วนที่ต้องการ เช่น เนื้อหา หัวข้อ หรือเมนู ใช้ฟอนต์นั้น วิธีนี้เหมาะเมื่อเทมเพลตไม่มีตัวเลือกฟอนต์ที่ต้องการ และควรใช้ไฟล์ฟอนต์ที่มีสิทธิ์ใช้งานบนเว็บไซต์แล้ว

❶ เตรียมไฟล์ฟอนต์และตรวจสิทธิ์การใช้งาน

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

① เลือกรูปแบบไฟล์ที่เหมาะสม

แนะนำให้ใช้ไฟล์ฟอนต์รูปแบบ WOFF2 หากมี เพราะออกแบบมาสำหรับเว็บและมีขนาดไฟล์เล็ก หากต้องรองรับเบราว์เซอร์รุ่นเก่าหรือข้อกำหนดเฉพาะ อาจเตรียม WOFF เพิ่มด้วย

จัดไฟล์ให้เข้าใจง่าย เช่น แยกโฟลเดอร์ fonts ไว้ในพื้นที่ไฟล์ของเทมเพลต หรือในตำแหน่งไฟล์กำหนดเองที่เทมเพลตรองรับ หลีกเลี่ยงการวางไฟล์กระจัดกระจายจนไม่รู้ว่า CSS อ้างถึงตำแหน่งใด

② เตรียมไฟล์แยกตามน้ำหนักตัวอักษร

หากมีไฟล์หลายระดับ เช่น น้ำหนักปกติและตัวหนา ให้เตรียมแต่ละไฟล์ให้ตรงกับน้ำหนักจริง เช่น regular และ bold อย่ากำหนดไฟล์น้ำหนักปกติให้เป็นตัวหนา เพราะเบราว์เซอร์อาจแสดงผลไม่ตรงกับที่ออกแบบไว้

③ สำรองข้อมูลก่อนแก้ไข

ก่อนแก้ไฟล์ CSS หรือเพิ่มไฟล์ในเทมเพลต ให้สำรองไฟล์เดิมไว้ก่อน หากใช้งานเว็บไซต์จริง ควรทดสอบบนสำเนาเว็บไซต์หรือช่วงเวลาที่ผู้เข้าชมไม่มาก เพื่อให้ย้อนกลับได้หากหน้าเว็บแสดงผลผิดปกติ

❷ อัปโหลดฟอนต์และกำหนดค่า CSS

อัปโหลดไฟล์ฟอนต์ผ่านเครื่องมือจัดการไฟล์ของโฮสติ้ง หรือเครื่องมือแก้ไขไฟล์ของเทมเพลต หากเวอร์ชันและเทมเพลตที่ใช้รองรับ เมื่ออัปโหลดแล้วให้จดตำแหน่งไฟล์ไว้ เพราะต้องนำไปอ้างอิงใน CSS

① เพิ่มกฎ @font-face

เปิดไฟล์ CSS กำหนดเองของเทมเพลต แล้วเพิ่มตัวอย่างโค้ดนี้ โดยปรับชื่อไฟล์และตำแหน่งให้ตรงกับเว็บไซต์จริง

@font-face {
  font-family: "MyThaiFont";
  src: url("../fonts/my-thai-font-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "MyThaiFont";
  src: url("../fonts/my-thai-font-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

ค่า font-family คือชื่อที่ใช้เรียกฟอนต์ใน CSS ส่วน src ต้องชี้ไปยังตำแหน่งไฟล์จริง พาธตัวอย่างข้างต้นเป็นเพียงแนวทาง หาก CSS อยู่คนละโฟลเดอร์ ต้องปรับจำนวน ../ หรือใช้พาธที่เทมเพลตรองรับ

② กำหนดให้เว็บไซต์ใช้ฟอนต์

เมื่อประกาศฟอนต์แล้ว ให้ระบุใน CSS ว่าต้องการใช้กับส่วนใด ตัวอย่างต่อไปนี้ใช้กับข้อความทั่วไปและหัวข้อ:

body {
  font-family: "MyThaiFont", sans-serif;
}

h1,
h2,
h3 {
  font-family: "MyThaiFont", sans-serif;
  font-weight: 700;
}

หากต้องการเปลี่ยนเฉพาะเมนูหรือบางโมดูล ให้ใช้ตัวเลือก CSS ของส่วนนั้นแทนการกำหนดกับ body ทั้งเว็บไซต์ การกำหนดขอบเขตให้ชัดช่วยลดผลกระทบต่อองค์ประกอบอื่น

③ ใช้ไฟล์ CSS กำหนดเองของเทมเพลต

หากเทมเพลตมีช่อง Custom CSS หรือมีไฟล์ CSS สำหรับปรับแต่ง ให้ใส่กฎไว้ที่นั่นก่อนแก้ไฟล์หลักของเทมเพลต ใน Cassiopeia สามารถใช้ไฟล์ user.css สำหรับ CSS ที่เพิ่มเองได้ ส่วนเทมเพลตอื่นให้ตรวจคู่มือของผู้พัฒนา เพราะชื่อไฟล์และวิธีโหลด CSS อาจต่างกัน

การแก้ไฟล์หลักของเทมเพลตโดยตรงอาจทำให้การเปลี่ยนแปลงหายเมื่ออัปเดต หากจำเป็นต้องแก้ไฟล์ ให้เก็บสำเนาเดิมและจดบันทึกตำแหน่งที่แก้ไว้

❸ ตรวจสอบฟอนต์บนเว็บไซต์

หลังบันทึก CSS แล้ว ให้เปิดหน้าเว็บไซต์และตรวจว่าฟอนต์แสดงผลถูกต้องทั้งภาษาไทยและภาษาอังกฤษ ทดสอบอย่างน้อยบนหน้าแรก หน้าบทความ และหน้าที่มีเมนูหรือโมดูลที่จัดรูปแบบต่างกัน

① ล้างแคชและโหลดหน้าใหม่

หากยังเห็นฟอนต์เดิม ให้ล้างแคชของ Joomla และเบราว์เซอร์ หากเว็บไซต์ใช้แคชจากโฮสติ้งหรือ CDN ให้ล้างแคชส่วนนั้นด้วย แล้วเปิดหน้าเว็บใหม่

② ตรวจว่าพาธไฟล์ถูกต้อง

เปิดเครื่องมือสำหรับนักพัฒนาในเบราว์เซอร์ แล้วดูแท็บ Network หรือ Console หากพบข้อผิดพลาด 404 แสดงว่าเบราว์เซอร์หาไฟล์ฟอนต์ไม่พบ ให้ตรวจชื่อไฟล์ ตัวพิมพ์เล็กใหญ่ และพาธใน url(...)

ถ้าไม่พบข้อผิดพลาดแต่ฟอนต์ยังไม่เปลี่ยน ให้ตรวจว่า CSS กำหนด font-family กับองค์ประกอบที่ถูกต้องหรือไม่ และมี CSS กฎอื่นที่มีลำดับความสำคัญสูงกว่าทับอยู่หรือเปล่า

③ ตรวจการแสดงผลบนมือถือ

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

❹ แก้ปัญหาที่พบบ่อยและดูแลฟอนต์ให้เหมาะสม

ถ้าฟอนต์ไม่แสดง ให้ไล่ตรวจจากจุดที่แก้ได้ง่ายก่อน ได้แก่ ตำแหน่งไฟล์ ชื่อไฟล์ พาธ CSS และแคช หากไฟล์ถูกโหลดแต่ตัวอักษรบางภาษาไม่แสดง อาจเป็นเพราะไฟล์ฟอนต์ไม่มีชุดอักขระภาษานั้น

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

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