การจับคู่แบบอักษร
เครื่องมือจับคู่ฟอนต์แสดงตัวอย่างการผสม Google Fonts ที่คัดสรรมาแล้ว 12 แบบสำหรับหัวข้อและเนื้อหา ให้คุณลองผสมฟอนต์เองได้ และคัดลอก CSS @import ที่ตรงกันไปใช้
เกี่ยวกับเครื่องมือนี้
เครื่องมือจับคู่ฟอนต์แสดงตัวอย่างการผสม Google Fonts ที่คัดสรรมาแล้ว 12 แบบสำหรับหัวข้อและเนื้อหา ให้คุณลองผสมฟอนต์เองได้ และคัดลอก CSS @import ที่ตรงกันไปใช้
วิธีใช้
- เลือกคู่ฟอนต์ที่คัดสรรไว้ หรือเลือกฟอนต์หัวข้อและเนื้อหาด้วยตัวเอง
- ใช้ Random Pairing เพื่อลองสำรวจการจับคู่แบบต่าง ๆ
- ดูตัวอย่างหัวข้อและย่อหน้าแบบสด
- คลิก Copy CSS @import เพื่อโหลดฟอนต์บนเว็บไซต์ของคุณ
ข้อควรรู้
- การจับคู่แบบคลาสสิกคือการใช้ serif คู่กับ sans-serif ให้ตัดกัน เช่น Playfair Display กับ Source Sans 3
- คู่ฟอนต์ที่มีให้ ได้แก่ Montserrat + Merriweather, Raleway + Lato, Space Grotesk + Inter และ DM Serif Display + DM Sans
- การจำกัดฟอนต์ไว้ที่ 2 ตระกูลช่วยให้หน้าเว็บดูสม่ำเสมอและลดขนาดไฟล์ที่ต้องดาวน์โหลด
- ตัวอย่างจะโหลดฟอนต์ที่เลือกจาก Google Fonts ที่น้ำหนัก 400 และ 700
- การเพิ่ม display=swap ใน URL ของฟอนต์จะแสดงข้อความด้วยฟอนต์สำรองระหว่างที่เว็บฟอนต์กำลังโหลด
ทำงานในเบราว์เซอร์ของคุณทั้งหมด — ข้อมูลที่คุณป้อนจะไม่ถูกอัปโหลดหรือจัดเก็บ
คำถามที่พบบ่อย
ฟอนต์แบบไหนเข้ากันได้ดี?
ฟอนต์ที่มีสไตล์ตัดกันแต่สัดส่วนใกล้เคียงกันมักจับคู่ได้ดี เช่น หัวข้อ serif คอนทราสต์สูงกับเนื้อหา sans-serif ที่เรียบสะอาด คู่ฟอนต์ที่คัดสรรไว้ที่นี่เป็นการจับคู่ที่พิสูจน์แล้ว
เว็บไซต์ควรใช้ฟอนต์กี่แบบ?
2 ตระกูล คือหนึ่งสำหรับหัวข้อและหนึ่งสำหรับเนื้อหา ก็เพียงพอสำหรับเว็บไซต์ส่วนใหญ่ แทบไม่จำเป็นต้องมีตระกูลที่สาม
Google Fonts ใช้เชิงพาณิชย์ได้ฟรีหรือไม่?
ได้ ฟอนต์ในคลัง Google Fonts เผยแพร่ภายใต้สัญญาอนุญาตแบบเปิด เช่น SIL Open Font License และใช้งานเชิงพาณิชย์ได้
จะเพิ่มฟอนต์ลงในเว็บไซต์ได้อย่างไร?
วาง @import ที่คัดลอกไว้ด้านบนสุดของไฟล์ CSS หรือแปลงเป็นแท็ก link ในส่วน head ของ HTML จากนั้นตั้งค่า font-family ให้หัวข้อและเนื้อหา