วิธีเปลี่ยนแบบอักษรใน WordPress — คู่มือฉบับสมบูรณ์

แบบอักษรมีความจำเป็นสำหรับการออกแบบเว็บ ไม่ใช่แค่บน WordPress

แม้แต่ไซต์ HTML ธรรมดาก็ต้องมีชุดฟอนต์ โชคดีที่ WordPress เป็นระบบจัดการเนื้อหาแบบฟูลสแตกที่มีการเข้ารหัสแบบบูรณาการ ทำให้การเปลี่ยนแปลงการเข้ารหัสทำได้ง่ายขึ้น

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

วิธีเปลี่ยนฟอนต์ใน WordPress

คุณสามารถนำเข้าแบบอักษรจาก fonts.google.com หรือคุณสามารถเพิ่มปลั๊กอินเพื่อใช้ Google Fonts ใดก็ได้ อีกวิธีหนึ่ง คุณสามารถโฮสต์ไฟล์ฟอนต์ด้วยตนเอง (WOFF, WOFF2, SVG, OTF หรือ TTF) ได้ด้วยการดาวน์โหลดไฟล์จากฟอนต์ Foundry อัปโหลดผ่าน cPanel หรือ FTP จากนั้นแก้ไข CSS เพื่อโหลดฟอนต์

วิธีเปลี่ยนแบบอักษรโดยใช้เครื่องมือปรับแต่ง WordPress

บน WordPress.com ผู้ใช้แผนบริการฟรีสามารถเปลี่ยนแบบอักษรโดยกำหนดการตั้งค่าธีมเองหรือโดยใช้การตั้งค่าตัวกรองส่วนกลางในตัวแก้ไขบล็อก วิธีการทำขึ้นอยู่กับธีมที่คุณใช้

การปรับแต่ง CSS นั้นสงวนไว้สำหรับแผนชำระเงินหรือเว็บไซต์ WordPress ที่โฮสต์เอง

ธีมบางส่วนได้รับการพัฒนาเพื่อใช้ WordPress Global Filters อื่นๆ มีฟอนต์แบบกำหนดเองที่รวมไว้ล่วงหน้าในธีม

หากต้องการค้นหาวิธีการที่เหมาะกับธีมของคุณ ให้ไปที่ตัวเลือกการปรับแต่งธีมของคุณ

คลิกที่ ลักษณะที่ปรากฏ > ปรับแต่ง > แบบอักษร

หากคลิกตัวเลือกการปรับแต่งแบบอักษรจะแสดงข้อความว่า

“คุณสามารถเปลี่ยนแบบอักษรของคุณโดยใช้ Global Styles ซึ่งสามารถพบได้ใน Block Editor”

หมายความว่าคุณต้องสร้างโพสต์หรือหน้า จากนั้นเปลี่ยนแบบอักษรจากภายในการตั้งค่าส่วนกลางของตัวแก้ไขบล็อก

ธีมที่มีโฟลเดอร์ฟอนต์รวมอยู่ในการติดตั้งจะมีตัวเลือกในการเปลี่ยนฟอนต์

ตัวเลือกที่ไม่ทำจะไม่มีตัวเลือกแบบอักษรหรือตัวพิมพ์ให้เปลี่ยนแปลง ก็ยังทำได้ ไม่ใช่แค่เพียงไม่กี่คลิก

ธีม Twenty Twenty-One เป็นตัวอย่างของธีม WordPress ที่ไม่มีแบบอักษรเพิ่มเติม ซึ่งได้รับการออกแบบมาให้เข้ากันได้กับ Block Editor ซึ่งเป็นที่สำหรับเปลี่ยนฟอนต์ในธีมที่ใหม่กว่า

หากเครื่องมือปรับแต่งธีมของคุณไม่แสดงส่วนฟอนต์และขนาดหรือการตั้งค่าการพิมพ์ ให้ลองใช้ Global Style ในตัวแก้ไขบล็อก แต่ธีมของคุณต้องรองรับสิ่งนี้

ธีมที่เก่ากว่าหรือที่ใช้ WordPress ที่ติดตั้ง Classic Editor จำเป็นต้องใช้วิธีแก้ไขปัญหาชั่วคราว ซึ่งไม่ใช่ทั้งหมดนี้จะตรงไปตรงมา

