วิธีใช้ Google Fonts ใน WordPress Child Theme

หากคุณกำลังใช้ธีมลูกของ WordPress และต้องการใช้ประโยชน์จาก Google Fonts ที่มีอยู่มากมาย มีขั้นตอนง่ายๆ สองสามขั้นตอนที่คุณต้องปฏิบัติตาม ในบทความนี้เราจะแสดงวิธีใช้ Google Fonts ในธีมลูกของ WordPress ขั้นแรก คุณต้องตัดสินใจว่าคุณต้องการใช้แบบอักษร Google ใด มีตัวเลือกมากมายให้เลือก ดังนั้นใช้เวลาสักครู่เพื่อเรียกดูตัวเลือกต่างๆ เมื่อคุณตัดสินใจได้แล้ว ให้ไปที่เว็บไซต์ Google Fonts แล้วคลิกปุ่ม “เพิ่มในคอลเลกชั่น” สำหรับแบบอักษรที่คุณต้องการใช้ จากนั้นไปที่แดชบอร์ด WordPress ของคุณและคลิกที่แท็บ "ลักษณะที่ปรากฏ" จากนั้นคลิกที่ลิงก์ "ตัวแก้ไข" ซึ่งจะนำคุณไปยังหน้าตัวแก้ไขธีม ใน Theme Editor ให้มองหาไฟล์ “Stylesheet” (style.css) ที่นี่คุณจะต้องเพิ่มโค้ดสำหรับ Google Font ของคุณ เลื่อนลงไปที่ด้านล่างของสไตล์ชีตและมองหาส่วน "การพิมพ์" ในส่วนนี้ คุณจะเห็นฟิลด์ที่เรียกว่า “google_fonts” วางรหัสที่คุณคัดลอกจากเว็บไซต์ Google Fonts ลงในฟิลด์นี้ ตอนนี้ บันทึกการเปลี่ยนแปลงของคุณ เท่านี้ก็เสร็จเรียบร้อย! ธีมลูก WordPress ของคุณควรใช้ Google Font ที่คุณเลือก

คุณสามารถเพิ่มแบบอักษร Google ลงในไซต์ WordPress โดยใช้ธีมลูก การเพิ่ม Google Font ลงในไซต์ของคุณทำได้ง่ายดายเพียงสามขั้นตอน ใช้แท็บฝัง ค้นหาตัวเลือก @import จับบรรทัด และวางลงในไฟล์ style.html ของธีมลูกของคุณ คุณสามารถใช้คุณสมบัติ font-family เพื่อให้มันปรากฏในสไตล์ของคุณ คุณจะเห็นลิงก์ไปยังตระกูลแบบอักษรที่คุณต้องการในแท็บฝังของการ เลือกแบบอักษร ภายใต้มาตรฐาน สิ่งนี้จะต้องรวมอยู่ในไฟล์ header.php ของธีม ตัวอย่างเช่น ในปีที่ยี่สิบเจ็ด ภาพควรเป็นดังนี้ วิธีการเชื่อมโยง คุณสามารถใช้แบบอักษรใหม่ในสไตล์ของคุณได้ ไม่มีการเปลี่ยนแปลงในโครงสร้างไฟล์อันเป็นผลมาจากไฟล์ css ใหม่

ฉันจะเพิ่ม Google Fonts ในธีม WordPress ของฉันได้อย่างไร

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

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

