เว็บภาษาไทยมีเรื่องให้ดูเพิ่มจากการเลือกฟอนต์ที่หน้าตาเข้ากับเว็บครับ เพราะข้อความหนึ่งย่อหน้าอาจมีทั้งตัวอักษรไทย อังกฤษ ตัวเลข และสัญลักษณ์ ส่วนหัวข้อกับเนื้อหาก็อาจใช้ความหนาต่างกัน จึงมีไฟล์ฟอนต์เข้ามาเกี่ยวข้องได้หลายชุด
พอเห็นคำขอฟอนต์ใน Network เยอะ เราอาจอยากลบให้เหลือไฟล์เดียว แต่ก่อนทำแบบนั้นควรรู้ว่าแต่ละไฟล์ถูกใช้กับข้อความส่วนไหน และช่วงที่ฟอนต์ยังไม่พร้อมหน้าแสดงอะไรให้คนอ่านเห็น
โจทย์ไม่ได้มีเฉพาะลดน้ำหนักรวม ยังมีจังหวะที่ข้อความเริ่มอ่านได้และความเปลี่ยนแปลงของตำแหน่งหลังสลับฟอนต์ ซึ่งต้องดูร่วมกัน
ลองทำรายการว่าหัวข้อ เนื้อหา ปุ่ม และโค้ดใช้ตระกูลฟอนต์ใด น้ำหนักเท่าไร รวมถึงตัวเอียงหรือรูปแบบอื่นที่มี การตั้งหลาย family ไว้ใน CSS ไม่ได้แปลว่าเบราว์เซอร์ดาวน์โหลดทุกตัวทันที ต้องดูว่าหน้าใช้ style นั้นกับข้อความจริงหรือไม่
แต่ถ้ามี preload หรือเครื่องมือที่เตรียมไฟล์ไว้ให้ ก็อาจมีคำขอเกิดต่างจากการค้นพบตาม style ปกติ จึงควรตรวจคำขอที่เกิดจริงและตัวเริ่มของมัน ไม่สรุปจำนวนไฟล์จากจำนวน @font-face เพียงอย่างเดียว
การตรวจฟอนต์ที่ถูกใช้ควรทำกับข้อความไทยและอังกฤษที่อยู่ในหน้า ไม่ดูเพียงชื่อที่ตั้งใน font-family เพราะถ้าไฟล์ไม่มี glyph บางตัว เบราว์เซอร์อาจเลือกฟอนต์สำรองให้ตัวอักษรเหล่านั้นอยู่ แม้ย่อหน้าจะดูคล้ายใช้ตระกูลเดียวทั้งหมด
สำหรับตัวเลข หน่วย และชื่ออุปกรณ์ที่สลับภาษาบ่อย ลองดูเป็นชุดเดียวกับเนื้อหาจริง จะเห็นปัญหาเส้นฐาน ความสูง และจังหวะอ่านที่อาจไม่ปรากฏในหน้าทดลองที่มีคำไทยสั้นๆ เพียงบรรทัดเดียว
ฟอนต์สามารถแบ่งเป็น subset ตามอักขระที่ต้องใช้ได้ และใช้ unicode-range อธิบายช่วงที่เกี่ยวข้อง เพื่อให้เบราว์เซอร์เลือกโหลดส่วนที่จำเป็นต่อข้อความ กรณีนี้การมีไฟล์ย่อยมากไม่ได้แปลว่าทุกหน้าต้องโหลดทุกไฟล์
unicode-range ไม่ได้ตัดไฟล์ต้นฉบับให้เล็กลงเอง หากไฟล์ที่ URL ยังมีข้อมูลทั้งชุด ข้อมูลที่รับเมื่อขอนั้นก็ยังเป็นไฟล์เดิม ต้องมีขั้นสร้าง subset ที่เหมาะสมควบคู่กับการตั้งค่าด้วย
สำหรับภาษาไทยควรใช้เครื่องมือที่รักษาข้อมูล shaping และ glyph ที่ต้องทำงานร่วมกัน ไม่เลือกตัดเฉพาะตัวที่มองเห็นในบททดสอบแล้วถือว่าครอบคลุมบทความใหม่ทั้งหมด เพราะข้อความที่เพิ่มภายหลังอาจมีเครื่องหมายหรือรูปแบบที่ชุดเดิมไม่มี
ก่อนใช้ไฟล์ที่แปลงเอง ให้ตรวจสิทธิ์การนำมาใช้และการดัดแปลงตามใบอนุญาตของฟอนต์นั้นด้วย จากนั้นลองคำที่มีสระกับวรรณยุกต์หลายตำแหน่ง ไม่วัดแค่ขนาดไฟล์แล้วข้ามคุณภาพการแสดงผล
ถ้าเนื้อหาใช้ปกติกับตัวหนาเป็นหลัก อาจยังไม่จำเป็นต้องขอทุกน้ำหนักที่ family มี แต่ควรตรวจว่าตัดแล้วหน้าไม่ได้อาศัยน้ำหนักที่หายไปในส่วนเล็กๆ เช่น ป้ายชื่อหรือปุ่ม ซึ่งอาจถูกจำลองแทนโดยไม่ตั้งใจ
Variable font อาจรวมช่วงน้ำหนักไว้ในไฟล์เดียวได้ แต่ไม่ได้รับรองว่าเล็กกว่าชุด static ทุกสถานการณ์ ต้องเทียบไฟล์ที่ใช้จริงและจำนวนรูปแบบที่หน้าต้องการ ไม่ตัดสินจากจำนวน URL อย่างเดียว
การเลือกน้ำหนักเกี่ยวกับการอ่านด้วย โดยเฉพาะตัวเล็กบนมือถือ หากลดชุดฟอนต์จนต้องใช้ความหนาที่ไม่เหมาะกับเนื้อหา ก็ควรทบทวนรูปแบบหน้าแทนการถือว่าการลดไฟล์เป็นผลสำเร็จครบทุกด้านแล้ว
font-display กำหนดพฤติกรรมการแสดงผลตามความพร้อมของฟอนต์ เช่น การใช้ฟอนต์สำรองก่อนแล้วสลับภายหลัง ทางเลือกจึงมีทั้งเรื่องอ่านได้เร็วและความเปลี่ยนแปลงที่คนเห็นตอนฟอนต์จริงเข้ามา
หากเลือกให้สลับมาใช้ฟอนต์จริง ต้องตรวจความต่างของความกว้างกับความสูงบรรทัด เพราะหัวข้อที่เคยอยู่สองบรรทัดอาจกลายเป็นสาม และดันย่อหน้าด้านล่าง การบอกว่าใช้ swap แล้วจบจึงยังไม่ได้ตอบเรื่อง layout shift
ลองเลือก fallback ที่มีสัดส่วนใกล้กันและตรวจเทคนิคปรับ metric ตามการรองรับที่ต้องการ แต่ยังต้องลองกับข้อความไทยหลายความยาวจริงๆ การตั้งค่าที่ดูพอดีในอังกฤษอาจไม่พอดีกับการตัดบรรทัดของบทความไทย
ส่วนการเลือกนโยบายที่ยอมใช้ fallback ต่อในบางรอบก็ควรเป็นการตัดสินใจด้านหน้าตาที่ตั้งใจไว้ ไม่ใช่ความผิดพลาดที่คนทำเว็บไม่รู้ว่าฟอนต์จริงไม่เคยถูกแสดงในสภาพนั้นเลย
ฟอนต์จะถูกค้นพบผ่าน style ที่เกี่ยวข้อง จึงควรดูว่า stylesheet มาช้าหรือมีลำดับรอเพิ่มอยู่หรือไม่ การ preload ไฟล์สำคัญอาจช่วยบางกรณี แต่ก็ใช้ทรัพยากรร่วมกับภาพและไฟล์อื่นของหน้า
ถ้า preload หลาย subset กับหลายความหนาไว้ทั้งหมด เราอาจบังคับให้โหลดของที่หน้าไม่ได้ใช้ จึงควรเริ่มจากข้อความในพื้นที่แรกที่สำคัญและดูผลจริงก่อนเพิ่ม ส่วนการเก็บฟอนต์เองกับใช้ผู้ให้บริการภายนอกก็ต้องเทียบการส่งไฟล์และการตั้งแคชของชุดนั้น ไม่รับรองว่าทางใดเร็วกว่าเสมอ
หลังแก้ เปิดหน้าทั้งรอบที่ยังไม่มีแคชและรอบกลับมาอ่าน ดูเวลาเห็นข้อความ คำขอที่เกิดจริง และการตัดบรรทัดก่อนหลังฟอนต์พร้อม โดยเก็บเงื่อนไขไว้ ภาพในบทนี้เป็นแผนการตรวจ ไม่มี waterfall หรือผลความเร็วจากเว็บจริง
อีกกรณีที่ควรเก็บไว้ตรวจคือฟอนต์โหลดไม่สำเร็จ ไม่ว่าจะเพราะ URL ผิดหรือบริการปลายทางขัดข้อง หน้าใช้ fallback แล้วควรยังอ่านเนื้อหาและกดปุ่มได้ตามหน้าที่ ไม่ทำให้กล่องข้อความเตี้ยจนตัดสระหรือวรรณยุกต์ในชุดสำรองที่ระบบเลือกมา
หากเว็บมีช่องให้ผู้ใช้กรอกข้อความ ให้ลองข้อมูลที่ไม่ได้อยู่ในบทตัวอย่างด้วย เช่น ชื่อไทยยาวกับตัวเลขติดกัน การเตรียม subset จากข้อความคงที่ของหน้าเดียวอาจไม่พอกับข้อมูลที่เข้ามาภายหลัง จึงต้องเลือกขอบเขตการตัดตามหน้าที่ของแต่ละส่วน
การจัดฟอนต์ไทยให้โหลดเหมาะกับหน้าเริ่มจากรู้ว่าข้อความใช้อักขระและน้ำหนักอะไร แล้วดูทั้ง subset ทางส่งไฟล์ และช่วงรอฟอนต์ การลดคำขอควรรักษา glyph กับคุณภาพการอ่านไว้ พร้อมตรวจการสลับฟอนต์และตำแหน่งข้อความ เมื่อเห็นงานที่หน้าใช้จริงจึงค่อยเลือกสิ่งที่ควรโหลดก่อนและสิ่งที่ตัดออกได้ครับ