Font Pairing Guide
Explore curated Google Fonts pairings with live previews.
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog. Typography is the art of arranging letters and text in a way that makes the copy legible, clear, and visually appealing to the reader. Good font pairing enhances readability and reinforces the overall design aesthetic of your website or application.
ฟอนต์หัวเรื่อง: Playfair Display · ฟอนต์เนื้อหา: Source Sans 3
Google Fonts: <link href="https://fonts.googleapis.com/css2?family=Playfair%20Display:wght@400;700&family=Source%20Sans%203:wght@400;700&display=swap" rel="stylesheet">
เกี่ยวกับเครื่องมือนี้
เครื่องมือจับคู่ฟอนต์มี 8 ชุดการรวมกัน Google Fonts ที่คัดสรรมา ให้คุณดูตัวอย่างฟอนต์หัวเรื่องและเนื้อหาแบบเรียลไทม์
การจับคู่ฟอนต์ที่ดีช่วยเพิ่มความสามารถในการอ่านและเสริมสร้างสุนทรียศาสตร์การออกแบบโดยรวมของเว็บไซต์หรือแอป
วิธีใช้งาน
- คลิกที่การ์ดคู่ฟอนต์เพื่อเลือกชุดที่กำหนดไว้ล่วงหน้า
- เลือกป้อนชื่อ Google Font ใดก็ได้ในช่องฟอนต์
- แก้ไขข้อความตัวอย่างเพื่อดูตัวอย่างฟอนต์กับเนื้อหาของคุณ
- คัดลอกแท็ก link Google Fonts ด้านล่างและเพิ่มลงใน head ของ HTML
กรณีการใช้งาน
นักออกแบบเว็บทดสอบการจับคู่ฟอนต์ก่อนตัดสินใจเลือกระบบฟอนต์ นักพัฒนาค้นหาคู่ฟอนต์ที่เหมาะสมสำหรับระบบออกแบบอย่างรวดเร็ว
คำถามที่พบบ่อย
- สามารถใช้ฟอนต์แบบกำหนดเองได้ไหม? — สามารถพิมพ์ชื่อ Google Fonts ใดก็ได้ในช่อง ใช้ชื่อที่ถูกต้องจาก Google Fonts
- จะใช้ลิงก์ Google Fonts ที่สร้างได้อย่างไร? — เพิ่มแท็ก link ใน <head> ของ HTML จากนั้นใช้ font-family: 'ชื่อฟอนต์', fallback ใน CSS