วิธีเปลี่ยนแบบอักษรด้วย Global Style Filter

ตัวกรองสไตล์ส่วนกลางเป็นส่วนหนึ่งของตัวแก้ไขบล็อก หากต้องการเปลี่ยนแบบอักษรทั่วทั้งไซต์ ให้สร้างโพสต์หรือหน้าใหม่

ที่ด้านบนขวาของตัวแก้ไข WordPress มีไอคอนสีดำที่มีตัวอักษร A สองตัว - ตัวหนึ่งเป็นตัวพิมพ์ใหญ่และตัวพิมพ์เล็กอีกตัวอยู่เคียงข้างกัน

คลิกที่นี่และบานหน้าต่างนำทางด้านขวาจะแสดงช่วงของแบบอักษรที่คุณสามารถใช้ได้

การเปลี่ยนแบบอักษรที่นี่จะนำการเปลี่ยนแปลงไปใช้กับบล็อกทั้งหมดที่มีข้อความ

วิธีเปลี่ยนแบบอักษรใน Classic Editor

Global Styler จะใช้ได้เฉพาะเมื่อคุณใช้ตัวแก้ไขบล็อก

หากคุณติดตั้งปลั๊กอิน Classic Editor ไว้ คุณสามารถติดตั้งปลั๊กอินเพิ่มเติมหรืออ่านต่อด้านล่างเพื่อเรียนรู้วิธีเปลี่ยนแบบอักษรด้วยตนเองใน WordPress

เริ่มต้นด้วยเครื่องมือปรับแต่งธีมของคุณ ธีม WP ส่วนใหญ่มีโฟลเดอร์แบบอักษร

เพื่อความรวดเร็ว การติดตั้งปลั๊กอินฟอนต์ตัวพิมพ์เป็นวิธีที่เร็วกว่าในการปรับแต่งฟอนต์และส่วนหัวของประเภทของคุณ

ปลั๊กอิน WordPress ฟรีเพื่อเปลี่ยนแบบอักษร

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

ราคา ปาเกียว vs วาร์กัส ppv

หากคุณมีการสมัครใช้งาน Adobe Creative Cloud คุณสามารถติดตั้งปลั๊กอิน Adobe Fonts แทน หรือทำตามคำแนะนำเพิ่มเติมเกี่ยวกับวิธีการเพิ่มแบบอักษรที่กำหนดเองใน WordPress โดยไม่ต้องใช้ปลั๊กอิน

ด้านล่างนี้คือ 3 ปลั๊กอิน WordPress Typography ที่ได้รับความนิยมมากที่สุด

ปลั๊กอินเครื่องมือแก้ไขขั้นสูง

ไปที่เมนูปลั๊กอินที่แถบด้านข้างด้านซ้ายของแดชบอร์ด WordPress คลิกปลั๊กอิน > เพิ่มใหม่

พิมพ์ ' เครื่องมือแก้ไขขั้นสูง ” ในแถบค้นหา

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

ปลั๊กอินการพิมพ์ WP

ปลั๊กอินนี้ช่วยให้คุณใช้งานชุดฟอนต์ที่คุณใช้ได้มากขึ้น มันทำการเปลี่ยนแปลง HTML ของคุณและช่วยรักษาสไตล์ของคุณให้สอดคล้องและถูกต้อง

มันไม่ได้เพิ่มแบบอักษร อย่างไรก็ตาม อาจมีฟังก์ชันบางอย่างที่ช่วยให้คุณจัดรูปแบบเนื้อหาตามที่คุณต้องการ

มีแนวโน้มว่าจะมีประโยชน์มากกว่าในเว็บไซต์เผยแพร่สูตรอาหารหรือไซต์ DIY ที่ครอบคลุมการคำนวณทางคณิตศาสตร์

ในการติดตั้ง ไปที่ปลั๊กอิน > เพิ่มใหม่และค้นหา วิชาการพิมพ์ WP .

คลิกติดตั้งและเปิดใช้งาน

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

ตัวอย่างเช่น ในไซต์ที่กล่าวถึงการคำนวณทางคณิตศาสตร์ มันมีความหมายเหมือนกันกับการใช้เครื่องหมายทับเพื่อแทนที่สัญลักษณ์หาร

