30
May
2010

[Webdesign ETC] Google Font API คืออะไร ทำไมเว็บดีไซเนอร์ควรรู้จักไว้?

Google Font API

วันนี้ทางเว็บไซต์ DesignIL ของเราก็มีของใหม่มานำเสนออีกแล้วครับ หลังจากก่อนหน้านี้ได้เคยเขียนเรื่อง HTML5 และ CSS3 ไปแล้ว สำหรับบทความของ HTML5 จะแปลต่อเร็ว ๆ นี้แน่นอนครับ เนื่องจากผลตอบรับดีมาก ก็ต้องขอบคุณทุกท่านที่แวะมาคอมเม้นท์ด้วยครับผม

Google Font API เป็นบริการใหม่ของกูเกิ้ล ที่เพิ่งเริ่มให้บริการเมื่อต้นเดือนพฤษภาคม 2010 ครับ โดยเป็นบริการที่อนุญาตให้ ใช้ฟ้อนต์ที่โฮสต์อยู่บนกูเกิ้ลในเว็บไซต์เรา ครับ ระบบนี้ใช้ Javascript และ CSS ในการแสดงฟ้อนต์

บทความเกี่ยวกับ Google Font API อันนี้ ผมสรุปโดยเก็บข้อมูลมาจากทางหน้าเว็บของ API, บทสัมภาษณ์ทีมงาน Google Font, และบทความบน Designshack ครับผม ใครถนัดภาษาอังกฤษจะคลิกเข้าไปอ่านในนั้นก็ได้ครับ

Google Font API คืออะไร?

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

โดยเมื่อก่อน ถ้าเราจะใช้ฟ้อนต์แปลก ๆ บนเว็บ แล้วเครื่องของคนเข้าชมเว็บไซต์เราไม่มีฟ้อนต์นั้น เค้าก็จะมองไม่เห็น ซึ่งทำให้เว็บดีไซเนอร์ต้องไปเขียนตัวอักษรใส่รูปแล้วเอามาแปะแทน แต่หลัง ๆ มานี้ก็มีวิธีที่จะเอาฟ้อนต์แปลก ๆ พวกนั้นมาใช้ในเว็บไซต์เราออกมาหลายวิธี การใช้ 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

สามารถลองดูของจริงได้จาก หน้าทดสอบ Google Font API ครับผม

ตอนไม่มี Google Font API จะเป็นแบบนี้ (ใน Internet Explorer อาจไม่เห็นตัวอักษรหมุนครับ เพราะใช้ CSS3):

พอใส่ Google Font API แล้ว จะได้แบบนี้ครับ:

วิธีใส่ 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 ก่อนครับ

สรุปเกี่ยวกับ Google Font API

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

มีข้อสงสัยในการใช้งาน หรือสนใจพูดคุย แสดงความคิดเห็นเกี่ยวกับระบบนี้ ก็เชิญแวะมาคอมเม้นท์เลยครับ

หรือถ้าชอบบทความนี้ ก็รบกวน Retweet ด้วยครับผม ขอบคุณมากครับ ^^

About the author

เจ้าของเว็บไซต์ CodeNIL และ DesignIL. มีประสบการณ์ด้านการสร้างเกมส์ด้วย RPG Maker XP/VX และเขียนสคริปต์ RGSS/RGSS2 (Ruby) สำหรับใช้ในเกมส์. ปัจจุบันเป็นฟรีแลนซ์รับทำงานเว็บดีไซน์ และเขียน Web Application โดยใช้ XHTML/CSS/PHP/MySQL. กำลังศึกษาอยู่ที่คณะวิศวกรรมยานยนต์ จุฬาลงกรณ์มหาวิทยาลัย.

More at

บทความ Web Design น่าอ่าน

1 views
Tags: CSS, Fonts, google, javas, Javascript, open source, web design, สอนเว็บดีไซน์
โพสใน Basic, Coding, ETC, Javascript, Tutorial

http://twitter.com/gd_ab/status/15036265477 Thanat Suensilpong

RT @designil: [Webdesign ETC] Google Font API คืออะไร ทำไมเว็บดีไซเนอร์ควรรู้จักไว้? http://bit.ly/dxaCHE
http://armno.in.th แอ๋ม

