แบบอักษรที่โฮสต์ด้วยตนเองคือไฟล์แบบอักษรที่ให้บริการจากเซิร์ฟเวอร์ของคุณเองแทนที่จะเป็นไฟล์ของผู้ให้บริการแบบอักษรบุคคลที่สาม (เช่น Google Fonts)
การแสดงแบบอักษรที่รวดเร็วนั้นสำคัญอย่างยิ่ง เพราะการแสดงแบบอักษรที่เร็วขึ้นไม่เพียงหมายความว่าผู้ใช้จะเห็นข้อความได้เร็วขึ้นเท่านั้น แต่ยังมีผลอย่างมากว่าแบบอักษรนั้นทำให้เกิดการเปลี่ยนแปลงเลย์เอาต์ด้วยหรือไม่ หากส่งแบบอักษรไม่ได้ก่อนที่จะต้องใช้ ก็จะมีการเปลี่ยนเลย์เอาต์เมื่อมีการสลับแบบอักษร ขนาดของการเปลี่ยนเลย์เอาต์นี้อาจแตกต่างกันไป โดยขึ้นอยู่กับว่าแบบอักษรสำรองตรงกับแบบอักษรของเว็บมากน้อยเพียงใด ในการดูการทำงานของปรากฏการณ์นี้ ให้ดูการสาธิตและเปรียบเทียบการเปลี่ยนแปลงของเลย์เอาต์ที่เกิดขึ้นในการเชื่อมต่อที่รวดเร็วกับการเชื่อมต่อที่ช้า
ตัวอย่างด้านล่างรวมเทคนิคด้านประสิทธิภาพ 2 แบบไว้ด้วยกันเพื่อแสดงแบบอักษรที่โฮสต์ด้วยตนเองให้เร็วที่สุดเท่าที่เป็นไปได้ ได้แก่ การใช้การประกาศแบบอักษรในบรรทัดและการใช้รูปแบบแบบอักษร WOFF2
การประกาศแบบอักษรในบรรทัด: การประกาศ
@font-faceและfont-familyในบรรทัดในเอกสารหลัก แทนที่จะรวมข้อมูลนี้ในสไตล์ชีตภายนอกจะช่วยให้เบราว์เซอร์ระบุได้ว่าจะใช้ไฟล์แบบอักษรใดในหน้าเว็บโดยไม่ต้องรอดาวน์โหลดไฟล์สไตล์ชีตแยกต่างหาก ซึ่งเป็นสิ่งสำคัญเนื่องจากโดยทั่วไปเบราว์เซอร์จะไม่ดาวน์โหลดไฟล์แบบอักษรจนกว่าจะทราบว่ามีการใช้งานไฟล์นั้นๆ ในหน้าเว็บ ในกรณีส่วนใหญ่ การประกาศแบบอักษรในบรรทัด แนะนำให้ใช้preloadเพื่อโหลดแบบอักษรWOFF2: จากแบบอักษรสมัยใหม่ WOFF2 เป็นแบบอักษรใหม่ล่าสุดที่รองรับเบราว์เซอร์ได้กว้างที่สุด และบีบอัดได้ดีที่สุด เพราะใช้ Brotli ทำให้ WOFF2 บีบอัดได้มากกว่า WOFF 30%
หากต้องการปรับปรุงประสิทธิภาพเพิ่มเติม ให้พิจารณาใช้การตั้งค่าย่อยแบบอักษร การตั้งค่าย่อยแบบอักษรคือการแบ่งไฟล์แบบอักษรออกเป็นส่วนย่อยๆ ซึ่งโดยทั่วไปจะมีเป้าหมายเพื่อนำอักขระที่ไม่ได้ใช้ออก วิธีนี้จะช่วยลดขนาดไฟล์ของแบบอักษรได้อย่างมาก เครื่องมือสำหรับการสร้างชุดย่อยของแบบอักษร ได้แก่ fontkit, subfont และ glyphhanger
ดูข้อมูลเพิ่มเติมเกี่ยวกับแนวทางปฏิบัติแนะนำสำหรับแบบอักษรที่โฮสต์ด้วยตนเองได้ที่การใช้แบบอักษรที่โฮสต์ด้วยตนเอง
ตัวอย่าง
HTML
<head>
<style>
@font-face {
font-family: 'Google Sans';
src: url("Google Sans.woff2") format('woff2');
font-display: swap;
}
body {
font-family: system-ui;
font-size: 1em;
}
h1 {
font-family: 'Google Sans', sans-serif;
font-size: 3em;
}
</style>
</head>