เอา font สวยๆมาใส่เว็บ

เอา font สวยๆมาใส่เว็บ

ต่อเนื่องมาจากบทความเดิม อีกเรื่องพื้นฐาน ของการทำเว็บ เรื่อง font เรื่อง font เนี่ยเหมือนเป็นเรื่องง่ายแต่ว่าความเป็นจริงไม่ง่ายเลย เพราะว่ารายละเอียดเยอะมาก และเป็นส่วนที่เกี่ยวข้องกับงาน design เลยยิ่งต้องดูรายละเอียดเพิ่มเข้าไปอีก

เริ่มต้นด้วยการหา font ที่ชอบ

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

อย่าลืมเรื่องลิขสิทธ์

ที่ต้องไม่ลืม ก็คือมองหา ลิขสิทธ์ หรือ license ใน font นั้นด้วย ว่าใครเป็นเจ้าของและเค้าอนุญาติให้เราเอาไปใช้ได้แค่ไหน เพราะว่ามีหลายแบบ ไม่ว่าจะใช้ฟรีโดยไม่มีเงื่อนไข หรือว่า ต้องเมล์ไปแจ้งชื่อเว็บก่อน หรือว่าต้องลง credit หรือว่าจ่ายเงินซื้อครับ แต่เรื่องซื้อ font เนี่ย เข้าใจว่าใครก็อยากใช้ฟรีนะครับ แต่ว่าการที่เราของคนอื่นมาใช้ได้โดยที่ไม่ต้องจ่ายเงิน ทั้งๆที่เค้าแจ้งไว้ว่าต้องจ่าย ก็เหมือนการแอบ copy  CD เพลง มาฟังโดยไม่จ่ายเงินซื้อนั่นล่ะครับ เรามองว่าเป็นเรื่องธรรมดา แต่อยากให้มองมุมกลับกันครับ ว่าเราเป็นคนทำเว็บ แล้วมีคน copy เว็บเราไปทำแล้วดังกว่า เราจะรู้สึกอย่างไรครับ? และการละเมิด มีความผิด ฟ้องร้องเก็บเงินได้นะครับ อย่าทำเป็นเล่นไป

หยุดปวดหัวกับ การเอา font มาใช้ในเว็บแบบยุ่งยาก

เพราะว่าผมไปเจอ solution มาครับ ที่จะให้เราเอา font สวยๆมาใส่เว็บเราได้ แล้วเค้ายังบอกว่าใช้ใน Internet explorer ได้ตั้งแต่ version 6 ขึ้นมาเลย ส่วน browser อื่นที่ใหม่กว่าไม่ต้องห่วงครับ เค้าใช้งานได้ปกติกันมาตั้งนานแล้ว ตามนี้เลยครับ

วิธีการสร้าง

  1. เปิดเว็บ http://www.fontsquirrel.com/fontface/generator แล้วกดปุ่ม add font (ปุ่มสีดำ) เพื่อ upload font ที่เราต้องการแสดงหน้าเว็บขึ้นไป (font ที่มีภาษาไทยใช้ได้ครับ)
  2. กดติ้กถูก หลัง Agreement
  3. กดปุ่ม Download your kit (จะมีปุ่มแสดงขึ้นมาหลังจากทำสองขั้นตอนแล้วเท่านั้น)

ผลลัพท์ที่ได้

ไฟล์ที่เรา download มา ในนั้นเราจะได้ตัวอย่างโค้ดหน้าเว็บ การติดตั้ง และตัวอย่าง font ที่แสดงผลบนหน้าเว็บ ซึ่งแน่นอนที่สุดครับ ว่าเราเอา browser ต่างๆลองทดสอบเปิดดูได้เลย ว่ามันแสดงผลได้จริงหรือไม่ เท่าที่ผมทดสอบ IE 7 8 , Firefox 3 ++ , Google Chrome ก็ใช้งานได้หมดนะครับ


ตัวอย่างข้างต้นนี้ผมใช้กับ font supermarket ครับ

เอาไปใส่เว็บ

ขั้นตอนไม่ยาก ทำตามขั้นตอนในหน้าสุดท้ายที่เค้าบอกเลยครับ ก็คือ

  1. upload ไฟล์ทั้งหมดขึ้นไป เว้นหน้า demo ไม่ต้อง upload ก็ได้
  2. เขียน css @font-face ตามตัวอย่าง 
  3. ลิ้งค์ css file ที่เค้าให้มา เข้าหน้าเว็บเราด้วย โค้ด <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
  4. เขียน css เรียก selector มาใช้ได้เลย

เท่านี้เองครับ ก็ใช้ได้แล้ว แนะนำให้ดูตัวอย่างในไฟล์ที่ download มาได้เลยครับ ที่หน้าสุดท้าย

ข้อเสีย

เอ่อ... เท่าที่ลองนิดๆหน่อยๆ ยังไม่เห็นข้อเสียที่ชัดเจนนะครับ แต่ว่าจะเห็นความแตกต่างระดับหนึ่ง ของการแสดง font ที่แตกต่างกันในแต่ละ browser ครับ แต่ว่าหลักๆก็จะยังเป็น font ตามที่เราสร้างนั่นแหล่ะครับ

สรุปเป็น solution ที่ work มาก ณ ตอนนี้นะครับ แต่หากว่าใครมีอะไรที่เจ๋งกว่า ก็มาแนะนำกันได้ครับ ย้ำกันอีกสักทีว่า font ที่ใช้ ให้มองหาลิขสิทธ์ด้วยนะครับ (มีทุกอันแน่นอน แต่ว่าบางอันอาจจะหายากหน่อย)

Create: Modify : 2011-12-21 23:57:44 Read : 17011 URL :