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

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

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 ในเว็บไซด์

สำหรับวิธีใส่ฟ้อนต์จากกูเกิ้ลในเว็บไซต์เราก็ไม่ยากเลย ขอแค่มีความรู้ CSS นิดหน่อยก็พอ

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

  1. เลือกฟ้อนต์ที่ต้องการใช้จากGoogle Font Directoryโดยการคลิกบนฟ้อนต์นั้น ๆ

ฟ้อนต์ยังมีไม่เยอะ ถ้าอยากได้แบบมีฟ้อนต์ให้เลือกเยอะ ๆ ลองไปใช้บริการเสียตังค์ของ Typekit ดูนะ

  1. หน้ารายละเอียดฟ้อนต์จะโผล่ขึ้นมา คลิกที่แท็บ “Get The Code” สีน้ำเงิน อยู่ใต้โลโก้สีเหลือง

หน้านี้จะบอกชื่อคนดีไซน์ ชื่อฟ้อนต์ ขนาดไฟล์ (ส่วนใหญ่จะเบามาก เพราะถูกบีบอัดแล้ว)

  1. ก็อปปี้โค้ดในกล่องแรกสุด ใต้หัวข้อ “Embed the font into your page” ไปใส่ใต้แท็ก ในเว็บไซต์คุณ

ตัวอย่างเช่น ผมใช้ฟ้อนต์ชื่อ Reenie Beanie ก็จะต้องก็อปปี้โค้ดแบบนี้

<link href='http://fonts.googleapis.com/css?family=<strong>Reenie+Beanie' rel='stylesheet' type='text/css'>

แค่นี้ ตอนโหลดหน้าเว็บไซต์ ก็จะมีการโหลดฟ้อนต์นี้ขึ้นมาเพื่อให้พร้อมใช้งานแล้ว

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

 1465
ผู้เข้าชม
คะแนน

บทความที่เกี่ยวข้อง

โซเชียล มีเดีย เป็นสิ่งที่เป็นประโยชน์อย่างมากในปัจจุบัน เราสามารถ update ชีวิตความเป็นอยู่ การไปเที่ยว สถานที่ชอบ อาหารที่ชอบ ให้เพื่อนๆ ได้เห็นกันอย่างรวดเร็ว ทันใจ แต่อย่างไรก็ตาม ในอีกมุมหนึ่ง โซเชียล มีเดีย ก็เป็นภัยเงียบที่เราอาจจะมองข้ามไป ดังนั้น เพื่อให้รู้ทันโซเชียล มีเดีย... เรามาดู 4 ข้อที่จำเป็นต้องรู้ก่อนที่จะแชร์อะไรลงโซเชียลกันน่ะค่ะ
สำนักงานส่งเสริมเศรษฐกิจดิจิทัล หรือ DEPA ประกาศมาตรการลดหย่อนภาษีเงินได้ 100% สำหรับผู้ประกอบการ SME เมื่อซื้อหรือใช้บริการโปรแกรมคอมพิวเตอร์จากนักพัฒนาหรือผู้ประกอบการซอฟต์แวร์ของประเทศไทยที่ขึ้นทะเบียนกับ DEPA โดยภาษีที่หักต้องอยู่ในหลักเกณฑ์เงื่อนไขที่กรมสรรพากรกำหนดในวงเงินไม่เกิน 100,000 บาท โดยเพิ่มเติมถึงคำว่าลดภาษี 200% ว่า หัก 100% เป็นค่าใช้จ่าย และหักค่าเสื่อมได้อีก 3 ปี รวมเป็น 200%
ผลิตภาพห่วงโซ่คุณค่าเพื่อการแข่งขัน ปัจจุบันสภาพปัจจัยแวดล้อมทางธุรกิจได้มีความเปลี่ยนแปลงอย่างต่อเนื่อง ทำให้องค์กรธุรกิจส่วนใหญ่ประสบปัญหาความผันผวนจากปัจจัยต่าง ๆ
สร้างเว็บไซต์สำเร็จรูปฟรี ร้านค้าออนไลน์