imkopkap

เปลี่ยนฟอนต์ให้กับ Theme WordPress ด้วย Fontface

ใช้เวลา 10 นาที 10/12/2014

เป็นคำถามที่ค่อนข้างจะถามเข้ามามากมายเกี่ยวกับการเปลี่ยนฟอนต์ให้กับ Theme WordPress ที่ใช้กันอยู่ ไม่ว่าจะเป็น twentyfourteen หรืออื่นๆ

 

ว่าด้วยเรื่องฟอนต์  ฟอนต์มีความสำคัญกับ Theme ของเรามาก ๆ ครับ โดยเฉพาะเรื่องของความสวยงามของเว็บ เพราะฟอนต์จะช่วยให้อ่านได้ง่ายขึ้น ดูสบายตา ไม่รก ไม่เกะกะจนเกินไป ( แล้วแต่ Design ด้วยนะครับ ) และทำให้ User เข้ามาอ่านมาเยี่ยมชม อยากจะกลับเข้ามาชมเว็บเดิมของเราอีกที

 

 

เราจะเปลี่ยนฟอนต์ใน Theme ได้อย่างไร

แก๊ปมีเทคนิคง่ายๆแทบจะไม่ต้องเขียนโค้ดเลยครับ สำหรับการทำฟอนต์ให้สวยขึ้นกับ Theme WordPress โดยกระบวนการคิดในการทำฟอนต์ให้กับ Theme WordPress นั้นมีอยู่ง่ายๆดังนี้ครับ

  1. หาฟอนต์ที่ตัวเองถูกใจและคิดว่าจะเข้ากับเว็บของเรา
  2. ดาวน์โหลดฟอนต์ แตกไฟล์ฟอนต์ลง Folder
  3. นำฟอนต์อัปโหลดไปที่ Web Tool กลายเป็น fontface
  4. จากนั้น Copy โค้ดที่ทาง Web Tool ให้มา

 

วิธีการทำ Fontface ให้กับ Theme WordPress

เมื่อเราได้ทำการเลื่อกฟอนต์ที่ถูกใจและได้ดาวน์โหลดมาลงที่เครื่อง PC หรือ Mac เป็นที่เรียบร้อยแล้ว ให้ทำการดังนี้

เข้าไปที่เว็บไซต์ fontsquirrel ทำการกด Add font > ติ๊ก Expert > ติ๊ก SVG ( ไม่ติ๊กก็ได้ ) > ติ๊ก No Subsetting > ติ๊ก Yes จากนั้นกด Download your kit

  1. เปิดไฟล์ zip ขึ้นมา Copy font ไปวางไว้ใน Folder Theme
  2. เข้าไปที่ไฟล์ stylesheet.css ในไฟล์ zip
  3. Copy โค้ดไปวางไว้ในไฟล์ CSS ของ Theme ที่ต้องการแก้ไขฟอนต์
  4. จากนั้นแก้โค้ด ตรงตำแหน่ง URL ให้เปลี่ยนเป็นตำแหน่งที่เราวาง Font ของขั้นตอนที่ 1
  5. การเรียกใช้ก็คือ ให้เรา Copy โค้ด font-family ไปวางไว้ใน Class หรือ ID ของ CSS ที่ต้องการทำการแก้ไข

 

การทำ Fontface สะดวกมากครับ แถมยังรองรับ Responsive อีกด้วย ใช้งานไม่ยากแค่ Copy เท่านั้น เราไม่จำเป็นจะต้องอัปโหลดอย่างเดียวนะครับ

 

เราสามารถนำฟอนต์ที่ดาวน์โหลด และหลังจากนั้น Copy ฟอนต์ลงใน Theme WordPress ได้เลย จากนั้นก็เขียนโค้ดขึ้นมาเอง ให้เหมือนกับ ขั้นตอนที่ 3

บันทึกแนะนำ