การเปลี่ยนฟอนต์ด้วย font-face ของ CSS

font-face

การแปลงไฟล์ของฟอนต์

โดยปกติไฟล์ฟอนต์ที่เราใช้ในเครื่องจะเป็น .ttf ซึ่งถ้าเป็นฟอนต์ที่ใช้บนเว็บจะใช้หลายรูปแบบกว่าเนื่องจากต้องใช้รองรับในหลายๆเบราว์เซอร์นั้นเอง

  1. หาดาวน์โหลดฟอนต์ที่ต้องการ แนะนำที่ f0nt มีฟอนต์ไทยสวยๆหลายตัวเลยครับ หรือ ใครมีไฟล์ฟอนต์นามสกุล ttf อยู่แล้วก็ไปข้อต่อไปได้เลยครับ
  2. หาเว็บไซต์ที่ช่วยแปลงไฟล์ได้ ที่ผมใช้เป็นประจำก็มีของ fontsquirrel
  3. เมื่อกด upload และ แปลงไฟล์เรียบร้อย เราก็จะได้ไฟล์นามสกุลต่างๆมาก็มี ttf eot woff เป็นต้น
  4. นำไฟล์ที่เราได้อัพโหลดเข้าไปที่ธีมเราได้ อาจจะอยู่ในโฟลเดอร์ชื่อ fonts ก็สะดวกดีครับ

การเรียกไฟล์ฟอนต์มาใช้งาน

เมื่อทำตามขั้นตอนด้านบนเรียบร้อย สามารถนำโค้ดด้านล่างไปใส่ไว้ใน css ของเราได้เลย

@font-face {
    font-family: 'your_font';
    src: url('fonts/your_font.eot');
    src: url('fonts/your_font.eot?#iefix') format('embedded-opentype'),
         url('fonts/your_font.woff2') format('woff2'),
         url('fonts/your_font.woff') format('woff'),
         url('fonts/your_font.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

การเรียกใช้งานฟอนต์

สามารถเรียก div หรือ แท็กที่เราต้องการแล้วใส่ font-family ที่เราสร้างได้เลยเป็นอันเสร็จสิ้นครับ

h1,h2,h3,h4,h5,h6,.site-menu {
   font-family: 'your_font';
}

ตามตัวอย่างด้านบน คือ สั่งให้ h1-h6 กับ div ชื่อว่า site-menu ใช้ฟอนต์นี้ครับผม

โดย: [K] Narongchai Suphiratwanich

นักพัฒนาเว็บไซต์ด้วยระบบเวิร์ดเพรส เป็นผู้ช่วยให้กับ Mennstudio และ เปิดธุรกิจเล็กๆ อยู่ในอำเภอปาย

สอบถาม & พูดคุย