ไม่เพียงแต่แปลงอักขระธรรมดาเป็นสัญลักษณ์ทางการพิมพ์ แต่ยังสร้างอักขระที่เหมาะสมสำหรับการแสดงผลอีกด้วย เมื่อคุณใช้ WP Typography คุณสามารถปรับแต่งแบบอักษรของ WordPress เพื่อให้เหมาะกับสไตล์ของคุณได้ ในการแทนที่อักขระ เช่น เครื่องหมายลบ คุณสามารถใช้สัญลักษณ์ยัติภังค์ (en หรือ em dash) ปลั๊กอินนี้ช่วยให้จัดการสัญลักษณ์ที่ซับซ้อนได้ง่ายขึ้น เช่น เครื่องหมายคำพูด เลขชี้กำลัง สัญลักษณ์ลิขสิทธิ์ และอักขระอื่นๆ WordPress Font Manager เป็นแอปพลิเคชั่น WordPress ที่ให้คุณสร้างและจัดการธีม WordPress ของคุณ เมื่อใช้ฟอนต์เพรส คุณสามารถค้นหาและดาวน์โหลดฟอนต์จากไดเร็กทอรีบริการตัวพิมพ์เว็บที่หลากหลาย เช่น ฟอนต์ของ Google, Adobe Typekit, Cuffons และ @Fontface ชื่อของกระรอกมาจากคำภาษากรีกที่แปลว่ากระรอก เครื่องมือ Font Squirrel สามารถใช้เพื่อรวม แบบอักษร CSS เข้ากับเว็บไซต์ WordPress ด้วยปลั๊กอินนี้ คุณสามารถดูแบบอักษรประเภทใดก็ได้โดยเปลี่ยนสี เค้าร่าง ขนาด และน้ำหนัก

ฉันควรโหลด Google Fonts ในเครื่อง WordPress หรือไม่

หากไซต์ WordPress ของคุณมี ข้อผิดพลาดแบบอักษรของ Google ใน GTmetrix/Pingdom คุณควรโหลดแบบอักษร Google ในเครื่องเพื่อแก้ไขปัญหา ไม่สามารถควบคุมทรัพยากรและสคริปต์ภายนอกได้ ทำให้ไม่สามารถบีบอัด เพิ่มประสิทธิภาพ หรือย่อขนาดได้ ความเร็ว WordPress ของคุณจะได้รับผลกระทบอย่างรุนแรง

วิธีโหลด Google Fonts ใน WordPress

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

คุณสามารถสร้างกลุ่มแบบอักษรและรูปแบบต่างๆ ได้มากกว่า 1,000 แบบด้วยไลบรารีแบบอักษรของ Google ซึ่งคุณสามารถใช้บนเว็บไซต์หรือผลิตภัณฑ์ดิจิทัลของคุณ มีหลายตัวเลือกสำหรับการกำหนดค่าแบบอักษร Google สำหรับเว็บไซต์ WordPress ด้วยตนเอง โปรเจ็กต์ฟรีและโอเพ่นซอร์สได้รับการออกแบบมาเพื่อให้เข้าถึงและใช้งานได้ง่ายสำหรับโปรเจ็กต์ใดๆ ในการผสานรวมแบบอักษรของ Google ให้ใช้ข้อมูลโค้ดที่ปรากฏในไฟล์ functions.php และเชื่อมโยงไปยังตระกูลแบบอักษรเฉพาะ หากคุณกำลังมองหาวิธีที่ง่ายกว่าในการทำงานให้เสร็จสิ้น คุณสามารถใช้ปลั๊กอินแทนกระบวนการแบบแมนนวลได้ ขั้นตอนแรกคือการดาวน์โหลดปลั๊กอิน WordPress จากที่เก็บปลั๊กอิน WordPress หลังจากที่คุณเสร็จสิ้นขั้นตอนการติดตั้งและเปิดใช้งาน คุณก็พร้อมที่จะใช้งาน

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

WordPress Google Fonts เชื่อมต่อล่วงหน้า

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

เชื่อมต่อกับ https://Fonts.gstatic.com โดยใช้วิธีการเชื่อมต่อล่วงหน้า การใช้ snippet plugin dotsfired เป็นวิธีที่สะดวกที่สุดในการดู 9 คำตอบ ตั้งแต่ 1 ถึง 9 (จากทั้งหมด 9) ปรากฏว่าการตั้งค่าอย่างน้อยหนึ่งรายการที่มี Autoptomize และ YITH Zoom Magnifier ขัดแย้งกัน ด้วยเหตุนี้ เมื่อคุณ async ฟอนต์ Google กับ jQuery จะทำให้คอนโซลมีข้อผิดพลาด "jQuery is not reserved" ไม่มีการเชื่อมต่อล่วงหน้า และไม่มีสาเหตุใดๆ ที่น่าเป็นห่วง (คุณสมบัติการแสดงผลที่ไม่เฉพาะเจาะจง) ฉันสามารถให้ข้อมูลโค้ดที่ก้าวร้าวมากซึ่งสั่งให้ AO ลบ JS ทั้งหมดโดยใช้สตริง WebFontConfig ในนั้น แต่ฉันต้องการใช้การกำหนดค่าของธีมหรือปลั๊กอินของคุณ

