self hosting fonts

ลิงก์ถาวร
/index.html

เว็บไซต์ (หน้า Git)

ฟอนต์โฮสติ้งด้วยตนเอง

พวกเราหลายคนใช้ Google Fonts ผ่าน CDN อย่างไรก็ตามเยอรมนีได้ตัดสินใจว่าสิ่งนี้ขัดต่อ GDPR โดยปล่อยให้เจ้าของเว็บไซต์เปิดรับการดำเนินคดี

เรายังสามารถแสดง Google Fonts ได้โดย:

1. การดาวน์โหลดตัวอักษร (ตัวแปร) จาก Google Fonts แล้ว
2. การแปลงไฟล์. ttf เป็น. woff และ .woff2 โดยใช้เครื่องกำเนิดฟอนต์เว็บแล้ว
3. ใช้ @font-face ใน CSS และ
4. การโหลดแบบอักษรใน HTML ล่วงหน้า

หมายเหตุ : หน้านี้มุ่งเน้นไปที่ Google Fonts แต่หลักการเดียวกันนี้ใช้กับตัวอักษรเว็บประเภทอื่น ๆ

เครื่องกำเนิดฟอนต์เว็บ

Font Squirrel นี้ใช้ได้กับ "Roboto" แต่ล้มเหลวด้วยแบบอักษรคงที่ของทั้ง "Lato" และ "Open Sans"

Creative Fabrica ฉันใช้สิ่งนี้สำหรับไฟล์ "Lato" และ "Open Sans" ฉันต้องอัปโหลดแต่ละตัวแปรทีละครั้ง

HTML

ฉันได้รับคำแนะนำให้โหลดแบบอักษรไว้ล่วงหน้าในหน้า HTML นี่ควรจะเร่งการส่งมอบแบบอักษรและเพิ่มประสิทธิภาพการทำงานของเว็บหลัก (CWVs) ของ Google อย่างไรก็ตามฉันเห็นคำเตือนหลังจากทำสิ่งนี้ (ดูการทดสอบ/Firefox และ Firefox Developer Edition ด้านล่าง)

 < head >
  < link
    rel =" preload "
    href =" roboto-light-webfont.woff2 "
    as =" font "
    type =" font/woff2 "
    crossorigin =" anonymous "
  />
  < link
    rel =" preload "
    href =" roboto-regular-webfont.woff2 "
    as =" font "
    type =" font/woff2 "
    crossorigin =" anonymous "
  />
  < link
    rel =" preload "
    href =" roboto-medium-webfont.woff2 "
    as =" font "
    type =" font/woff2 "
    crossorigin =" anonymous "
  />
  ...
  <!-- CSS file comes after preload -->
</ head > 

CSS

 @font-face {
  font-family : "Roboto" ;
  font-weight : 300 ;
  src : url ( "roboto-light-webfont.woff2" ) format ( "woff2" ) , url ( "roboto-light-webfont.woff" )
      format ( "woff" );
}
/** Regular: 400 **/
@font-face {
  font-family : "Roboto" ;
  font-weight : 400 ;
  src : url ( "roboto-regular-webfont.woff2" ) format ( "woff2" ) , url ( "roboto-regular-webfont.woff" )
      format ( "woff" );
}
/** Medium: 500 **/
@font-face {
  font-family : "Roboto" ;
  font-weight : 500 ;
  src : url ( "roboto-medium-webfont.woff2" ) format ( "woff2" ) , url ( "roboto-medium-webfont.woff" )
      format ( "woff" );
}

การทดสอบ

• ทดสอบ:
• Windows 10
• โครเมี่ยม
• Firefox, Firefox Developer Edition
  • บันทึก . คำเตือนถูกแสดงในคอนโซลของเบราว์เซอร์ทั้งสองนี้เท่านั้น คำเตือนมี 2 ประเภท:
  1. เค้าโครงถูกบังคับก่อนที่หน้าจะโหลดเต็ม หากสไตล์ชีทยังไม่ได้โหลดสิ่งนี้อาจทำให้เนื้อหาที่ไม่มีการเปลี่ยนแปลง
  2. คำเตือนอื่น ๆ สำหรับตัวแปรแบบอักษรแต่ละตัวและเกิดขึ้นหลังจากนั้นประมาณ 10 วินาทีเช่น "Lato":
  • ทรัพยากรที่“ https://chrisnajman.github.io/self-hosting-fonts/fonts/lato/lato-light-webfont.woff2” โหลดไว้ล่วงหน้าไม่ได้ใช้ภายในไม่กี่วินาที ตรวจสอบให้แน่ใจว่ามีการตั้งค่าแอตทริบิวต์ทั้งหมดของแท็ก preload อย่างถูกต้อง
  • ทรัพยากรที่“ https://chrisnajman.github.io/self-hosting-fonts/fonts/lato/lato-regular-webfont.woff2” โหลดไว้ล่วงหน้าไม่ได้ใช้ภายในไม่กี่วินาที ตรวจสอบให้แน่ใจว่ามีการตั้งค่าแอตทริบิวต์ทั้งหมดของแท็ก preload อย่างถูกต้อง
  • ทรัพยากรที่“ https://chrisnajman.github.io/self-hosting-fonts/fonts/lato/lato-bold-webfont.woff2” โหลดไว้ล่วงหน้าไม่ได้ใช้ภายในไม่กี่วินาที ตรวจสอบให้แน่ใจว่ามีการตั้งค่าแอตทริบิวต์ทั้งหมดของแท็ก preload อย่างถูกต้อง
  • การอภิปรายและการค้นหาในสแต็กล้นยังไม่ได้รับคำตอบที่เข้าใจได้ อย่างไรก็ตามฉันโพสต์คำถามด้วยตัวเองในสแต็กล้นและถ้าได้รับคำตอบฉันจะอัปเดต readme.md นี้ด้วยข้อมูลใหม่ใด ๆ
• Microsoft Edge

กิตติกรรมประกาศ

ข้อมูลจำนวนมากมาจากแบบอักษรตัวอักษรที่อธิบาย (รวมถึง Google Fonts) // @Font-Face Tutorial (YouTube) ข้อมูลเกี่ยวกับการโหลดล่วงหน้า/CWVs และการปฏิบัติตามกฎระเบียบที่ไม่ใช่ GDPR เกิดขึ้นจากเธรดความคิดเห็นในหน้าเดียวกัน