วิธีการใช้งานฟอนต์ .ttf ใน CSS

bysemicon -
0

 




DEMO


วิธีการใช้งานฟอนต์ .ttf ใน CSS (ฉบับเข้าใจง่าย ใช้งานได้จริง)

การนำฟอนต์นามสกุล .ttf (TrueType Font) มาใช้ในเว็บไซต์ จะช่วยให้เราสามารถควบคุมรูปแบบตัวอักษรได้ตามต้องการ ไม่ต้องพึ่งฟอนต์มาตรฐานของระบบ เช่น Arial หรือ Times New Roman เท่านั้น

บทความนี้จะอธิบายแบบเข้าใจง่าย พร้อมตัวอย่างใช้งานจริง 👇

🔹 1. เตรียมไฟล์ฟอนต์

ก่อนอื่นต้องมีไฟล์ฟอนต์ .ttf เช่น:

myfont.ttf

อัปโหลดไฟล์ไปเก็บบนโฮสต์ แนะนำให้เก็บไว้ในโฟลเดอร์ เช่น:

/assets/fonts/myfont.ttf

🔹 2. ใช้ @font-face ใน CSS

เราจะใช้คำสั่ง @font-face เพื่อประกาศฟอนต์

@font-face {
  font-family: 'MyCustomFont';
  src: url('assets/fonts/myfont.ttf') format('truetype');
}

📌 อธิบาย:

  • font-family → ตั้งชื่อฟอนต์ (ตั้งเองได้)
  • src → ระบุ path ของไฟล์ฟอนต์

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

หลังจากประกาศแล้ว สามารถนำไปใช้ได้เลย:

body {
  font-family: 'MyCustomFont', sans-serif;
}

หรือใช้กับ element เฉพาะ:

h1 {
  font-family: 'MyCustomFont';
}

🔹 4. ตัวอย่างโค้ดแบบสมบูรณ์

<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
  font-family: 'MyCustomFont';
  src: url('assets/fonts/myfont.ttf') format('truetype');
}

body {
  font-family: 'MyCustomFont', sans-serif;
}
</style>
</head>
<body>

<h1>สวัสดีครับ</h1>
<p>นี่คือการใช้ฟอนต์ .ttf ในเว็บไซต์</p>

</body>
</html>

🔹 5. แนะนำเพิ่มเติม (สำคัญมาก)

✅ รองรับหลายไฟล์ (แนะนำ)

เพื่อให้รองรับทุก browser ควรมีหลาย format:

@font-face {
  font-family: 'MyCustomFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff'),
       url('myfont.ttf') format('truetype');
}

✅ ใช้ WOFF/WOFF2 จะดีกว่า

  • โหลดเร็วกว่า
  • รองรับ browser ดีขึ้น

🔹 6. ตัวอย่างโค้ดแบบสมบูรณ์

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <style>
        @font-face {
            font-family: wingdings;
            src: url('https://wichianp.github.io/fonts/wingdings2.woff2') format('woff2'), 
            url('https://wichianp.github.io/fonts/wingdings2.woff') format('woff'), 
            url('https://wichianp.github.io/fonts/wingdings2.ttf') format('truetype');
        }
        
        .symbol {
            font-family: wingdings;
            color: rgb(245, 6, 26);
            font-size: 16px;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <h2>ใส่สัญลักษณ์ในเว็บด้วยฟอนต์ wingdings2.ttf</h2>
    <p><span class="symbol">P</span> นี่คือเครื่องหมายเช็คถูก 1</p>
    <p><span class="symbol">R</span> นี่คือเครื่องหมายเช็คถูก 2</p>
    <p><span class="symbol">O</span> นี่คือเครื่องหมายเช็คกากบาท1</p>
    <p><span class="symbol">Q</span> นี่คือเครื่องหมายเช็คกากบาท2</p>
    <a href="https://github.com/semicon/fonts" target="_blank">ดูตัวอย่างการใช้ที่นี่</a>

</body>

</html>

🔹 7. ปัญหาที่พบบ่อย

❌ ฟอนต์ไม่แสดง

สาเหตุ:

  • path ผิด
  • ไฟล์ไม่ได้อัปโหลด
  • browser cache

✔ วิธีแก้:

  • ตรวจ path ให้ถูกต้อง
  • กด Ctrl + F5 รีโหลดใหม่

🔹 8. สรุป

  • ใช้ @font-face เพื่อโหลดฟอนต์
  • ตั้งชื่อ font-family เองได้
  • ควรใช้ .woff2 เป็นหลัก และ .ttf เป็น fallback
  • ตรวจสอบ path ให้ถูกต้องเสมอ

🎯 Tip พิเศษ

ถ้าคุณใช้ Google Apps Script หรือเว็บแอป:

  • ให้วางฟอนต์ใน Google Drive แล้วใช้ URL หรือ embed มาใช้งาน
  • หรือใช้ CDN จะง่ายและเร็วกว่า


🔹เว็บแปลงฟอนต์ออนไลน์ (ง่ายที่สุด)

✅ เว็บที่นิยม



Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า