แบบอักษรฟรี — เว็บไซต์ยอดนิยม การแสดงตัวอย่างสด และวิธีการใช้งาน
เรียกดูแหล่งที่เชื่อถือได้สำหรับแบบอักษรฟรี ทดสอบตัวอย่างแบบสด คัดลอก CSS ที่ชัดเจน และเรียนรู้วิธีใช้แบบอักษรบนเว็บที่ถูกต้อง รวมคอลเลกชันโอเพ่นซอร์ส ฟรีสำหรับเชิงพาณิชย์ และของใช้ส่วนตัว
Google แบบอักษร
อฟลไลบรารีโอเพ่นซอร์สที่ใหญ่ที่สุดพร้อม CDN ส่วนกลาง ชุดย่อย และฟอนต์แบบแปรผันที่รวดเร็ว เหมาะสำหรับเว็บและแอป ครอบครัวส่วนใหญ่ใช้ SIL Open Font License
Fontshare (โดย ITF)
ฟรีแบบอักษรคุณภาพที่ Indian Type Foundry ให้บริการฟรี ครอบครัวที่สะอาด การฝัง CDN ที่ง่ายดาย และตัวเลือกตัวแปรมากมาย
ฟอนต์กระรอก
เชิงพาณิชย์ฟรีไดเร็กทอรีที่ได้รับการดูแลจัดการเน้นไปที่แบบอักษรที่ใช้งานฟรีเพื่อการค้า รวมตัวสร้าง webfont สำหรับการโฮสต์ด้วยตนเอง
ลีกประเภทเคลื่อนย้ายได้
อฟลโรงหล่อโอเพ่นซอร์สสุดคลาสสิกพร้อมตระกูลเหนือกาลเวลาอย่าง League Spartan และ Raleway เหมาะสำหรับการสร้างแบรนด์และบรรณาธิการ
เวลเวไทน์
อฟลแบบอักษรโอเพ่นซอร์สรุ่นทดลองพร้อมสไตล์การแสดงผลที่โดดเด่น เหมาะสำหรับโปสเตอร์ วัฒนธรรม และงานสร้างสรรค์
รวม
อฟลโรงหล่อของชุมชนเปิดตัวแบบอักษรฟรีคุณภาพสูงภายใต้ใบอนุญาตแบบเปิด ตัวเลือกบรรณาธิการและการแสดงผลที่แข็งแกร่ง
เปิดโรงหล่อ
อฟลดัชนีแบบอักษรโอเพ่นซอร์สที่คัดสรรพร้อมเครื่องมือทดสอบและการนำเสนอที่เน้นการออกแบบ เหมาะสำหรับการค้นพบครอบครัวใหม่
1001 แบบอักษร
ใบอนุญาตแบบผสมไดเร็กทอรีขนาดใหญ่พร้อมตัวกรองสำหรับการใช้งานฟรีเพื่อการค้า อ่านใบอนุญาตต่อครอบครัว หลายรายการเป็นของใช้ส่วนตัวเท่านั้น
ดาฟอนต์
การใช้งานส่วนบุคคลคลังข้อมูลขนาดใหญ่เหมาะสำหรับโครงการส่วนตัวและแรงบันดาลใจ ใบอนุญาตแตกต่างกันไปอย่างมาก ตรวจสอบหน้าดาวน์โหลดแต่ละหน้า
แบบอักษรของไอคอน (แบบอักษรที่ยอดเยี่ยม, ไอคอนวัสดุ, ไอคอนรีมิกซ์)
ฟรีเทียร์สำหรับไอคอน UI ที่ใช้ไปป์ไลน์แบบอักษร ลองพิจารณาระบบไอคอน SVG สมัยใหม่ แต่แบบอักษรของไอคอนยังคงมีประโยชน์สำหรับการเพิ่มอย่างรวดเร็ว
ดูตัวอย่างสดและตัวอย่าง CSS
ในพื้นที่เท่านั้น — ไม่มีการอัปโหลดเลยการเปรียบเทียบคุณสมบัติ (ภาพรวม)
ใบอนุญาตแตกต่างกันไปตามแต่ละครอบครัว| เว็บไซต์ | โอเพ่นซอร์ส | เชิงพาณิชย์ฟรี | แบบอักษรที่ปรับเปลี่ยนได้ | CDN/เว็บฟอนต์ | หมายเหตุ |
|---|---|---|---|---|---|
| Google แบบอักษร | ใช่ | ใช่* | ใช่ | ใช่ | ห้องสมุดที่ใหญ่ที่สุด CDN ที่รวดเร็ว |
| ฟอนต์แชร์ | ผสม | ใช่ | มากมาย | ใช่ | ครอบครัวสมัยใหม่ |
| ฟอนต์กระรอก | ผสม | ใช่* | บาง | เครื่องกำเนิดไฟฟ้า | จัดทำขึ้นเพื่อใช้ในเชิงพาณิชย์ |
| ลีกประเภทเคลื่อนย้ายได้ | ใช่ | ใช่ | บาง | โฮสต์เอง | คลาสสิกเหนือกาลเวลา |
| เวลเวไทน์ | ใช่ | ใช่ | บาง | โฮสต์เอง | การแสดงผลแบบทดลอง |
| ดาฟอนต์ | เลขที่ | แตกต่างกันไป | น้อย | เลขที่ | เหมาะสำหรับโครงการส่วนตัว |
วิธีใช้แบบอักษรฟรีบนเว็บ
- ตรวจสอบใบอนุญาต: OFL และใบอนุญาตอนุญาตอื่นๆ เหมาะที่สุดสำหรับโครงการเชิงพาณิชย์ ไซต์บางแห่งแสดงรายการแบบอักษรสำหรับใช้ส่วนตัวเท่านั้น
- เลือกการจัดส่ง: ลิงก์ CDN เพื่อความรวดเร็ว หรือโฮสต์เองด้วย @font-face เพื่อการควบคุมและความเป็นส่วนตัว
- โหลดแบบอักษรที่สำคัญล่วงหน้าสำหรับข้อความฮีโร่ของคุณหาก CLS เป็นปัญหา กำหนดสแต็คทางเลือกเพื่อหลีกเลี่ยงการกะพริบ
- ต้องการแบบอักษรที่ปรับเปลี่ยนได้เมื่อพร้อมใช้งานเพื่อลดคำขอและรับน้ำหนักที่ยืดหยุ่น
ตัวอย่าง CDN
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<style>
body{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
</style>
ตัวอย่างการโฮสต์ด้วยตนเอง
@font-face{
font-family: "MyFont";
src: url("/fonts/MyFont-Variable.woff2") format("woff2");
font-display: swap;
}
body{ font-family: "MyFont", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
* ตรวจสอบใบอนุญาตของแต่ละครอบครัวบนเว็บไซต์ต้นทางเสมอ
คำถามที่พบบ่อย
Google Fonts ฟรีสำหรับใช้ในเชิงพาณิชย์หรือไม่
ส่วนใหญ่เผยแพร่ภายใต้ OFL และให้บริการฟรีสำหรับใช้ในเชิงพาณิชย์ ยืนยันใบอนุญาตในหน้าครอบครัวแต่ละหน้า
ฉันควรใช้แบบอักษรของไอคอนหรือไอคอน SVG
ไอคอน SVG มีความยืดหยุ่นมากขึ้นสำหรับแอปสมัยใหม่ แบบอักษรของไอคอนยังคงมีประโยชน์สำหรับการตั้งค่าอย่างรวดเร็วหรือไปป์ไลน์แบบเดิม
แบบอักษรของเว็บส่งผลต่อความเร็วไซต์หรือไม่
ใช่. ใช้ การแสดงแบบอักษร: สลับเซตย่อยหากเป็นไปได้ และจำกัดตระกูลและน้ำหนัก
แบบอักษรทั่วไปที่ดีที่สุดคืออะไร?
Inter, Roboto และ Source Sans 3 มีความหลากหลาย จับคู่กับเซอริฟ เช่น Merriweather หรือ Playfair สำหรับส่วนหัว