ปลั๊กอินนี้จะย้อนกลับว่าหากแบบอักษรที่คุณตั้งไว้มีอักขระแบ่ง

บนไซต์สูตรเช่น 1  1/2 ดูดีกว่าเป็น 1 ¹ / _สอง.

ใน HTML คุณจะต้องใช้สิ่งนั้นโดยใช้ตัวยกและตัวห้อยใน HTML (หรือปุ่มในแถบเครื่องมือของคุณ)

<sup>1</sup>/<sub>2.&nbsp;</sub>

และทำให้ง่ายต่อการจัดรูปแบบเครื่องหมาย/สัญลักษณ์การลงทะเบียน เช่น TM เป็นตัวยก และแทรกสัญลักษณ์ลิขสิทธิ์โดยใช้ (c) แทนวิธีรหัสย่อของ ALT + 0169 เพื่อรับ ©

สำหรับสัญลักษณ์ลงทะเบียนจะใช้ (r) หากไม่มีปลั๊กอินนี้ รหัสคือ ALT + 0174 เพื่อรับ ®

สำหรับการจัดรูปแบบเนื้อหาของคุณ คุณจะสามารถป้องกันแม่ม่ายได้

นี่คือเมื่อคำเดียวปรากฏในบรรทัดที่แยกจากกัน

เมื่อคำหนึ่งคำอยู่ในบรรทัดเดียวกัน คุณสามารถตั้งค่าให้ปลั๊กอินดึงคำหลายคำสุดท้ายจากบรรทัดก่อนหน้า ป้องกันไม่ให้บรรทัดแสดงด้วยคำเดียว คุณสามารถทำเช่นเดียวกันกับ URL แบบยาวได้โดยใช้ฟังก์ชันการตัดคำ

Google Fonts อย่างง่าย

Easy Google Fonts เป็นปลั๊กอินตัวพิมพ์ที่ใช้มากที่สุดบน WordPress

ในการติดตั้ง ให้ไปที่ Plugins > Add new and install the Google Fonts อย่างง่าย เสียบเข้าไป.

เมื่อติดตั้งแล้ว คุณต้องคว้าคีย์ API จาก Google สำหรับสิ่งนี้ คุณต้องมีบัญชี Google

ไปที่ https://developers.google.com/fonts/docs/developer_api. 

เลือก 'สร้างโครงการใหม่' (เลื่อนลงมาที่หน้าเพื่อค้นหาปุ่ม 'รับคีย์') จากนั้นพิมพ์ชื่อ

ชื่อที่คุณใช้ที่นี่จะแสดงใน Google Cloud Console ซึ่งคุณสามารถจัดการคีย์ API ทั้งหมดสำหรับบัญชี Google ของคุณได้

คลิก 'ถัดไป' จากนั้นคัดลอกคีย์ API ของคุณไปยังคลิปบอร์ด

กลับไปที่แดชบอร์ด WordPress ของคุณ ที่เมนูด้านซ้าย ไปที่การตั้งค่า > แบบอักษร Google แบบง่าย เลือก 'การตั้งค่า' ในเมนูการนำทางด้านบนสุดของปลั๊กอิน วางคีย์ API ของคุณ จากนั้นคลิกปุ่มบันทึก

เมื่อติดตั้งแล้ว ส่วน 'การพิมพ์' ใหม่จะถูกเพิ่มลงใน WP Customizer ของคุณ โหลดเครื่องมือปรับแต่ง จากนั้นคุณสามารถใช้แบบอักษรใดก็ได้ที่มีให้ที่ fonts.google.com

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

ฟอนต์ Heading ใช้สำหรับแท็กหัวข้อ H1 ถึง H6 และแต่ละฟอนต์สามารถเป็นฟอนต์ที่แตกต่างกันได้

ข้อเสียของความเรียบง่ายของ Google Fonts อย่างง่ายคือความเร็ว

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

ที่อาจทำให้เว็บไซต์ของคุณช้าลงเล็กน้อย