ยังไม่ได้ลองเล่นเลยครับตัวนี้
ทีแรกกะจะลอง @font-face ดูก่อน เจอตัวนี้เหมือนจะใช้ง่ายกว่าแฮะ
keds

ขอบคุณนะค่ะ
มีสาระม๊ากมากค่ะ
ทำให้หนูฉลาดขึ้นเยอะม๊ากกก

ไปกินข้าวก่อนน่ะค่ะ

จุ๊ฟๆๆ ^^!
http://www.designil.com/ DesignIL

ตัวนี้ง่ายกว่าครับ ตรงที่ใช้โค้ดแปะ ๆ อย่างเดียว

@font-face ต้องโฮสต์ไฟล์เองด้วยครับ ถ้าคนเข้าเยอะ ๆ Bandwidth กระจายเลยครับ
http://www.designil.com/ DesignIL

ขอบคุณคร้าบ ^^
neko-nero-ro

API สินะ ^^

พอเข้าใจละ
http://www.notsu.in.th/ NOTsu

โอ้ววว นี่มันยอดเยี่ยม กระเทียมเจียว ข้าวเหนียวหมูปิ้ง (ฮี้ กั่บ ๆ)
http://www.designil.com/ DesignIL

555+ เป็นหน้าม้าโดยแท้จริง
http://www.designil.com/ DesignIL

ลองเอาไปใช้แล้วเป็นยังไงเอามาให้ดูกันมั่งนะคร้าบ ^^
http://gd-ab.blogspot.com gd_ab

เห้นแล้วคุ้นๆ เลยไปค้นในเมล์มาให้นะครับ
ลองดู http://www.typekit.com นะครับ
http://www.designil.com/ Designil

TypeKit นี่ดีกว่าตรงที่มีฟ้อนต์ให้เลือกมากกว่าเยอะครับ

แต่ข้อเสียคือมันเสียเงินนี่สิ ^^
http://twitter.com/luvikung/status/15186300079 Thanut Panichyothai

RT @designil: [Webdesign ETC] Google Font API คืออะไร ทำไมเว็บดีไซเนอร์ควรรู้จักไว้? http://bit.ly/dxaCHE
http://twitter.com/k0nglek/status/15248574526 k0nglek

เปลี่ยนสไตล์หน้าเว็บแทนการใช้รูปด้วย Google Font APIs http://ow.ly/1SFsC http://ow.ly/1SFJb
http://www.designil.com/ ma website design

I bought The Missing Manual series on CSS and Dreamweaver CSS and they were both a great education that convinced me to give up tables.
http://www.designil.com/ DesignIL

I’ve seen many people still rely on table as a tool for layout design though.
http://twitter.com/jarijira/status/16836178996 jarijira

http://bit.ly/aBXuEY [Webdesign ETC] Google Font API คืออะไร ทำไมเว็บดีไซเนอร์ควรรู้จักไว้?
http://twitter.com/inatmon/status/16855475321 Natsari Uma

http://bit.ly/aBXuEY [Webdesign ETC] Google Font API คืออะไร ทำไมเว็บดีไซเนอร์ควรรู้จักไว้?
http://twitter.com/enviengine enviengine

เว็บใหม่ในดวงใจ เยี่ยมมากครับ รอมานานแล้วแล้ว ถ้าเจอจะไปขอลายเซ็นต์นะครับ 555++
http://www.designil.com/ DesignIL

ผมเองก็ไม่ได้เก่งอะไรครับ แค่เน้นหาความรู้จากเว็บต่างประเทศเยอะ ๆ เองครับ ^^
http://twitter.com/extrafreshh/status/16989390367 extrafreshh

http://bit.ly/aBXuEY [Webdesign ETC] Google Font API คืออะไร ทำไมเว็บดีไซเนอร์ควรรู้จักไว้?
http://twitter.com/baninth/status/17406401482 บ้านและที่ดิน

http://bit.ly/aBXuEY [Webdesign ETC] Google Font API คืออะไร ทำไมเว็บดีไซเนอร์ควรรู้จักไว้?
http://twitter.com/sexdrum/status/17558586012 Sex Drum

