[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):

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




About Author

28 Comments

  • แอ๋ม
    Posted May 30, 2010 5:36 pm 0Likes

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

    🙂

    • DesignIL
      Posted May 30, 2010 5:38 pm 0Likes

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

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

  • keds
    Posted May 30, 2010 5:38 pm 0Likes

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

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

    จุ๊ฟๆๆ ^^!

    • DesignIL
      Posted May 30, 2010 5:39 pm 0Likes

      ขอบคุณคร้าบ ^^

  • neko-nero-ro
    Posted May 30, 2010 5:42 pm 0Likes

    API สินะ ^^

    พอเข้าใจละ

    • DesignIL
      Posted May 30, 2010 5:48 pm 0Likes

      ลองเอาไปใช้แล้วเป็นยังไงเอามาให้ดูกันมั่งนะคร้าบ ^^

  • NOTsu
    Posted May 30, 2010 5:45 pm 0Likes

    โอ้ววว นี่มันยอดเยี่ยม กระเทียมเจียว ข้าวเหนียวหมูปิ้ง (ฮี้ กั่บ ๆ)

    • DesignIL
      Posted May 30, 2010 5:47 pm 0Likes

      555+ เป็นหน้าม้าโดยแท้จริง

  • gd_ab
    Posted May 30, 2010 6:43 pm 0Likes

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

    • Designil
      Posted May 30, 2010 6:53 pm 0Likes

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

      แต่ข้อเสียคือมันเสียเงินนี่สิ ^^

  • ma website design
    Posted June 22, 2010 12:12 pm 0Likes

    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.

    • DesignIL
      Posted June 22, 2010 5:10 pm 0Likes

      I’ve seen many people still rely on table as a tool for layout design though.

  • enviengine
    Posted June 24, 2010 1:29 am 0Likes

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

    • DesignIL
      Posted June 24, 2010 1:40 am 0Likes

      ผมเองก็ไม่ได้เก่งอะไรครับ แค่เน้นหาความรู้จากเว็บต่างประเทศเยอะ ๆ เองครับ ^^

  • extrafreshh
    Posted June 25, 2010 4:50 am 0Likes

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

  • บ้านและที่ดิน
    Posted June 30, 2010 11:04 am 0Likes

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

  • Sex Drum
    Posted July 2, 2010 8:55 am 0Likes

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

  • phongleehae
    Posted July 4, 2010 4:36 am 0Likes

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

  • angkana
    Posted July 4, 2010 4:54 am 0Likes

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

  • peter
    Posted July 4, 2010 2:45 pm 0Likes

    บทความดีมากเลยครับ ใช้ภาษาไทยได้เปล่าไม่รู้ ขอบคุณมากครับ U R The best

    • DesignIL
      Posted July 4, 2010 10:47 pm 0Likes

      เสียดายที่ไม่ซัพพอร์ทภาษาไทยครับผม ถ้า f0nt.com ให้บริการนี้บ้างจะดีมาก แหะๆ

  • Octra Bond
    Posted November 5, 2011 5:23 am 0Likes

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

  • Aphichat Patronus Hazel
    Posted November 8, 2011 4:57 am 0Likes

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

  • Ornny S'cawaii
    Posted February 27, 2012 5:40 pm 0Likes

    like me @iamcawaii:twitter 

  • Athemaz
    Posted February 29, 2012 6:49 am 0Likes

    มีฟอนไทยให้ใช้มั้ยครับ ถ้ามีช่วยโพสบอกวิธีใช้หน่อยนะครับ ขอบคุณครับ

  • Wichayada 22
    Posted April 9, 2012 8:19 am 0Likes

    อยากทำมายากล หยิบ google ได้บ้าง เดี่ยวจะพยายามทำแล้วกัน

  • Eeeewee
    Posted May 16, 2012 8:39 am 0Likes

    ภษาไทยไม่มี

  • gameyims kuanha
    Posted September 10, 2012 5:25 pm 0Likes

    ได้ความรู้มากขึ้นเยอะเลยครับ

Leave a comment