กระบวนการโหลดไซต์ของคุณเมื่อคุณเชื่อมต่อผ่าน Google Fonts API ขั้นแรกให้อ่าน HTML ของหน้าเว็บ จากนั้นเชื่อมต่อกับ fonts.googleapis.com/css เพื่อดึงข้อมูลสไตล์ชีต จากนั้นเชื่อมต่อกับ fonts.gstatic.com เพื่อดึงข้อมูลแบบอักษร โหลดบนเว็บไซต์ของคุณ

นั่นคือต่อแบบอักษร ค่อนข้างมากทีเดียว

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

ปลั๊กอินทำให้ใช้งาน Google Fonts ได้ง่าย อย่างไรก็ตาม จำเป็นต้องปรับให้เหมาะสมเพื่อประสิทธิภาพ

คุณสามารถทำได้ด้วยปลั๊กอิน OMGF สำหรับ WordPress ซึ่งเป็นสิ่งที่คุณต้องการอยู่แล้ว

นั่นเป็นเพราะว่าหากไม่มีการจับคู่ปลั๊กอินทั้งสองนี้ Easy Google Fonts ที่ใช้โดยตัวมันเองไม่เป็นไปตามระเบียบข้อบังคับด้านความเป็นส่วนตัวของข้อมูล

ทำไมถึงสำคัญ

ประเทศต่างๆ มีข้อบังคับความเป็นส่วนตัวของข้อมูลเกี่ยวกับการใช้คุกกี้ที่วางอยู่ในอุปกรณ์ของผู้ใช้

ยุโรปมีกฎหมายคุ้มครองข้อมูลที่เข้มงวดที่สุดในโลก GDPR – กฎการคุ้มครองข้อมูลทั่วไป สิ่งนี้ใช้กับไซต์ทั้งหมดที่สามารถเข้าถึงได้ในประเทศใดก็ได้ภายในสหภาพยุโรป (EU)

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

ซึ่งรวมถึงคุกกี้ของบุคคลที่สามซึ่ง fonts.googleapis.com หรือ fonts.gstatic.com ใช้เพื่อจัดเก็บระเบียน CSS ของผู้เข้าชมและบันทึกที่อยู่ IP

California Consumer Privacy Act (CCPA) มีความคล้ายคลึงกันในขอบเขตของ GDPR เพียงแต่ไม่ได้ควบคุมแบบเดียวกัน ในยุโรป มีบทลงโทษสำหรับการไม่ปฏิบัติตามข้อกำหนดสำหรับธุรกิจในยุโรป

วัตถุประสงค์ของ CCPA คือการเพิ่มความโปร่งใสสำหรับผู้อยู่อาศัยในแคลิฟอร์เนียเกี่ยวกับวิธีการใช้ข้อมูลของพวกเขา

ในทางเทคนิค CCPA กำหนดให้ผู้ใช้ได้รับแจ้งว่าเว็บไซต์ใช้คุกกี้และเพราะเหตุใด ไม่จำเป็นต้องมีตัวเลือกความยินยอมในการเลือกไม่รับ

ในยุโรป ผู้ใช้จะต้องได้รับตัวเลือกในการเลือกไม่ใช้คุกกี้ที่จัดเก็บไว้ในอุปกรณ์ของตน

บราซิลใช้ LGPD (Lei Geral de Proteçao de Dados) ในเดือนกันยายน 2020 ซึ่งเหมือนกับ GDPR ลบด้วยค่าปรับที่รุนแรงสำหรับการไม่ปฏิบัติตามข้อกำหนด การละเมิดที่ร้ายแรงจะมีบทลงโทษที่รุนแรง

ส่วนสำคัญของคุกกี้การตั้งค่า Google Fonts

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

วิธีทำให้ Google Fonts สอดคล้องกับข้อกำหนดความเป็นส่วนตัวของข้อมูลทั้งหมดได้อย่างง่ายดาย

วิธีที่ง่ายที่สุดในการโฮสต์ Google Fonts ด้วยตนเองบนเซิร์ฟเวอร์ของคุณคือการใช้ปลั๊กอิน OMGF สำหรับ WordPress ไม่จำเป็นต้องใช้ Google Font API

มีสองวิธีในการทำเช่นนี้ ด้วยตนเองหรือโดยอัตโนมัติ แต่โหมดอัตโนมัติต้องการให้คุณซื้อใบอนุญาต Pro ราคาแตกต่างกันไปตามจำนวนไซต์ที่คุณใช้

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

