Tailwind CSS Academy · บทเรียน

ตระกูลฟอนต์แบบกำหนดเอง

ผสานรวม Google Fonts หรือฟอนต์ในเครื่องด้วยการกำหนด fontFamily ในไฟล์กำหนดค่า แล้วนำไปใช้ด้วยคลาสยูทิลิตี font-*

บทเรียน 2 จาก 413 ขั้นตอน

ตระกูลฟอนต์แบบกำหนดเอง เป็นบทเรียน Tailwind CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Tailwind CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Tailwind CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

ชุดแบบอักษรเริ่มต้นของ Tailwind

Tailwind มีคลาสยูทิลิตีตระกูลแบบอักษรเริ่มต้นสามแบบ ได้แก่ font-sans, font-serif และ font-mono แต่ละแบบเชื่อมโยงกับชุดแบบอักษรของระบบที่คัดสรรมาอย่างดี ซึ่งแสดงผลได้สวยงามบนระบบปฏิบัติการทุกชนิดโดยไม่ต้องดาวน์โหลดแบบอักษร สำหรับโครงการส่วนใหญ่ คุณควรแทนที่หรือเพิ่มแบบอักษรเว็บที่สื่อเอกลักษณ์ด้านตัวอักษรของโครงการได้อย่างโดดเด่น

/* Tailwind's built-in font stacks */
font-sans  → ui-sans-serif, system-ui, -apple-system, ...
font-serif → ui-serif, Georgia, Cambria, ...
font-mono  → ui-monospace, SFMono-Regular, Menlo, ...

<!-- Using them -->
<p class="font-sans">System sans-serif text</p>
<p class="font-serif">Elegant serif text</p>
<pre class="font-mono">code example</pre>

การเลือกแบบอักษรจาก Google

Google Fonts เป็นแหล่งแบบอักษรเว็บฟรีที่ได้รับความนิยมมากที่สุด ไปที่ fonts.google.com และเลือกแบบอักษรที่เหมาะกับแบรนด์ของคุณ ตัวเลือกยอดนิยมสำหรับโครงการส่วนติดต่อผู้ใช้ ได้แก่ Inter สำหรับส่วนติดต่อผู้ใช้ที่เรียบสะอาดและทันสมัย Geist สำหรับผลิตภัณฑ์เชิงเทคนิค Playfair Display สำหรับความสง่างามแบบงานบรรณาธิการ และ JetBrains Mono สำหรับเครื่องมือแก้ไขโค้ด ให้เลือกเฉพาะน้ำหนักที่คุณใช้งานจริง (ปกติ 400 และกึ่งหนา 600 ครอบคลุมกรณีส่วนใหญ่)

<!-- Add to your HTML <head> to load from Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

<!-- Or for Playfair Display -->
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">

การลงทะเบียนแบบอักษรในการตั้งค่า Tailwind

หลังจากโหลดแบบอักษรผ่านแท็ก <link> หรือ CSS @import แล้ว ให้ลงทะเบียนแบบอักษรใน tailwind.config.js ภายใต้ theme.extend.fontFamily ระบุชื่อแบบอักษรให้ตรงกับที่ปรากฏใน Google Fonts ทุกประการ (รวมช่องว่างหากมี) โดยให้เป็นรายการแรกในอาร์เรย์ของชุดแบบอักษร ควรใส่แบบอักษรสำรองไว้เสมอ โดยใช้แบบอักษรของระบบเป็นตัวสำรองในกรณีที่โหลดแบบอักษรเว็บไม่สำเร็จ

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
        display: ['Playfair Display', 'Georgia', 'serif'],
        mono: ['JetBrains Mono', 'ui-monospace', 'SFMono-Regular', 'monospace'],
      },
    },
  },
};

การใช้ตระกูลแบบอักษรใน HTML

เมื่อลงทะเบียนแล้ว ให้ใช้คลาสยูทิลิตี font-{key} เพื่อใช้แบบอักษร หากคุณขยาย sans ตอนนี้ font-sans จะอ้างอิงไปยังแบบอักษรที่คุณเลือก หากเพิ่มคีย์ใหม่ เช่น display คลาสยูทิลิตีจะเป็น font-display ใช้ตระกูลแบบอักษรที่ระดับบรรพบุรุษซึ่งสูงที่สุดเพื่อให้สืบทอดไปยังทุกส่วน จากนั้นจึงแทนที่ในบางส่วนตามต้องการ

<body class="font-sans">
  <!-- All text inherits Inter font -->

  <h1 class="font-display text-5xl font-bold">
    Playfair Display Heading
  </h1>

  <p class="font-sans text-gray-600">
    Regular body text in Inter
  </p>

  <pre class="font-mono text-sm bg-gray-100 p-4 rounded">
    code in JetBrains Mono
  </pre>