การเพิ่ม Google Web Fonts

การเพิ่ม Google Web Fonts ทำได้ง่ายมากและใช้เวลาเพียงไม่กี่นาที ขั้นแรก คุณต้องค้นหา Google Web Fonts ที่คุณต้องการใช้บนเว็บไซต์ของคุณ เมื่อคุณพบแบบอักษรที่ต้องการใช้แล้ว คุณต้องเพิ่มโค้ดต่อไปนี้ในส่วนเว็บไซต์ของคุณ: แทนที่ “Roboto” ด้วยชื่อ Google Web Font ที่คุณต้องการใช้ เมื่อคุณเพิ่มโค้ดลงในเว็บไซต์ของคุณแล้ว คุณสามารถใช้แบบอักษรนี้ได้โดยการเพิ่ม CSS ต่อไปนี้ในสไตล์ชีตของเว็บไซต์ของคุณ: font-family: 'Roboto', sans-serif; แทนที่ “Roboto” ด้วยชื่อของ Google Web Font ที่คุณใช้ นั่นคือทั้งหมดที่มีให้!

แบบอักษร Google (ตัวย่อของเครือข่ายการจัดส่งเนื้อหา) เป็นห้องสมุดออนไลน์ของ แบบอักษรของ Google ทำให้เราสามารถเลือกแบบอักษรได้หลากหลาย โปรดดูส่วนต่อไปนี้สำหรับข้อมูลเพิ่มเติมเกี่ยวกับแบบอักษรของ Google หากคุณใช้แบบอักษร Google หลายแบบ คุณจะต้องคัดลอกลิงก์ไปที่ส่วนหัวของไฟล์ HTML แล้ววางลงในพื้นที่แบบอักษร Google หลายแบบ เลือกระหว่างแบบอักษร Google สองแบบ: Comforter และ Open Sans ในการจัดรูปแบบกฎ CSS ให้ใช้ตัวเลือกองค์ประกอบเพื่อให้ปรากฏตามที่ต้องการ ในตัวอย่างต่อไปนี้ จะมีผลลัพธ์ที่สอดคล้องกัน ด้วยการค้นหาแบบอักษร Google ในกลุ่มและหมวดหมู่ คุณสามารถสร้างแบบอักษรที่สอดคล้องกับสไตล์ที่คุณต้องการได้

3 วิธีในการเพิ่ม Google Fonts ให้กับเว็บไซต์ของคุณ

เลือกแบบอักษรของ Google และเพิ่มลงในเว็บไซต์ของคุณ การติดตั้งแบบอักษร Google เป็นหนึ่งในไม่กี่ตัวเลือกที่มีอยู่ในเว็บไซต์ของคุณ หากคุณต้องการเปลี่ยนรูปแบบแบบอักษร ให้ไปที่ Google และค้นหาแบบอักษร จากนั้นในหมวดแบบอักษรและตระกูล ให้เลือกสไตล์ที่คุณต้องการ หลังจากที่คุณเลือกแบบอักษรแล้ว คุณจะต้องคัดลอกลิงก์แบบอักษรและวางลงในส่วนหัวของไฟล์ HTML หากคุณต้องการนำเข้าแบบอักษร Google จากเว็บไซต์อื่น ให้ทำตามขั้นตอนเหล่านี้ การนำเข้าแบบอักษรของ Google ช่วยให้คุณใช้แบบอักษรได้โดยไม่ต้องคัดลอกลิงก์แบบอักษรจากเว็บไซต์ของคุณ โดยการเปิด Google Fonts และคลิกที่แบบอักษร (การ์ดที่มี) คุณสามารถเลือกรูปแบบที่คุณต้องการได้ ทางด้านขวา คุณจะพบคอนเทนเนอร์ชื่อ Selected family เมื่อได้รับพร้อมท์ให้ฝัง ให้เลือก link> หรือนำเข้า[/link] ขึ้นอยู่กับตำแหน่งที่จะเพิ่มแบบอักษร (ใน HTML หรือ CSS)