ปลั๊กอิน OMGF จะคัดลอกไฟล์ฟอนต์จาก fonts.google.com และนำไปไว้ที่เซิร์ฟเวอร์ของคุณ จะไม่เชื่อมต่อผู้ใช้ของคุณกับเซิร์ฟเวอร์ Google โดยใช้ API นั่นคือส่วนทางลัดสำหรับการคัดลอกไฟล์ไปยังการติดตั้ง WordPress ของคุณ

หากไม่มี คุณจะต้องทำทุกอย่างด้วยตนเอง นี่เป็นเหมือนวิธีการฟรีสำหรับการโฮสต์ด้วยตนเองโดยอัตโนมัติสำหรับ Google Fonts

นี่เป็นวิธีที่ง่ายที่จะทำ

ติดตั้งปลั๊กอิน OMGF

จากแดชบอร์ด WordPress ให้ไปที่ Plugins > Add new

ค้นหาด้วยคำสำคัญสำหรับ OMGF – ตัวย่อสำหรับ “ เพิ่มประสิทธิภาพแบบอักษร Google ของฉัน “.

คลิกปุ่ม 'ติดตั้งทันที' จากนั้นคลิก 'เปิดใช้งาน'

เมื่อเสร็จแล้ว รายการเมนูใหม่จะถูกเพิ่มลงในเมนู 'การตั้งค่า' ที่มีป้ายกำกับว่า 'เพิ่มประสิทธิภาพแบบอักษรของ Google'

คลิกที่นี่และหน้าการตั้งค่าทั่วไปจะโหลดขึ้น

อาจดูน่ากลัว อย่างไรก็ตาม การตั้งค่าเริ่มต้นมักจะเพียงพอ สิ่งที่คุณต้องทำคือตรวจสอบการตั้งค่าการกำหนดค่า จากนั้นคลิก 'บันทึกและเพิ่มประสิทธิภาพ'

สำหรับวิธีการแบบแมนนวล คุณทำอะไรได้ไม่มาก

รุ่น Pro มีคุณสมบัติการเพิ่มประสิทธิภาพมากขึ้น การใช้เวอร์ชันฟรีจะได้รับโฟลเดอร์แคชแบบอักษรที่สร้างขึ้นบนเซิร์ฟเวอร์ของคุณ นั่นคือที่ที่ไฟล์ของคุณจะถูกเก็บไว้ (/อัพโหลด/omgf).

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

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

เมื่อคุณเลื่อนลงไปที่ข้อมูล 'การตั้งค่าการตรวจจับ' คุณจะพบส่วนประเภทไฟล์ ในฐานะผู้ใช้ฟรี คุณไม่สามารถเพิ่มไฟล์ประเภทต่างๆ ได้ คุณจะไม่พลาดอะไรมาก

ประเภทไฟล์ WOFF และ WOFF2 เป็นตัวเลือกเริ่มต้น ไฟล์ EOT, TTF และ SVG เป็นคุณสมบัติระดับพรีเมียม อ่านต่อเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับประเภทไฟล์ฟอนต์และประเภทที่คุณต้องการ

เมื่อคุณพอใจกับการตั้งค่าแล้ว ให้กลับไปที่แท็บแรกชื่อ 'Optimize Fonts' เลื่อนลงมาที่ส่วน 'Manage Optimized Fonts' ตรวจสอบว่า URL ชี้ไปที่หน้าที่คุณมีแบบอักษรหรือแบบอักษรที่เผยแพร่ที่คุณต้องการ เพื่อสร้างสำเนาบนเซิร์ฟเวอร์ของคุณ จากนั้นคลิก “บันทึกและเพิ่มประสิทธิภาพ”

เมื่อคุณคลิก 'บันทึกและเพิ่มประสิทธิภาพ' ปลั๊กอินจะสแกน URL ที่คุณตั้งค่า เรียกไฟล์แบบอักษรที่จำเป็นจากเซิร์ฟเวอร์ของ Google และเพิ่มเวอร์ชันแคชของแบบอักษรแต่ละแบบลงในธีม WordPress ของคุณ

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

