เครื่องสร้างเว็บฟอนต์

@font-face เครื่องสร้างเว็บฟอนต์

ฟอนต์แบบแปรผัน, WOFF2 และ CSS ในคลิกเดียว

ลากไฟล์ TTF, OTF, WOFF หรือ WOFF2 ของคุณ — รวมถึงฟอนต์แบบแปรผัน — เลือกการตั้งค่า และดาวน์โหลดชุดที่พร้อมใช้งานพร้อม WOFF2, WOFF, stylesheet.css ที่สมบูรณ์และหน้าเดโมสด

วางฟอนต์ที่นี่หรือคลิกเพื่อเรียกดู

TTF, OTF, WOFF, WOFF2 และฟอนต์แบบแปรผัน — อนุญาตให้หลายไฟล์

100% ฝั่งลูกค้า

การแปลงทำงานทั้งหมดในเบราว์เซอร์ของคุณโดยใช้ WebAssembly ฟอนต์ของคุณไม่เคยถูกอัปโหลด

ฟอนต์แบบแปรผัน & รูปแบบทั้งหมด

TTF, OTF, WOFF และ WOFF2 ใน — WOFF2 ที่ปรับแต่งออกมา, พร้อมการสนับสนุนแกนฟอนต์แบบแปรผันเต็มรูปแบบ (wght, wdth, slnt, ital)

เอาต์พุตที่พร้อมใช้งานในผลิตภัณฑ์

จัดส่ง stylesheet.css ที่มีการแสดงฟอนต์ที่ถูกต้อง, local() ที่ไม่บังคับ และ demo.html เพื่อให้คุณสามารถวางชุดลงในโปรเจกต์ของคุณได้ทันที

เครื่องสร้างเว็บฟอนต์คืออะไร?

เครื่องสร้างเว็บฟอนต์เปลี่ยนไฟล์ฟอนต์ที่ดาวน์โหลดหรือจากเดสก์ท็อป (TTF, OTF, WOFF, WOFF2 — รวมถึงฟอนต์แบบแปรผันสมัยใหม่) เป็นรูปแบบที่เบราว์เซอร์สามารถโหลดผ่านเว็บ — โดยหลักคือ WOFF2 ในวันนี้ โดยมี WOFF เป็นการสำรอง — และสร้างการประกาศ CSS @font-face ที่ตรงกันเพื่อให้คุณสามารถโฮสต์ฟอนต์ของเว็บไซต์ของคุณเอง

ทำไมต้องโฮสต์ฟอนต์เอง?

การโฮสต์เองให้คุณควบคุมประสิทธิภาพ ความเป็นส่วนตัว และความน่าเชื่อถือได้อย่างเต็มที่ ไม่มีการร้องขอจากบุคคลที่สามไปยัง Google Fonts (ช่วยเรื่อง GDPR), ไม่มีการค้นหา DNS เพิ่มเติม, คุณสามารถโหลดไฟล์ล่วงหน้า และคุณตัดสินใจได้ว่าต้องการน้ำหนัก สไตล์ และแกนใดบ้างที่จะจัดส่งไปยังเว็บไซต์ของคุณ

การแปลงทำงานอย่างไร

WOFF2 ห่อหุ้มเส้นขอบ TTF/OTF ของคุณในภาชนะที่บีบอัดด้วย Brotli ที่ออกแบบมาสำหรับเว็บโดยเฉพาะ — โดยทั่วไปเล็กกว่าประมาณ 30% เมื่อเปรียบเทียบกับ WOFF และเล็กกว่ามากกว่า 50% เมื่อเปรียบเทียบกับ TTF ดิบ WOFF เป็นห่อหุ้มที่บีบอัดด้วย zlib รุ่นเก่า ซึ่งยังคงมีอยู่เป็นการสำรองสำหรับเบราว์เซอร์ที่เก่าแก่ที่สุด เครื่องสร้างของเราทำงานโดยใช้ตัวเข้ารหัสและถอดรหัส WOFF2 อย่างเป็นทางการของ Google ที่คอมไพล์เป็น WebAssembly ดังนั้นการแปลงจึงเกิดขึ้นในเครื่องภายในเบราว์เซอร์ของคุณ วาง WOFF2 ที่คุณดาวน์โหลดจาก Google Fonts และเราจะถอดรหัสกลับไปเป็นภาชนะ sfnt ก่อนที่จะเข้ารหัสใหม่ — คุณไม่ต้องค้นหาฟอนต์ TTF ต้นฉบับ

สิ่งที่คุณได้รับในชุด

  • ฟอนต์ใน WOFF2 (และ WOFF/TTF ตามต้องการ) สำหรับทุกหน้าไฟล์ที่อัปโหลด — รวมถึงฟอนต์แบบแปรผันที่เก็บเป็นไฟล์เล็กไฟล์เดียว
  • stylesheet.css ที่สมบูรณ์พร้อมกฎ @font-face หนึ่งกฎต่อไฟล์, คำแนะนำ format() ที่ถูกต้อง, ช่วงน้ำหนักฟอนต์, สไตล์ฟอนต์, การยืดฟอนต์, การแสดงฟอนต์ และ local() ที่ไม่บังคับ
  • หน้า demo.html เพื่อให้คุณสามารถพรีวิวทุกน้ำหนัก สไตล์ และแกนในหลายขนาดก่อนที่จะเผยแพร่
  • การฝัง Base64 ตามต้องการเพื่อจัดส่งฟอนต์ใน CSS ของคุณสำหรับสถานการณ์ที่ต้องการทำงานแบบออฟไลน์หรือไฟล์เดียว

ความเป็นส่วนตัว & การอนุญาต

ไฟล์ไม่เคยออกจากอุปกรณ์ของคุณ — ทุกอย่างถูกประมวลผลในเบราว์เซอร์ของคุณ ตรวจสอบให้แน่ใจว่าลิขสิทธิ์ของฟอนต์ของคุณอนุญาตให้ฝังเว็บฟอนต์ก่อนที่จะเผยแพร่บนเว็บไซต์ของคุณ

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