การย้ายไปยังกองแบบอักษรของระบบใน WordPress (อย่างไรและทำไม)

ฉันเป็นแฟนตัวยงของประสิทธิภาพเว็บ แต่ฉันก็ไม่คิดว่ามันควรจะหรือต้องประนีประนอมกับการออกแบบ มีความสมดุลที่ดีอยู่ตรงกลางเสมอ ย้อนกลับไปในปี 2017 ฉันอยู่ในบล็อกของ GitHub และกำลังค้นหาแบบอักษรของพวกเขา มันง่ายมากที่จะอ่าน ดังนั้นฉันจึงขุดลงไปในคุณสมบัติด้วย Chrome Devtools และเห็นว่าพวกเขากำลังใช้ ฟอนต์ระบบ

ฉันใช้แบบอักษรของระบบมาหลายปีแล้วและชอบมันมาก ดังนั้นวันนี้ ฉันต้องการแสดงให้คุณเห็นถึงวิธีการใช้ฟอนต์ระบบบนไซต์ WordPress ของคุณ

กองแบบอักษรของระบบคืออะไร?

มีแบบอักษรหลายประเภทให้เลือกสำหรับเว็บไซต์ คุณมีสี่ตัวเลือกที่แตกต่างกัน:

• แบบอักษรที่ปลอดภัยสำหรับเว็บ: ฟรีและไม่ต้องเสียเวลาดาวน์โหลดจากเบราว์เซอร์ แต่โดยทั่วไปแล้วจะดูล้าสมัย ดังนั้นจึงมีการใช้งานไม่มากนัก ไม่มีใครชอบ Arial หรือ Tahoma จริงๆเหรอ? ดูรายการแบบอักษรที่ปลอดภัยสำหรับเว็บทั้งหมด
• แบบอักษรของเว็บ: ดูสวยงาม แต่ต้องดาวน์โหลดจากเบราว์เซอร์ มีทั้งแบบฟรีและแบบพรีเมียมให้เลือก เพิ่มน้ำหนักหน้าโดยรวมของเว็บไซต์ของคุณ อย่างไรก็ตาม สามารถให้บริการได้จาก CDN ที่แคชไว้ ผู้ให้บริการ ได้แก่ Google, Adobe Fonts (TypeKit) เป็นต้น
• โฮสต์แบบอักษรเว็บในเครื่อง: มีตัวเลือกฟรีและพรีเมียมให้เลือก ยังคงต้องใช้เวลาดาวน์โหลดและสามารถใช้ประโยชน์จากการเชื่อมต่อ HTTP/2 เดียวบน CDN ที่แคชไว้ ขณะนี้เบราว์เซอร์หลักทั้งหมดมีการแบ่งพาร์ติชั่นแคช ดังนั้นการโฮสต์ในเครื่องจึงดีกว่าสำหรับประสิทธิภาพ คุณสามารถโฮสต์แบบอักษร Google ของคุณในเครื่องด้วย Perfmatters
• แบบอักษรของระบบ: ฟรี ดูดีทีเดียวเพราะตรงกับระบบปฏิบัติการ และไม่ต้องใช้เวลาในการดาวน์โหลด! Weather.com, GitHub, Bootstrap, Medium, Ghost, Booking.com (อ่านเรื่องแบบอักษรของระบบ), PubMed และแม้แต่แดชบอร์ด WordPress ของคุณ ในความเห็นส่วนตัวของฉันแบบอักษรของระบบดูดีขึ้นเล็กน้อยบน macOS กับ Windows

แบบอักษรของระบบไม่มีอะไรใหม่ อันที่จริงแล้วมีเดียใช้พวกเขาในปี 2558 พวกเขา รู้สึกเหมือนระบบปฏิบัติการของคุณ เพราะพวกเขาใช้ฟอนต์ดั้งเดิม ระบบปฏิบัติการสมัยใหม่จำนวนมากเลือกใช้แบบอักษรอย่างชาญฉลาด และทุกระบบมีรูปลักษณ์ที่ทันสมัย ไม่เหมือนกับการกลับไปใช้แบบอักษรที่ปลอดภัยสำหรับเว็บของ Arial หรือ Times New Roman เชื่อฉัน; ไม่มีใครอยากเห็น Times New Roman บนเว็บไซต์

และเหนือสิ่งอื่นใด แบบอักษรของระบบทำงานเหมือนกับแบบอักษรที่ปลอดภัยสำหรับเว็บ โดยที่เบราว์เซอร์ จะไม่ต้องใช้เวลาในการดาวน์โหลด วิธีนี้สามารถช่วยลดน้ำหนักของหน้าโดยรวมบนเว็บไซต์ของคุณได้ ในเดือนเมษายน 2022 แบบอักษรของเว็บโดยเฉลี่ยมีสัดส่วนประมาณ 6.07% ของน้ำหนักเว็บไซต์ทั้งหมด แม้ว่าสิ่งนี้จะไม่ใหญ่มาก แต่จำไว้ว่าการเพิ่มประสิทธิภาพเล็กๆ น้อยๆ ทุกครั้งที่คุณทำจะเพิ่มเว็บไซต์ที่รวดเร็ว โดยเฉพาะบนมือถือ

