ทุกวันนี้ปฏิเสธไม่ได้ว่า หนึ่งในฟอนต์ไอคอนที่เป็นที่นิยมชมชอบของเรา Web Developer ทั้งหลายก็คือ Font Awesome นะครับ ด้วยคุณสมบัติของตัวหนังสือที่มีหน้าตาเป็นไอคอน สามารถทดแทนการใช้ไฟล์รูปได้อย่างสมบูรณ์แบบเลยทีเดียว แถมยังใช้ง่ายกว่ามาก ๆ ทำให้เว็บหลายต่อหลายเว็บหยิบเจ้าตัวนี้ไปใช้กันอย่างสนุกสนานเลย

ทว่าต่อมา ผมเองก็ไม่ได้ตามลงลึกอะไรเกี่ยวกับเบราเซอร์นักหรอกครับ แต่เหมือนการดึงฟอนต์มาใช้จากระยะไกลอย่าง CDN นั้น ได้กลายเป็นปัญหาด้านความปลอดภัย เบราเซอร์ยอดนิยมทั้งหลายจึงเริ่มปิดไม่ให้มีการทำแบบนี้ ส่งผลให้เว็บหลายเว็บที่ใช้ Font Awesome ผ่าน CDN นั้นประสบปัญหา ไอคอนกลายเป็นสี่เหลี่ยมไปซะอย่างนั้น เหตุที่เป็นเช่นนั้นก็เพราะเบราเซอร์ไม่ยอมดึงไฟล์ฟอนต์จากระยะไกลมาใช้นั่นเอง ทำให้หน้าเว็บแสดงผลผิดพลาดไป

หลังจากปัญหานี้กระจายออกไปทุกซอกทุกมุมของเว็บทั่วโลก ทำให้คนค้นวิธีแก้ปัญหาต่าง ๆ มากมาย โดยหนึ่งในวิธีแก้ปัญหาก็คือการเข้าไปกำหนดค่าใน .htaccess ในเซิร์ฟเวอร์ เพื่อยอมให้เว็บสามารถดึงฟอนต์จากระยะไกลได้เหมือนเดิม ซึ่งวิธีนี้ผมไม่เคยทำสำเร็จเลยละ ดังนั้นวิธีแก้ปัญหาที่ง่ายที่สุดก็คือการโหลดไฟล์ Font Awesome มาเก็บไว้ในเว็บตัวเอง แล้วเรียกใช้เอง ซึ่งแบบนี้ไม่มีอะไรผิดพลาดแน่นอน

ทว่าในที่สุดผมก็เจอวิธีการแก้ปัญหาที่ง่ายที่สุดในการใช้ CDN กับ Font Awesome ทุกรูปแบบ แน่นอนว่าสามารถแก้ปัญหากับฟอนต์อื่น ๆ ทั่ว ๆ ไปที่ดึงมาจากแหล่งอื่นด้วย แต่ก่อนจะไปชมวิธีแก้ ต้องขอเกริ่นอีกนิดนึงว่า โดยปกติแล้วเมื่อเราต้องการใช้งาน CDN เว็บฟอนต์จะแนะนำให้เราแทรกลิงก์ประมาณนี้เข้าไป

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

จะสังเกตว่า ลิงก์หน้าสุดจะไม่มีกำกับว่าเป็น http หรือ https เพราะต้องการให้เบราเซอร์เลือกเองว่าจะดึงแบบไหน ตามตัวเว็บของเรา เช่นถ้าเว็บเราไม่เข้ารหัสเป็นแค่ http ธรรมดา เบราเซอร์ก็จะใช้แบบ http

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

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css rel="stylesheet">

ย้ำว่า https ด้วยนะครับ http ไม่ได้นะ สำหรับเหตุผลทางเทคนิก ผมคงอธิบายไม่ได้เพราะผมก็ยังไม่ได้เข้าใจในเรื่องนี้ลึกซึ้งมากพอ แต่ยังไงลองดูครับ ถ้าเว็บท่านใช้ Font Awesome หรือฟอนต์อะไรอื่น ๆ อยู่แล้วมีปัญหา วิธีนี้อาจจะช่วยชีวิตท่านได้นะครับ