ว้าวๆ Google Font API http://www.designil.com/what-is-google-font-api-how-to.html (via @imeedee)
http://twitter.com/phongleehae/status/17698538254 phongleehae

RT @designil: [Webdesign ETC] Google Font API คืออะไร ทำไมเว็บดีไซเนอร์ควรรู้จักไว้? http://bit.ly/dxaCHE
http://twitter.com/angiko/status/17699390561 angkana

RT @phongleehae [Webdesign ETC] Google Font API คืออะไร ทำไมเว็บดีไซเนอร์ควรรู้จักไว้? http://bit.ly/dxaCHE
http://www.katz.in.th peter

บทความดีมากเลยครับ ใช้ภาษาไทยได้เปล่าไม่รู้ ขอบคุณมากครับ U R The best
http://www.designil.com/ DesignIL

เสียดายที่ไม่ซัพพอร์ทภาษาไทยครับผม ถ้า f0nt.com ให้บริการนี้บ้างจะดีมาก แหะๆ
http://twitter.com/buyitthen/status/19232201750 BuyitthenArt&Crafts

http://bit.ly/aBXuEY [Webdesign ETC] Google Font API คืออะไร ทำไมเว็บดีไซเนอร์ควรรู้จักไว้?
http://twitter.com/issuedesign/status/19311564085 iDESIGN.CO.TH

นำ font แปลกๆ ใส่เว็บได้แล้วนะ http://bit.ly/djOHL4 ด้วย Google Font API
http://twitter.com/bunchajpd/status/19311565429 BunchaJPD

นำ font แปลกๆ ใส่เว็บได้แล้วนะ http://bit.ly/djOHL4 ด้วย Google Font API
http://twitter.com/ssarawut/status/29291215814 Ton Sarawut

RT @designil: [Webdesign ETC] Google Font API คืออะไร ทำไมเว็บดีไซเนอร์ควรรู้จักไว้? http://bit.ly/dxaCHE
http://www.designil.com/free-fonts-download-websites-2011.html [Free Fonts Download] รวมแหล่งดาวน์โหลด ฟ้อนต์ฟรี แห่งปี2011 | DesigNIL: Web Design HTML5 CSS3 Tutorial รวมความรู้เว็บดีไซน์ สอนออกแบ

[...] Google Font API ซึ่งอันนี้ก็เป็นตัวเดียวกันครับ [...]
http://www.verraite.com/?p=159 รวมแหล่งดาวน์โหลด ฟ้อนต์ฟรี แห่งปี 2011 !!! | verraite// หางาน สมัครงาน งาน IT งาน Part time พาร์ทไทม์ งานอิสระ รา

[...] Google Web Fonts เมื่อก่อนเคยเขียนไปแล้วครับเกี่ยวกับเรื่อง Google Font API ซึ่งอันนี้ก็เป็นตัวเดียวกันครับ แต่เป็น Version 2 ทำใหม่ดูดีขึ้นมาก และฟ้อนต์มีให้เลือกเยอะขึ้นด้วยครับ แล้วก็ไม่จำเป็นต้องใช้โค้ด Google เพื่อเอามาใส่บนเว็บอย่างเดียว ฟ้อนต์พวกนี้แจกฟรีครับ ถ้าอยากใช้ในงานกราฟฟิกก็ดาวน์โหลดไปใช้ได้อีกด้วย [...]
http://bond.in.th/ Octra Bond

ยังไม่มีฟอนต์ไทย เพราะนักพัฒนาฟอนต์ไทยยังไม่ได้ให้ความสำคัญ และ/หรือสถานะลิขสิทธิ์เข้ากันไม่ได้กับ TOS
แต่ถ้าลองค้นดูจะพบว่าฟอนต์เขมรและฟอนต์เวียดนามก็มีบ้างแล้ว เพราะเขาส่งไปก่อนไทย
http://www.facebook.com/aphichat.wc Aphichat Patronus Hazel

ถ้าทำเองได้ ก็อยากทำฟอนต์ไทยบ้าง เห็นของเขมรแล้ว โอ้สุดยอด

เว็บดีไซน์