</body>

การแทนที่ตระกูลแบบอักษรเริ่มต้น

หากต้องการให้แบบอักษรที่เลือกเป็นค่าเริ่มต้นในทุกส่วนโดยไม่ต้องเพิ่ม font-sans ให้กับทุกองค์ประกอบ ให้แทนที่ theme.fontFamily.sans (อยู่นอก extend) เพื่อแทนที่ชุดแบบอักษรเริ่มต้นทั้งหมด จากนั้นใช้ font-sans เพียงครั้งเดียวกับองค์ประกอบ body แล้วข้อความทั้งหมดที่สืบทอดจาก body จะใช้แบบอักษรแบบกำหนดเองของคุณโดยไม่ต้องเพิ่มชื่อคลาสใด ๆ

// tailwind.config.js — Override default sans (replaces the default)
module.exports = {
  theme: {
    fontFamily: {
      sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
      // serif and mono keep defaults unless also overridden
    },
  },
};

<!-- Now font-sans = Inter everywhere -->
<body class="font-sans">
  <p>This text automatically uses Inter</p>
</body>

การโหลดแบบอักษรด้วยการปรับให้เหมาะสมสำหรับแบบอักษรของ Next.js

ในโครงการ Next.js ให้ใช้โมดูล next/font แทนลิงก์ CDN ของ Google Fonts โมดูลนี้จะดาวน์โหลดแบบอักษรขณะสร้างโครงการ ให้บริการแบบอักษรจากโดเมนของคุณเอง ลดคำขอภายนอก และป้องกันการเลื่อนตำแหน่งของเค้าโครงด้วยการปรับขนาดแบบอักษรโดยอัตโนมัติ สร้างชื่อตัวแปร CSS แล้วส่งต่อไปยังการตั้งค่า Tailwind โดยใช้ตัวแปรนั้น เพื่อเชื่อมการปรับแบบอักษรของ Next.js ให้เหมาะสมกับ Tailwind ได้อย่างแนบแน่น

// app/layout.tsx
import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
});

export default function Layout({ children }) {
  return (
    <html lang="en" className={inter.variable}>
      <body className="font-sans">{children}</body>
    </html>
  );
}

// tailwind.config.js
theme: {
  extend: {
    fontFamily: {
      sans: ['var(--font-inter)', 'ui-sans-serif', 'system-ui'],
    },
  },
}

การใช้ไฟล์แบบอักษรภายในเครื่อง

เมื่อใช้แบบอักษรที่ซื้อหรือแบบอักษรแบบกำหนดเอง ให้โฮสต์ไฟล์ไว้ภายในเครื่องและกำหนดด้วยกฎ CSS @font-face วางไฟล์แบบอักษรไว้ในไดเรกทอรีสาธารณะและอ้างอิงด้วยเส้นทางสัมบูรณ์ ใช้ font-display: swap เพื่อแสดงแบบอักษรสำรองทันทีระหว่างรอโหลดแบบอักษรแบบกำหนดเอง ซึ่งช่วยป้องกันไม่ให้ข้อความหายไประหว่างการโหลด จากนั้นลงทะเบียนตระกูลแบบอักษรในการตั้งค่า Tailwind ตามปกติ

