Google Font API คืออะไร?
เมื่อก่อน ถ้าเราจะใช้ฟ้อนต์แปลก ๆ บนเว็บ แล้วเครื่องของคนเข้าชมเว็บไซต์เราไม่มีฟ้อนต์นั้น เค้าก็จะมองไม่เห็น ซึ่งทำให้เว็บดีไซเนอร์ต้องไปเขียนตัวอักษรใส่รูปแล้วเอามาแปะแทน แต่หลัง ๆ มานี้ก็มีวิธีที่จะเอาฟ้อนต์แปลก ๆ พวกนั้นมาใช้ในเว็บไซต์เราออกมาหลายวิธี การใช้เช่น Javascript ของGoogle Font API
สำหรับวิธีอื่น ๆ ก็เช่น การใช้ Flash (siFR), Javascript (Cufon) หรือแม้แต่ CSS3 ก็สามารถใช้ @font-face ได้เช่นกัน โดยแต่ละวิธีจะมีข้อดีข้อเสียแตกต่างกัน เช่น ในด้านความเร็ว หรือในด้านบราวเซอร์ที่รองรับ
ข้อดีของ Google Font API คืออะไร
- ฟรี ใช้ได้ง่าย ไม่ต้องยุ่งกับโค้ดมาก
เว็บดีไซเนอร์มักจะไม่ถูกโรคกับโค้ดครับ เพราะฉะนั้น Google Font API จะเหมาะกับดีไซเนอร์มาก เพราะแค่ก็อปแปะโค้ดก็เสร็จแล้ว
- ฟ้อนต์เป็น Open source
ทำให้สามารถใช้บริการนี้ได้ฟรีทั้งในเว็บส่วนตัว หรือเว็บที่หากำไรครับ
- บราวเซอร์รองรับเยอะ แม้แต่ IE6 ก็รองรับ
ทำให้การใช้ Google Font API ไม่ต้องกลัวว่าแต่ละบราวเซอร์จะแสดงผลไม่เหมือนกัน โดยบราวเซอร์ที่รองรับ คือ:
Chrome 4.2+, Firefox 3.5+, Safari 3.1+, Opera 10.5+, Internet Explorer 6+
- ใช้ CSS แต่งฟ้อนต์ที่เรียกมาใช้ได้
แต่งฟ้อนต์ด้วย CSS อย่าง text-shadow หรือคำสั่งอื่น ๆ ก็ทำได้ไม่มีปัญหา
- ประหยัด Bandwidth ที่ใช้ เพิ่มความเร็วในการโหลดฟ้อนต์
เทคนิคแทนฟ้อนต์อื่น ๆ ส่วนใหญ่ต้องโฮสต์ไฟล์ฟ้อนต์เองครับ แต่บริการนี้กูเกิ้ลโฮสต์ไฟล์ให้เราเลย มีระบบแคชฟ้อนต์ด้วย แถมโฮสต์ของกูเกิ้ลก็เร็วอีก ดีกว่าโฮสต์ไฟล์ฟ้อนต์ไว้เองเยอะเลยครับ
วิธีใส่ Google Font API ในเว็บไซด์
สำหรับวิธีใส่ฟ้อนต์จากกูเกิ้ลในเว็บไซต์เราก็ไม่ยากเลยครับ ขอแค่มีความรู้ CSS นิดหน่อยก็พอครับ
แต่สำหรับคนที่ไม่มีพื้นฐาน CSS หรือ HTML เลย สามารถใช้เครื่องมือ Font Preview เพื่อทดสอบและสร้างโค้ดไว้ไปแปะบนหน้าเว็บไซต์ได้เลยครับ (คนที่รู้ CSS จะไปใช้ก็ได้นะครับ แต่ถ้าอยากลองใส่เองก็อ่านต่อเลย)
มาดูกันเลยดีกว่าว่าวิธีใช้ฟ้อนต์จาก Google Font API ทำอย่างไร:
1. เลือกฟ้อนต์ที่ต้องการใช้จาก Google Font Directory โดยการคลิกบนฟ้อนต์นั้น ๆ
ฟ้อนต์ยังมีไม่เยอะครับ ถ้าอยากได้แบบมีฟ้อนต์ให้เลือกเยอะ ๆ ลองไปใช้บริการเสียตังค์ของ Typekit ดูนะครับ
2. หน้ารายละเอียดฟ้อนต์จะโผล่ขึ้นมา คลิกที่แท็บ “Get The Code” สีน้ำเงิน อยู่ใต้โลโก้สีเหลือง
หน้านี้จะบอกชื่อคนดีไซน์ ชื่อฟ้อนต์ ขนาดไฟล์ (ส่วนใหญ่จะเบามาก เพราะถูกบีบอัดแล้ว)
3. ก็อปปี้โค้ดในกล่องแรกสุด ใต้หัวข้อ “Embed the font into your page” ไปใส่ใต้แท็ก <head> ในเว็บไซต์คุณ
ตัวอย่างเช่น ผมใช้ฟ้อนต์ชื่อ Reenie Beanie ก็จะต้องก็อปปี้โค้ดแบบนี้ครับ
<link href='http://fonts.googleapis.com/css?family=<strong>Reenie+Beanie</strong>' rel='stylesheet' type='text/css'>
แค่นี้ ตอนโหลดหน้าเว็บไซต์ ก็จะมีการโหลดฟ้อนต์นี้ขึ้นมาเพื่อให้พร้อมใช้งานแล้ว
4. เรียกฟ้อนต์มาใช้ผ่าน CSS
แค่กำหนดชื่อฟ้อนต์ที่เราเลือกใน font-family ก็ใช้งานได้แล้วครับ ลองดูตัวอย่างด้านล่าง
h1 { font-family: 'Reenie Beanie', arial, serif; }
โค้ดนี้จะใช้ฟ้อนต์ Reenie Beanie กับแท็ก H1 ครับ ซึ่งจะเห็นว่ามีการตั้งฟ้อนต์ไว้ 3 อัน คือ Reenie Beanie, arial, และ serif
การตั้งแบบนี้ CSS จะเรียกใช้จากซ้ายไปขวาครับ ถ้าหาฟ้อนต์แรกไม่เจอก็จะไปโหลดฟ้อนต์สอง (Arial) และถ้าหาฟ้อนต์สองไม่เจอก็จะไปเรียกฟ้อนต์ที่สาม (Serif) สำหรับในFirefox ระหว่างที่โหลดไฟล์ฟ้อนต์จาก Google Font API มาแสดงผล ก็จะแสดงฟ้อนต์ Arial ก่อนครับ
แหล่งที่มา : http://www.softmelt.com/article.php?id=526