Google Fonts แจกฟรี ฟ้อนต์ไทยสวยๆ พร้อมวิธีการใช้งานทีละขั้นตอน

Google Fonts แจกฟรี ฟ้อนต์ไทยสวยๆ พร้อมวิธีการใช้งานทีละขั้นตอน

Google Fonts แจกฟรี ฟ้อนต์ไทยสวยๆ พร้อมวิธีการใช้งานทีละขั้นตอน Google Fonts บริการโฮสต์ฟ้อนของ Google ที่มีฟ้อนต์หรือตัวหนังสือแบบต่างๆ ให้เราสามารถที่จะเลือกใช้ฟรีได้ ซึ่งตอนนี้ Google Fonts ได้ออก Fonts ฉบับภาษาไทยให้แล้วล่ะคะ โดยเราสามารถที่จะเรียกฟ้อนต์หลากหลายสไตล์และที่สำคัญคือมันใช้งานได้ง่ายมากๆเลยล่ะคะ ไม่ต้องเสียเวลาติดตั้งไฟล์ แล้วก็มานั่งเขียนโค้ด @font-face ดึง Font มาใช้งานให้ยุ่งยากเลยล่ะค่ะ

Google Fonts ได้ทำการอัปเดตฟอนต์ที่รองรับภาษาไทย โดยบริษัท “คัดสรร ดีมาก” (Cadson Demak) องค์กรเอกชนสัญชาติไทยได้ประดิษฐ์แบบอักษรให้กับแบรนด์ต่างๆ ล่าสุดได้ทำฟอนต์ไทย 12 ชุดลงบน Google Fonts เพื่อให้นักพัฒนาเว็บไซต์นำไปปรับใช้กับเว็บของตนได้ทันที ไม่ต้องอัพโหลดฟอนต์ขึ้นโฮสต์ตัวเองแล้วใช้สคริปต์ @font-face ให้หนักอีกต่อไปค่ะ และ Google Fonts ได้พัฒนารูปแบบใหม่ให้สามารถใช้งานได้ง่ายมากขึ้นสำหรับบทความนี้ เราก็จะมาสอนการใช้ Google Fonts วิธีการใส่ฟ้อนต์สวย ๆ ในเว็บง่าย ๆ ซึ่งอธิบายวิธีการใช้งานทีละขั้นตอน ดังนี้คะ

1. ก่อนอื่นเราก็ต้องเข้าไปที่เว็บไซต์ Google Fonts

new-google-fonts

2. ในเมนูด้านซ้าย สามารถที่จะค้นหาเฉพาะฟ้อนต์ภาษาไทยก็ได้ โดยการคลิกที่ปุ่ม Search ด้านมุมขวาบน แล้วเลือกภาษาที่ Language

search-thai-google-font

3. เลือกฟ้อนต์ที่ต้องการ จากนั้นเลือกรูปแบบที่ต้องการ เช่น น้ำหนักหรือความหนาของฟ้อนต์ ระบบจะแสดงตัวอย่างให้ดู จากนั้นคลิกที่เครื่องหมาย + สีแดงที่มุมบนขวาของแต่ละฟ้อนต์ จะมีบาร์ข้างล่างโผล่ขึ้นมาแสดงว่าเราเลือกไปกี่ฟ้อนต์แล้ว หรือจะเลือกหลาย ๆ ฟ้อนต์ก็ได้นะคะ

new-google-font1

3. จากนั้นที่หน้าจอด้านล่างขวาจะมีรายการฟ้อนต์ที่เราเพิ่มเข้าไป ให้เราคลิกฟ้อนต์ที่เราต้องการเพื่อเปิดหน้าจอรายละเอียดในการฝังฟ้อนต์ขึ้นมาค่ะ เราสามารถก็อปปี้โค้ดไปใช้ใน HTML / CSS ของเราได้เลยคะ

add-thai-font4. ให้ทำการคัดลอกโค้ดชุดแรกของโค้ดแบบ STANDARD คือ   จากนั้นเปิดปลั๊กอิน Header and Footer ขึ้นมา โดยไปที่เมนู Settings > Header and Footer แล้ววางโค้ดที่คัดลอกมาในส่วนของSECTION INJECTION เสร็จแล้วคลิกปุ่ม save

font-detail

5. สำหรับโค้ด HTML นำไปใส่ในระหว่าง…ได้เลย หรือถ้าอยาก @import ใส่ CSS แทน ก็เลือกแท็บ @IMPORT ค่ะ

head-section-injection

6. สำหรับโค้ด CSS ให้นำไปใส่ใน CSS Selector ที่ต้องการแสดงฟ้อนต์ตัวนั้น

add-thai-to-siteorigin-css

7. เสร็จเรียบร้อย เท่านี้ฟ้อนต์สวย ๆ ที่เราเลือกใช้ก็จะมาแสดงผลบนเว็บไซต์ของเราแล้วคะ

เป็นอย่างไรบ้างคะกับ Google Fonts ฟ้อนต์ไทยสวยๆ ฟรี ที่ได้พัฒนารูปแบบให้เราสามารถใช้งานได้ง่าย เอาเป็นว่าถ้าใครสนใจอยากได้ Font ไทย ฟรีๆสวยๆไปใช้งาน มาประกอบเว็บเรา ก็เชิญที่ Google Fonts ได้เลยค่ะ

 

 

 

 

 

 

 

 

สมัครรับข่าวสารเพื่อให้ข้อความไม่เด้งอีก

อัพเดทสาระความรู้และเทคนิคมากมายเกี่ยวกับ รับทำเว็บไซต์ การออกแบบ การตลาดออนไลน์

ขอบคุณค่ะ