/* In your global CSS */
@font-face {
  font-family: 'BrandFont';
  src: url('/fonts/BrandFont-Regular.woff2') format('woff2'),
       url('/fonts/BrandFont-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* tailwind.config.js */
theme: {
  extend: {
    fontFamily: {
      brand: ['BrandFont', 'sans-serif'],
    },
  },
}

ยูทิลิตีควบคุมน้ำหนักแบบอักษร

หลังจากตั้งค่าตระกูลแบบอักษรแล้ว ให้ควบคุมน้ำหนักด้วยยูทิลิตี font-{weight} ของ Tailwind น้ำหนักที่ใช้บ่อย ได้แก่ font-normal (400), font-medium (500), font-semibold (600) และ font-bold (700) ตรวจสอบให้แน่ใจว่าได้โหลดน้ำหนักเฉพาะจาก Google Fonts ที่ตั้งใจจะใช้ เพราะการขอน้ำหนักที่ไม่ได้โหลดจะทำให้เบราว์เซอร์สร้างน้ำหนักขึ้นเอง ส่งผลให้ข้อความมีคุณภาพไม่ดี

<!-- Load weights 400, 600, 700 from Google -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

<!-- Use them with Tailwind weight utilities -->
<p class="font-sans font-normal">Regular body text (400)</p>
<p class="font-sans font-semibold">Semibold text (600)</p>
<h1 class="font-sans font-bold">Bold heading (700)</h1>

แบบอักษรแปรผัน

แบบอักษรแปรผันจะรวมทุกน้ำหนัก (และบางครั้งรวมความกว้างกับตัวเอียง) ไว้ในไฟล์เดียว ช่วยลดคำขอ HTTP พร้อมรองรับช่วงน้ำหนักทั้งหมด โหลดแบบอักษรแปรผันเพียงครั้งเดียว แล้วใช้ยูทิลิตีน้ำหนักแบบอักษรของ Tailwind ใดก็ได้โดยไม่ต้องกังวลว่าได้ขอน้ำหนักนั้นไว้โดยเฉพาะหรือไม่ ปัจจุบัน Google Fonts สมัยใหม่จำนวนมากมีรุ่นแปรผัน ให้มองหาไวยากรณ์แกน ital,wght@ ใน URL

<!-- Variable font: loads once, supports all weights 100-900 -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">

<!-- Now ALL weight utilities work with Inter -->
<p class="font-thin">font-thin (100)</p>
<p class="font-normal">font-normal (400)</p>
<p class="font-bold">font-bold (700)</p>
<p class="font-black">font-black (900)</p>

ยูทิลิตีปรับความเรียบของแบบอักษร

Tailwind มียูทิลิตี antialiased และ subpixel-antialiased สำหรับควบคุมวิธีแสดงผลแบบอักษรบนหน้าจอ ใช้ antialiased ทั่วทั้งองค์ประกอบ body เพื่อเปิดใช้การลบรอยหยักแบบระดับสีเทา ซึ่งทำให้แบบอักษรเว็บสมัยใหม่ดูคมชัดและบางลงบนจอภาพที่มีความละเอียดสูง ส่วนใหญ่โครงการ Tailwind จะเพิ่ม antialiased เป็นรูปแบบพื้นฐานควบคู่กับการประกาศตระกูลแบบอักษร

<body class="font-sans antialiased text-gray-900">
  <!-- Text renders with smooth antialiasing across the page -->

  <h1 class="font-bold text-4xl tracking-tight">
    Crisp, antialiased heading
  </h1>
</body>

การทดสอบการโหลดแบบอักษร

ตรวจสอบว่าแบบอักษรแบบกำหนดเองโหลดอย่างถูกต้องโดยเปิด Chrome DevTools ไปที่แท็บเครือข่าย แล้วกรองด้วย แบบอักษร คุณควรเห็นรายการไฟล์แบบอักษร ในแผงองค์ประกอบ ให้เลือกโหนดข้อความและตรวจสอบแท็บ ค่าที่คำนวณ — คุณสมบัติ font-family ควรแสดงชื่อแบบอักษรแบบกำหนดเองเป็นแบบอักษรที่เลือกใช้จริง ไม่ใช่แบบอักษรสำรอง ทดสอบกับขนาดพื้นที่แสดงผลและความเร็วการเชื่อมต่อหลายระดับเพื่อค้นหาปัญหาการโหลด

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทดสอบความเข้าใจของคุณเกี่ยวกับตระกูลแบบอักษรแบบกำหนดเองใน Tailwind CSS

ตอบคำถามในบทเรียนแบบโต้ตอบ

ทบทวนบทเรียน

ในบทเรียนนี้ คุณได้เรียนรู้วิธีลงทะเบียนแบบอักษรแบบกำหนดเองใน theme.extend.fontFamily เป็นอาร์เรย์พร้อมแบบอักษรสำรอง โหลด Google Fonts ผ่านแท็ก <link> ของ CDN หรือใช้ next/font เพื่อการโหลดที่เหมาะสมใน Next.js และใช้ antialiased ทั่วทั้งหน้าเพื่อให้แบบอักษรแสดงผลได้คมชัด บทถัดไปเราจะเพิ่มค่าระยะห่างแบบกำหนดเองเพื่อเติมช่วงที่ขาดหายไปในมาตราส่วนเริ่มต้นของ Tailwind

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 30
บทเรียน: 120

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “ตระกูลฟอนต์แบบกำหนดเอง” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ตระกูลฟอนต์แบบกำหนดเอง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Tailwind CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Tailwind CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ตระกูลฟอนต์แบบกำหนดเอง”

ผสานรวม Google Fonts หรือฟอนต์ในเครื่องด้วยการกำหนด fontFamily ในไฟล์กำหนดค่า แล้วนำไปใช้ด้วยคลาสยูทิลิตี font-* คุณปฏิบัติ Tailwind CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Tailwind CSS Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Tailwind CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “ตระกูลฟอนต์แบบกำหนดเอง” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Tailwind CSS Academy นี้ได้ไหม

ได้ บทเรียน Tailwind CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Tailwind CSS Academy