เครื่องมือฟรี ไม่ต้องสมัครสมาชิก

เว็บไซต์นี้ใช้ฟอนต์อะไร

วาง URL เพื่อดูฟอนต์ที่เว็บไซต์ใช้ พร้อมน้ำหนัก ขนาด และตำแหน่งที่ใช้แต่ละฟอนต์ ฟรี ไม่ต้องสมัครสมาชิก ดูตัวอย่างอย่างฟอนต์ของ Anthropicและฟอนต์ของ Airbnb หรือดูว่า DESIGN.md ให้อะไรเพิ่มเติม

ลอง

ใช้ฟอนต์เหล่านี้ในโค้ดของคุณ

เครื่องมือค้นหาฟอนต์บอกชื่อฟอนต์ น้ำหนัก และตำแหน่งที่แต่ละฟอนต์ใช้แสดงข้อความ หากต้องการนำไปใช้ ให้โหลดแต่ละฟอนต์เพียงครั้งเดียว กำหนดตัวแปร CSS ให้แต่ละบทบาท และปิดท้าย font stack ด้วยฟอนต์สำรองเสมอ เพื่อให้ข้อความยังแสดงผลได้ระหว่างที่ฟอนต์กำลังดาวน์โหลดหรือเมื่อโหลดไม่สำเร็จ

1. โหลดฟอนต์ สำหรับฟอนต์จาก Google Fonts ให้เพิ่มแท็ก <link> หรือใช้ next/font/google และขอเฉพาะน้ำหนักที่เครื่องมือแสดงไว้ สำหรับฟอนต์เชิงพาณิชย์ ให้ซื้อไลเซนส์สำหรับเว็บจาก foundry แล้วให้บริการไฟล์ด้วย @font-face

2. ตั้งชื่อบทบาท หนึ่งตัวแปรต่อหนึ่งหน้าที่ ได้แก่ display สำหรับหัวข้อ body สำหรับเนื้อหา และ mono สำหรับโค้ด เปลี่ยนชื่อฟอนต์เป็นฟอนต์ที่คุณพบ

:root {
  --font-display: "Inter Display", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; }
body { font-family: var(--font-body); font-weight: 400; }
code, pre { font-family: var(--font-mono); }

3. ใช้ใน Tailwind font stack ชุดเดียวกันจะกลายเป็น utility font-display, font-sans และ font-mono

/* app.css, Tailwind CSS v4 */
@theme {
  --font-display: "Inter Display", "Inter", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

ฟอนต์เป็นเพียงครึ่งหนึ่งของระบบตัวอักษร ขนาด ความสูงบรรทัด และระยะห่างระหว่างตัวอักษรของแต่ละระดับอยู่ในส่วนตัวอักษรของ DESIGN.md ซึ่งเอเจนต์เขียนโค้ดของคุณนำไปใช้ได้ในทุกหน้าจอ

FAQ

คำถามเกี่ยวกับเครื่องมือค้นหาฟอนต์

คำตอบสั้น ๆ เกี่ยวกับเครื่องมือค้นหาฟอนต์ของเว็บไซต์ฟรี

เครื่องมือเปิดหน้าเว็บในเบราว์เซอร์จริง และอ่านฟอนต์ที่คำนวณแล้วของข้อความทุกส่วนที่มองเห็นได้ ได้แก่ฟอนต์ที่เบราว์เซอร์แสดงผลจริง พร้อมน้ำหนักและขนาด จากนั้นจัดกลุ่มฟอนต์และเรียงลำดับตามปริมาณข้อความที่แต่ละฟอนต์ใช้แสดง

ไม่ได้ ฟอนต์เป็นซอฟต์แวร์ที่มีไลเซนส์ และไลเซนส์ของเว็บไซต์มักครอบคลุมเฉพาะเว็บไซต์นั้น หากฟอนต์อยู่ใน Google Fonts คุณดาวน์โหลดได้ฟรีจากที่นั่น หากไม่ใช่ ให้ค้นหา foundry ของฟอนต์แล้วซื้อไลเซนส์สำหรับการใช้งานของคุณเอง

เครื่องมืออ่านเฉพาะหน้าที่คุณใส่ และแสดงฟอนต์ได้สูงสุดแปดฟอนต์ เครื่องมือเห็นเฉพาะข้อความที่หน้านั้นแสดงต่อผู้เข้าชมใหม่ ข้อความที่ต้องล็อกอินก่อน หน้าที่บล็อกเบราว์เซอร์อัตโนมัติ และตัวอักษรที่วาดเป็นภาพหรือ SVG จะไม่ถูกอ่าน ฟอนต์เหล่านั้นจึงไม่แสดง

ได้ เว็บฟอนต์ทุกตัวที่หน้าเว็บแสดงผลจะถูกตรวจพบ ไม่ว่าจะมาจาก Google Fonts, Adobe Fonts หรือเซิร์ฟเวอร์ของเว็บไซต์เอง ฟอนต์จาก Google จะแสดงตัวอย่างด้วยหน้าตาจริง ส่วนฟอนต์อื่นจะแสดงด้วยฟอนต์สำรอง

ได้ ทีละองค์ประกอบ ใน Chrome หรือ Edge ให้คลิกขวาที่ข้อความ เลือก Inspect แล้วเลื่อนแท็บ Computed ไปที่ Rendered Fonts ซึ่งจะบอกชื่อฟอนต์ที่แสดงผลจริง ใน Firefox แผง Fonts ใน Inspector จะแสดงฟอนต์ขององค์ประกอบที่เลือก และฟอนต์ทุกตัวที่หน้าเว็บโหลด

เครื่องมือนี้แสดงเฉพาะฟอนต์ ส่วน DESIGN.md จาก Design Extractor ครอบคลุมสี สเกลตัวอักษรทั้งหมด ระยะห่าง และกฎของคอมโพเนนต์ของเว็บไซต์ ในไฟล์เดียวที่เอเจนต์เขียนโค้ดของคุณทำตามได้

เครื่องมือฟรีอื่น ๆ

ดูเครื่องมือฟรีทั้งหมด

ต้องการระบบดีไซน์ทั้งหมดใช่ไหม

รับ DESIGN.md ที่มีสี สเกลตัวอักษร ระยะห่าง และคอมโพเนนต์ของเว็บไซต์ใดก็ได้ พร้อมใช้กับเอเจนต์เขียนโค้ดของคุณ

รับ DESIGN.md