ระยองเว็บ & โฮสต์

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

ก็เลยเป็นเหตุให้ต้องใช้ @font-face ซึ่งก็ไม่ได้ยากเย็นอะไรมากมาย … มาลองดูกันว่าเค้าทำกันยังไง

• อันดับแรกสร้างโฟลเดอร์ font ที่โฮสต์ของเรา เอาไว้ก่อนเลย เดี๋ยวจะเอา font งามๆ เก็บไว้ในนี้ (ใครไม่รู้จะทำไง ลองโหลด  FileZilla มาติดตั้งใช้งานดูนะ )
• จากนั้นทำการสร้างไฟล์  font เพื่อใช้งานบนเว็บก่อน โดยที่ FontSquirrel มีเครื่องมือสร้าง font ง่ายนิดเดียว  ลิงค์นี้เลยค่ะ http://www.fontsquirrel.com/fontface/generator
• จากนั้นก็ทำตามขั้นตอนดังภาพข้างล่างนี้นะคะ

• จะได้ไฟล์ zip มา 1 ไฟล์ ทำการแตกไฟล์ซะ  แล้ว upload ไฟล์ทั้งหลายที่ได้มา ไปไว้บน host ในโฟลเดอร์ font ที่สร้างเตรียมไว้ตอนแรก
• ทำการแก้ไขไฟล์ที่ชื่อ stylesheet.css โดยเปลี่ยน path ของไฟล์ให้ถูกต้อง แล้ว copy โค้ดทั้งหมด
• ไปที่แก้ไขธีม ทำการเพิ่ม code ที่ copy ไว้ลงไปใน stylesheet ของธีม
• ลองคลิก อัพเดทไฟล์  ถ้าฟอนต์ที่หน้าเว็บยังไม่เปลี่ยนแสดงว่าชื่อฟอนต์ที่ FontSquirrel genออกมาให้ไม่ตรงกับชื่อฟอนต์ที่เราใช้ตอนออกแบบ ก็เพียงแค่ไปแก้ไขชื่อฟอนต์ใน stylesheet ของธีมให้ตรงกับชื่อที่ FontSquirrel gen ให้มา  อัพเดทไฟล์ อีกที เท่านี้ก็เรียบร้อย