WordPress Web Fonts API มาถึงแล้ว

การเดินทางสู่เว็บฟอนต์ API ใน WordPress เป็นรถไฟเหาะแห่งอารมณ์สำหรับนักพัฒนา หลังจากถูกเลิกใช้จากรุ่น 5.9 ของ WordPress มันถูกย้ายไปที่โครงการ Gutenberg ซึ่งมันสามารถสร้างควบคู่ไปกับคุณสมบัติที่เกี่ยวข้องซึ่งอาศัยมัน

API ถูกรวมเข้ากับปลั๊กอิน Gutenberg และควรลงจอดในเวอร์ชัน 12.8 ผู้เขียนธีมที่ต้องการทดสอบสามารถโคลนปลั๊กอินเวอร์ชัน dev หรือดาวน์โหลดเวอร์ชันกลางคืนจาก Gutenberg Times

Jono Alderson เปิดตั๋วเดิมสำหรับ Web Fonts API ในเดือนกุมภาพันธ์ 2019 อย่างไรก็ตาม ยังไม่ถึงปลายปี 2021 ที่ได้รับการสนับสนุนและการพัฒนาจำนวนมาก โดยบัญชีส่วนใหญ่ API ดูพร้อมที่จะจัดส่งกับ WordPress 5.9 อย่างไรก็ตาม แอนดรูว์ ออซ หนึ่งในผู้นำนักพัฒนา WordPress ถูกระงับ

ไม่ใช่การตัดสินใจที่เป็นที่นิยม แต่อาจเป็นทิศทางที่ดีที่สุด API ถูกจำกัดเพราะยังไม่มีการรองรับ theme.json การใช้งานผ่าน PHP เท่านั้น หมายความว่าผู้เขียนธีมส่วนใหญ่จะทำในสิ่งที่พวกเขามีอยู่เสมอ — เปิดตัวโซลูชันของตนเอง นี่ไม่ใช่อุปสรรคสำหรับการเปิดตัว แต่น่าจะเป็นกรณีการใช้งานทั่วไปของ API

ในขณะที่หลายคนต้องการเห็นคุณลักษณะนี้ใน WordPress 5.9 แต่เดือนพิเศษได้ให้เวลาในการพัฒนาเป็น API ที่สะอาดขึ้นซึ่งรวมเข้ากับไซต์และเครื่องมือแก้ไขเนื้อหา

ผู้เขียนธีมสามารถกำหนดคำจำกัดความแบบอักษรควบคู่ไปกับตระกูลที่เกี่ยวข้องในไฟล์ theme.json และ WordPress จะโหลด @font-face CSS ที่จำเป็นโดยอัตโนมัติในตัวแก้ไขและที่ส่วนหน้า ฉันได้ทดสอบสิ่งนี้อย่างกว้างขวางและไม่พบปัญหาใด ๆ

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

Ozz ลงรายละเอียดเพิ่มเติมในตั๋วก่อนหน้านี้ แต่คำแนะนำของเขาคือเลิกสนับสนุน Google Fonts ในตอนนี้:

เพิ่มการรองรับเฉพาะฟอนต์ในเครื่องในตอนนี้ หาก WordPress ตัดสินใจที่จะรวมการสนับสนุนสำหรับ Google CDN ในภายหลัง การใช้งานจะต้องพิจารณากฎหมายและข้อจำกัดด้านความเป็นส่วนตัวของเว็บ และเชื่อมโยงกับ API คำยินยอมของผู้ใช้ในที่สุด เป็นต้น

บทความที่เกี่ยวข้อง: ศาลเยอรมันปรับเจ้าของเว็บไซต์ฐานละเมิด GDPR โดยใช้แบบอักษรที่โฮสต์โดย Google

Ari Stathopoulos หนึ่งในนักพัฒนาที่อยู่เบื้องหลัง web fonts API อธิบายว่าการรวมโซลูชันในคอร์ที่เขียนไฟล์ฟอนต์โดยตรงไปยังเซิร์ฟเวอร์จะช่วยปรับปรุงความเป็นส่วนตัว:

แทนที่จะลบออก บางทีเราอาจนำไปใช้อย่างถูกต้อง บังคับใช้เว็บฟอนต์ที่โฮสต์ในเครื่องเพื่อปรับปรุงประสิทธิภาพและความเป็นส่วนตัว ด้วยวิธีนี้ เราจะเป็นตัวอย่างที่ดีและเห็นการปรับปรุงประสิทธิภาพและความเป็นส่วนตัวที่สำคัญในระบบนิเวศ WP เป็นธีมและปลั๊กอินที่ปัจจุบันใช้แบบอักษร Google, Adobe-fonts และสิ่งอื่นๆ ที่จะเริ่มใช้ API

สำหรับตอนนี้ ดูเหมือนว่าฟอนต์ในเครื่องจะได้รับการสนับสนุนอย่างเป็นทางการ แต่ผู้เขียนธีมและปลั๊กอินต้องลงทะเบียนผู้ให้บริการที่กำหนดเอง ความกลัวอย่างหนึ่งที่ไม่สนับสนุน Google Fonts คือจะมีโซลูชันที่แข่งขันกันมากมายในธรรมชาติ แทนที่จะเป็นผู้ให้บริการที่แข็งแกร่งรายเดียวที่ทุกคนวางใจได้ ยิ่งนักพัฒนาสร้างวงล้อของตัวเองมากเท่าไหร่ การใช้งานที่แตกต่างกันก็จะยิ่งมีข้อบกพร่องหรือปัญหาด้านความปลอดภัย

Automattic มีแพตช์ฉบับร่างสำหรับผู้ให้บริการ Google สำหรับ Jetpack แล้ว สมมติว่าถูกดึงเข้าไปในปลั๊กอิน มันจะขัดแย้งกับธีมที่ลงทะเบียน ID ผู้ให้บริการ google ของตัวเองอย่างไม่ต้องสงสัย

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

ยังมีปัญหาบางอย่างที่ต้องแก้ไขเกี่ยวกับ API อย่างไรก็ตาม การผลักดันให้ผ่านช่วงต้นของรอบการเผยแพร่ WordPress 6.0 นี้จะทำให้ทุกคนมีเวลาในการทดสอบและช่วยปรับปรุง

การทดสอบฟอนต์ที่แถมมา

มีสองวิธีในการลงทะเบียนแบบอักษรเว็บกับ WordPress สำหรับผู้สร้างธีม วิธีแก้ปัญหาที่ง่ายที่สุดคือกำหนดผ่านไฟล์ theme.json นี่คือวิธีที่ฉันจะกล่าวถึงด้านล่างเนื่องจากไฟล์ได้รับมาตรฐานตั้งแต่ WordPress 5.8 มีตัวอย่าง PHP ในตั๋วคำขอดึง

คีย์และค่าของ theme.json ส่วนใหญ่สอดคล้องกับกฎ CSS @font-face ผู้เขียนธีมควรแปรงขึ้นหากไม่ได้ใช้งานมาระยะหนึ่งแล้ว

สำหรับการทดสอบ ฉันลงทะเบียนแบบอักษรเว็บสามแบบผ่านธีมของฉัน และภาพหน้าจอต่อไปนี้แสดงให้เห็นการใช้งานจริงในตัวแก้ไข:

แบบอักษรของเว็บควรลงทะเบียนภายใต้ settings.typography.fontFamily โดยเป็นส่วนหนึ่งของคำจำกัดความตระกูลแบบอักษรเฉพาะ ต่อไปนี้คือสำเนาของโค้ดที่ฉันกำลังทดสอบในธีมใดธีมหนึ่งของฉันโดยใช้แบบอักษร Cabin:

 { "settings": { "typography": { "fontFamilies": [ { "fontFamily": "\"Cabin\", sans-serif", "slug": "primary", "name": "Primary", "fontFace": [ { "fontFamily": "Cabin", "fontWeight": "400 700", "fontStyle": "normal", "src": [ "file:./public/fonts/cabin/Cabin-VariableFont_wdth,wght.ttf" ] }, { "fontFamily": "Cabin", "fontWeight": "400 700", "fontStyle": "italic", "src": [ "file:./public/fonts/cabin/Cabin-Italic-VariableFont_wdth,wght.ttf" ] } ] } ] } } }

โปรดทราบว่า file:./public/fonts/*.ttf สัมพันธ์กับโฟลเดอร์ธีม ผู้เขียนธีมจำเป็นต้องปรับให้เข้ากับโครงสร้างธีมของตน