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

designil

วันนี้ทางเว็บไซต์ 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 จะเป็นแบบนี้ (ใน Internet Explorer อาจไม่เห็นตัวอักษรหมุนครับ เพราะใช้ CSS3):

Without Google Font API

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

Without 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='https://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 ด้วยครับผม ขอบคุณมากครับ ^^

designil

designil

Data engineer & WordPress Developer ทำงานที่บริษัทแคนว่า ซิดนีย์ออสเตรเลีย ปัจจุบันเป็นเจ้าของเว็บไซต์ Designil, DataTH ชอบอ่านบทความใหม่ๆ ตลอดเวลา และชอบสรุปเรื่องราวเกี่ยวกับเทคโนโลยีให้ภาษาที่เข้าใจง่าย ยินดีที่ได้รู้จักทุกคนนะครับ
บทความทั้งหมด