การใช้ฟอนต์ระบบมีข้อเสียหรือไม่? ไม่! นั่นคือความงามของมัน คำเตือนใน PageSpeed ​​Insights เช่น "ตรวจสอบให้แน่ใจว่าข้อความยังคงปรากฏระหว่างการโหลดแบบอักษร" จะไม่เกิดขึ้น เนื่องจากในทางเทคนิคจะไม่มีอะไรถูกดาวน์โหลด

กองแบบอักษรของระบบ CSS

ด้วยพร็อพเพอร์ตี้ตระกูลฟอนต์ที่มีฟอนต์เว็บ โดยทั่วไปแล้ว คุณจะมีฟอนต์หลักและฟอนต์สำรองหนึ่งหรือสองฟอนต์ ด้วยฟอนต์ระบบ คุณจะต้องรวมระบบปฏิบัติการที่แตกต่างกันทั้งหมด ดังนั้นคุณต้องซ้อนฟอนต์อีกสองสามแบบ นี่คือเหตุผลที่เรียกว่า "กองแบบอักษรของระบบ"

ตัวอย่างเช่น นี่คือลักษณะที่ CSS อาจปรากฏพร้อมกับแบบอักษรของเว็บ

 ตระกูลแบบอักษร: "Open Sans","Helvetica Neue",sans-serif;

และนี่คือลักษณะของสแต็กแบบอักษรของระบบ ข่าวดีก็คือ มันไม่ได้โหลดทั้งหมด มันเป็นเพียงลำดับของฟอนต์ที่ควรโหลดจากระบบปฏิบัติการหากมี

 ตระกูลแบบอักษร: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "สัญลักษณ์ Segoe UI"

คุณรู้หรือไม่ว่าแดชบอร์ด WordPress ของคุณใช้ฟอนต์ระบบ? นี่คือสิ่งที่พวกเขาใช้

 ตระกูลแบบอักษร: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif

CSS-Tricks ยังมีวิธีอื่นในการใช้แบบอักษรของระบบโดยใช้ @font-face

สูตรโกงสแต็คแบบอักษรของระบบ

นี่คือที่ที่คุณต้องเลือกการตั้งค่าที่คุณต้องการ ต่อไปนี้คือรายการแบบอักษรที่ใช้กับระบบปฏิบัติการแต่ละระบบ หมายเหตุ: สิ่งนี้เปลี่ยนแปลงไปตามกาลเวลา ดังนั้นคุณอาจต้องทบทวนฟอนต์ของคุณอีกครั้งเมื่อมีระบบปฏิบัติการใหม่ออกมา ฉันจะทำให้แน่ใจว่าจะอัปเดตรายการนี้อยู่เสมอ

วิธีการใช้กองแบบอักษรของระบบ

ฉันใช้ฟอนต์ระบบบน Woorkup.com และเว็บไซต์อื่นๆ ทั้งหมดของฉัน ฉันรู้สึกเหมือนฉันได้พบสิ่งที่ดีที่สุดของทั้งสองโลกในที่สุด และนี่คือวิธีที่ฉันทำ

ตัวเลือกที่ 1: ใช้ GeneratePress WordPress theme

ต้องการทำให้สิ่งนี้ง่ายสุด ๆ หรือไม่? เพียงย้ายไปที่ธีม GeneratePress ซึ่งเป็นสิ่งที่ฉันใช้บนเว็บไซต์ทั้งหมดของฉัน ในเครื่องมือปรับแต่ง ภายใต้ Typography คุณสามารถเลือก "System Stack" และนั่นแหล่ะ!

ธีมที่เน้นประสิทธิภาพอื่นๆ เช่น Astra ยังมีตัวเลือกในการใช้แบบอักษรของระบบ

ตัวเลือกที่ 2: เพิ่มกองแบบอักษรของระบบด้วย CSS

หากคุณกำลังใช้ธีม WordPress อื่น คุณสามารถย้ายไปยังสแต็กแบบอักษรของระบบได้อย่างง่ายดายด้วย CSS เล็กน้อย

ขั้นตอนที่ 1

ใน WordPress คุณจะต้องเปลี่ยน CSS บน font-family คุณ คุณสามารถใช้เครื่องมือปรับแต่ง WordPress เพื่อเพิ่มโค้ดได้ ภายใต้ “ CSS เพิ่มเติม”

ขั้นตอนที่ 2

ป้อนรหัสต่อไปนี้ สิ่งนี้อาจแตกต่างกันไปตามธีม แต่สำหรับส่วนใหญ่ สิ่งต่อไปนี้ควรแทนที่ทุกอย่าง ฉันใช้ฟอนต์ระบบเดียวกันกับ GithHub ยกเว้นว่าฉันกำลังเพิ่ม system-ui เป็น Chrome เวอร์ชันใหม่ที่รองรับ จำไว้ว่าจะใช้ตามลำดับที่ปรากฏในสแต็ก

 ร่างกาย {ตระกูลแบบอักษร: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "สัญลักษณ์ Segoe UI";}