ในภาพหน้าจอด้านบน มีการคัดลอกแบบอักษรเพียงสองแบบเท่านั้น “Lato” และ “Monsterrat” แบบอักษรที่ใช้งานในธีม Google Fonts อื่นๆ อีกนับพันจะถูกละเว้น ดังนั้นคุณไม่ได้นำเข้าไลบรารีทั้งหมดเนื่องจากอาจทำให้แบนด์วิดท์เซิร์ฟเวอร์ของคุณเสียหาย

ฟอนต์ที่นำเข้ามาในตัวอย่างนี้มาจากธีม แม้ว่าจะเป็นธีมพรีเมียม แต่ก็ใช้ Google Fonts Developer API สิ่งนี้เหมือนกันกับธีมจำนวนมากที่มีฟอนต์แบบกำหนดเอง

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

สาเหตุที่ทำให้เกิดความกังวลเรื่องความเร็วกับธีมที่ใช้ API คือถ้าคุณใช้ธีมที่ได้รับความนิยม เซิร์ฟเวอร์ของ Google อาจล้มเหลวในการดำเนินการตามคำขอ หรืออย่างน้อยก็ไม่เร็วเท่าที่ควร

สิ่งที่คุณควรรู้เกี่ยวกับ FOUT

FOUT ย่อมาจาก 'Flash of Unstyled Text' สิ่งนี้จะเกิดขึ้นเมื่อฟอนต์ใช้เวลาโหลดนาน แทนที่จะแสดงหน้าจอสีขาวในขณะที่กำลังโหลดหน้า เบราว์เซอร์จะโหลดแบบอักษรเริ่มต้น

ส่วน “แฟลช” คือช่วงเวลาสั้นๆ ที่ฟอนต์เริ่มต้นของเบราว์เซอร์โหลด จากนั้นเว็บไซต์จะเปลี่ยนเป็นฟอนต์ที่กำหนดเองเมื่อโหลดแล้ว แม้จะเป็นเวลาไม่กี่วินาที หากคุณใช้แบบอักษรตกแต่ง FOUT จะสังเกตเห็นได้ชัดเจนยิ่งขึ้น

เพื่อป้องกันไม่ให้ FOUT เกิดขึ้น ให้ตั้งค่าแบบอักษรหลายแบบใน CSS ของคุณ

วิธีตั้งค่าฟอนต์สำรองด้วย CSS

WordPress CSS Customizer คือที่สำหรับตั้งค่ากองแบบอักษร คุณสามารถใช้ได้มากเท่าที่ต้องการ แต่โดยทั่วไป ชื่อแบบอักษรสี่ถึงสิบชื่อมีมากมาย เพื่อให้แน่ใจว่าคุณมีแบบอักษรสำรองทั่วไป

โปรดทราบว่าแบบอักษรใดก็ตามที่คุณรวมไว้ใน CSS จะต้องอยู่ในโฟลเดอร์แบบอักษรของธีม

หากไม่เป็นเช่นนั้น ควรรวม URL สำหรับแบบอักษรไว้ในสไตล์ชีตของธีมโดยใช้ฟังก์ชัน @import เพื่อดึงแบบอักษรจากที่ใดก็ตามที่อยู่บนเว็บ

ไม่ว่าคุณจะมีฟอนต์อะไรก็ตาม คุณสามารถตั้งค่าฟอนต์สแต็กใน CSS Customizer ได้

ตัวอย่างของกองแบบอักษร:

.body {
font-family: Impact, Haettenschweiler, “Franklin Gothic Bold”, Charcoal, “Helvetica Inserat”, “Bitstream Vera Sans Bold”, “Arial Black”, sans-serif;
}

คำอธิบายวิธีเข้ารหัสกองแบบอักษรใน CSS

ตระกูลแบบอักษรคือสิ่งที่ใช้เพื่อตั้งชื่อแบบอักษร สำหรับแต่ละธีม ชั้นเรียนที่คุณใช้แบบอักษรจะแตกต่างกัน คลาส CSS ทั่วไปในธีม WP คือ สำหรับเนื้อหาหลัก หรือ

@font-face {
font-family: Caveat Bold;
src: url(https://yoursite.com/wp-content/themes/twentynineteen/fonts/Caveat-Bold.ttf);
font-weight: normal;

.page-title {
font-family: “Caveat Bold”;
}