h1,h2,h3,h4,h5,h6 {font-family:-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji ", "สัญลักษณ์ Segoe UI";}

คุณอาจต้องเพิ่มแท็กย่อหน้าสำหรับเนื้อหาเนื้อหา ทั้งนี้ขึ้นอยู่กับธีมของคุณ มันจะเป็นเช่นนี้:

 body, p { font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "สัญลักษณ์ Segoe UI"; }

ขั้นตอนที่ 3

คุณจะต้องปิดการใช้งานฟอนต์ของบุคคลที่สาม เช่น Google Fonts ที่คุณโหลดจากธีม WordPress ของคุณ สิ่งนี้อาจแตกต่างกันไปอีกครั้ง เนื่องจากนักพัฒนาแต่ละคนมีแบบอักษรต่างกัน แต่ตอนนี้ ธีมจำนวนมากมีวิธีง่ายๆ ในการเปิดหรือปิด Google Fonts

หากคุณใช้หนึ่งในธีมเริ่มต้นของ WordPress คุณสามารถใช้ปลั๊กอินปิดการใช้งาน Google Fonts ได้ฟรี หรือคุณสามารถปิดการใช้งานแบบอักษรของ Google ในปลั๊กอิน Perfmatters ของเรา

ก่อนและหลังการทดสอบความเร็ว

และแน่นอน ฉันไม่สามารถต้านทานได้ นี่คือก่อนและหลังการทดสอบความเร็ว การทดสอบแต่ละครั้งดำเนินการห้าครั้งและนำมาเฉลี่ย

ทดสอบความเร็วก่อน

นี่คือการทดสอบความเร็วก่อนหน้านี้ ตอนที่ฉันโหลดแบบอักษรของ Google

ทดสอบความเร็วหลัง

นี่คือการทดสอบความเร็วหลังจากใช้ฟอนต์ระบบของฉัน อย่างที่คุณเห็น ฉันลดน้ำหนักทั้งหน้าลงประมาณ 60 KB และกำจัดคำขอสามรายการ หนึ่งไปยัง fonts.googleapis.com จากนั้นดาวน์โหลดสองครั้งสำหรับ Roboto เวอร์ชันน้ำหนักแบบอักษรที่แตกต่างกัน กองแบบอักษรของระบบเร็วกว่าการใช้แบบอักษร Google ประมาณ 6%

ฉันรู้จักไซต์จำนวนมากที่ใช้ฟอนต์น้ำหนักหรือสไตล์ต่างกัน 4-5 แบบ และบางครั้งก็ใช้ฟอนต์ Google ต่างกัน 2-3 แบบ ดังนั้นคุณจึงอาจเห็นการปรับปรุงที่สำคัญยิ่งกว่าที่ฉันเคยเห็น

ฉันยังย้ายไซต์ novashare.io WordPress ไปยังแบบอักษรของระบบและได้ผลลัพธ์ที่ยอดเยี่ยม ตรวจสอบการทดสอบความเร็วด้านล่างนี้

ปรับแบบอักษรให้เรียบ

การปรับแบบอักษรให้เรียบนั้นขึ้นอยู่กับความชอบส่วนบุคคล เมื่อคุณใช้การลบรอยหยัก แบบอักษรของคุณจะบางลงและจางลงเล็กน้อย ฉันไม่ได้ใช้งานบนไซต์นี้เนื่องจากฉันชอบแบบอักษรที่หนากว่าเล็กน้อย ฉันคิดว่ามันอุ่นขึ้นเล็กน้อย แต่คุณสามารถทดลองกับทั้งคู่เพื่อดูว่าชอบอันไหน

คุณสามารถเพิ่มสิ่งนี้ลงในร่างกายได้

 ร่างกาย {
-webkit-font-smoothing: ลดรอยหยัก;
-moz-osx-font-smoothing: ระดับสีเทา;
}

สรุป

แบบอักษรของระบบอาจเป็นทางเลือกที่ดีสำหรับแบบอักษรเว็บและแบบอักษรที่ปลอดภัยสำหรับเว็บ ฉันยังชอบรูปลักษณ์ของแบบอักษรของฉันอยู่มาก และตอนนี้ฉันรู้แล้วว่ามันไม่ได้ทำให้ผู้ใช้ต้องโหลดอะไรมากมาย แม้ว่าแบบอักษรของ Google สามารถโฮสต์ในเครื่องได้ แต่ก็ยังเป็นส่วนหนึ่งของน้ำหนักหน้าโดยรวม

อยากรู้ความคิดของคุณคืออะไร? คุณเคยใช้ฟอนต์ระบบกับ WordPress แล้วหรือยัง? ถ้าเป็นเช่นนั้นแจ้งให้เราทราบด้านล่าง