จะเพิ่ม Google Fonts ใน WordPress ได้อย่างไร? 4 วิธีง่ายๆ!

เผยแพร่แล้ว: 2020-09-19

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

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

ทำไมต้องเพิ่ม Google Fonts ใน WordPress?

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

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

และส่วนที่ดีที่สุดคือการเพิ่ม Google Fonts ลงใน WordPress นั้นค่อนข้างง่ายและใช้เวลาเพียง 5 นาทีเท่านั้น มีหลายวิธีที่จะทำ

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

มีหลายวิธีในการรวม Google Fonts ใน WordPress:

  1. การใช้ปลั๊กอิน
  2. การแก้ไขไฟล์ functions.php
  3. ผ่าน Style.css
  4. การแก้ไข ไฟล์ header.php

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

ตรวจสอบการรวมแบบอักษรของ Google

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

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

ตอนนี้ มาดูแต่ละวิธีในการเพิ่ม Google Fonts ให้กับไซต์ WordPress ของคุณ

1) การใช้ปลั๊กอิน

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

ขั้นแรก ติดตั้งและเปิดใช้งานปลั๊กอินบนเว็บไซต์ของคุณ

เพิ่มแบบอักษร Google ลงใน wordpress - ปลั๊กอิน Google Fonts

หลังจากนั้น ไปที่ Plugins และตรวจสอบการตั้งค่าของปลั๊กอิน

เมื่อคุณคลิกที่มัน คุณจะถูกเปลี่ยนเส้นทางไปยังเครื่องมือปรับแต่ง WordPress

จากที่นั่น คุณสามารถควบคุมรูปแบบตัวอักษรของเว็บไซต์ของคุณได้ คุณจะเห็นการกำหนดค่าหลักสี่แบบ:

  • การตั้งค่าพื้นฐาน
  • ตั้งค่าขั้นสูง
  • การโหลดแบบอักษร
  • แก้จุดบกพร่อง

มาดูกันว่าการตั้งค่าพื้นฐานและขั้นสูงมีอะไรบ้าง

การตั้งค่าพื้นฐาน

จากส่วนการพิมพ์พื้นฐาน คุณสามารถเลือกกลุ่มแบบอักษรเริ่มต้นสำหรับเนื้อหา หัวเรื่อง และช่องป้อนข้อมูลได้

เพิ่มแบบอักษร Google ลงใน wordpress - การตั้งค่าพื้นฐานของ Google Fonts

จากเมนูแบบเลื่อนลงใต้แต่ละหมวด Font Family คุณจะสามารถเลือก Google Fonts ได้หลายร้อยแบบ ถ้าคุณรู้แบบอักษรที่ต้องการ ก็พิมพ์โดยใช้คุณลักษณะการค้นหา

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

เมื่อเสร็จแล้ว ให้เผยแพร่การเปลี่ยนแปลง

ตั้งค่าขั้นสูง

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

เพิ่มแบบอักษรของ Google ลงใน wordpress - การตั้งค่าขั้นสูงของ Google Fonts

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

เวอร์ชันฟรีของ Google Fonts มาพร้อมกับคุณลักษณะที่จำกัด แต่ยังมีเวอร์ชันพรีเมียมที่เริ่มต้นที่ 29 USD สำหรับไซต์เดียว

เวอร์ชัน Pro นี้จะช่วยคุณกำหนดค่าต่างๆ เช่น ขนาดแบบอักษร สี c o ptimization และองค์ประกอบ c ustom เป็นตัวเลือกที่ดีหากคุณต้องการควบคุมตัวเลือกการพิมพ์ทั้งหมดของคุณ ในทางกลับกัน ถ้าคุณไม่ต้องการใช้จ่ายเงินกับสิ่งนี้ คุณสามารถทำการเปลี่ยนแปลงเหล่านี้ได้โดยใช้ CSS เล็กน้อย

2) แก้ไขไฟล์ functions.php

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

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

หมายเหตุ : เป็นที่น่าสังเกตว่าถ้าคุณใช้ Code Snippets คุณไม่จำเป็นต้องสร้างธีมย่อย อย่างไรก็ตามเราแนะนำให้มีเสมอ

ดังนั้น ในการแก้ไข functions.php โดยใช้ Code Snippets ก่อนอื่น ให้ติดตั้งและเปิดใช้งานปลั๊กอิน

เพิ่มแบบอักษร Google ลงใน wordpress - ตัวอย่างโค้ด

จากนั้นไปที่การตั้งค่าของปลั๊กอิน จากที่นั่น คุณสามารถเพิ่มข้อมูลโค้ดใหม่ลงในไซต์ของคุณได้

เลือกแบบอักษร

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

เพิ่มแบบอักษร Google ลงใน wordpress - เลือกแบบอักษร

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

คุณสามารถตรวจสอบการเลือกของคุณได้ที่แผงด้านขวา

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

เพิ่มแบบอักษรของ Google ลงใน wordpress - วิธีการฝัง

เพิ่มแบบอักษรให้กับเว็บไซต์ของคุณ

ตอนนี้ ให้คัดลอกข้อมูลโค้ดต่อไปนี้แล้ววางลงในปลั๊กอิน Code Snippets

 <?php
ฟังก์ชั่น wpb_add_google_fonts () {
   wp_enqueue_style( 'wpb-google-fonts', 'https://fonts.googleapis.com/css2?family=Lato:[email protected];700&display=swap', false );
   }
   
   add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );
?>

ตรวจสอบให้แน่ใจว่าคุณได้แทนที่ URL แบบอักษรด้วยแบบอักษรที่คุณเลือก

เพิ่มแบบอักษร Google ลงใน wordpress - เพิ่ม snippet

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

หากคุณไม่ต้องการใช้ปลั๊กอินสำหรับงานนี้ เพียงวางโค้ดด้านบนลงในไฟล์ functions.php ของธีมลูกโดยใช้ไคลเอนต์ FTP

ใช้แบบอักษรใหม่

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

 ร่างกาย {
ตระกูลแบบอักษร: 'Lato', sans-serif;
} 

เพิ่มแบบอักษรของ Google ลงใน wordpress - CSS เพิ่มเติม

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

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

 ชั่วโมง3 { 
ตระกูลแบบอักษร: 'Lato', sans-serif; 
}

ด้วยวิธีนี้ คุณจะสามารถเพิ่มตระกูล Google Font ได้ไม่จำกัดและปรับแต่งไซต์ WordPress ของคุณ

3) ปรับแต่ง style.css (@import)

อีกวิธีในการ เพิ่ม Google Fonts ลงใน WordPress คือการใช้ไฟล์ style.css คราวนี้แทนที่จะใช้โค้ด PHP คุณจะแก้ไข style.css ของเว็บไซต์เพื่อเพิ่มตระกูลฟอนต์ใหม่

เลือกแบบอักษร

ขั้นแรก ไปที่ Google Fonts แล้วเลือกแบบอักษรที่คุณต้องการใช้ในไซต์ของคุณ ภายใต้ส่วน ฝัง ให้เลือกโหมด @import

เพิ่มแบบอักษรให้กับเว็บไซต์ของคุณ

ตอนนี้ แผงจะแสดงโค้ด CSS เฉพาะให้คุณเห็น เพียงคัดลอกโค้ดแล้ววางลงใน CSS เพิ่มเติม ในแดชบอร์ด WordPress ของคุณ

จากนั้นกดปุ่ม เผยแพร่

ใช้แบบอักษรใหม่

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

 ร่างกาย {
ตระกูลแบบอักษร: 'Kufam' เล่นหาง;
}

อย่างที่คุณเห็น ส่วนการแสดงตัวอย่างแบบสดจะอัปเดตและแสดงการเปลี่ยนแปลงโดยอัตโนมัติ

เพิ่มแบบอักษร Google ลงใน wordpress - ใช้แบบอักษร

ในทำนองเดียวกัน หากคุณต้องการใช้ฟอนต์ใหม่กับส่วนหัว h2 ทั้งหมด โค้ดที่คุณต้องใช้คือ:

 ชั่วโมง2 { 
ตระกูลแบบอักษร: 'Kufam' เล่นหาง; 
}

นี่เป็นอีกวิธีง่ายๆ ที่แม้แต่มือใหม่ก็ใช้ได้ และข้อดีคือคุณไม่จำเป็นต้องมีปลั๊กอินใดๆ

4) แก้ไขไฟล์ header.php

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

สำหรับสิ่งนี้ คุณจะต้อง:

  • ลิงก์ของ Google Font
  • เส้นทางไปยัง ไฟล์ style.css ของคุณ

เรามาดูวิธีการรับแต่ละอันกัน

รับลิงก์ของ Google Font

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

ในแถบที่อยู่ คุณจะเห็น URL ของแบบอักษร

เพิ่มแบบอักษรของ Google ลงใน wordpress - URL แบบอักษร

รับเส้นทาง style.css

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

คุณสามารถค้นหาธีมที่ใช้งานอยู่ได้ในส่วนลักษณะที่ปรากฏในหน้าแดชบอร์ดของ WordPress

ตัวอย่างเช่น ในกรณีของเรา มันคือยี่สิบยี่สิบ

ใน cPanel เราจะไปที่ wp-content > ธีม > ยี่สิบยี่สิบ

ในแผงด้านซ้าย คุณจะเห็นเส้นทางไปยังไฟล์ธีมของคุณ คัดลอก

จากตัวอย่างของเรา เราได้สิ่งนี้: public_html/wp-content/themes/twentytwenty ตอนนี้ สิ่งที่คุณต้องทำคือลบส่วน public_html เพิ่มชื่อโดเมนที่นั่น และพูดถึงไฟล์ / style.css ที่ส่วนท้ายของโค้ด ดังนั้นโค้ดใหม่จะเป็นแบบนี้ www.example.com/wp-content/themes/twentytwenty/style.css

เมื่อคุณเปิด URL บนเบราว์เซอร์ ไฟล์ style.css จะโหลดขึ้น หากคุณได้รับหน้าข้อผิดพลาด 404 แสดงว่าเส้นทางไปยัง ไฟล์ style.css ของคุณไม่ถูกต้อง

เพิ่มลิงก์และ style.css ของ Google Font ที่ส่วนหัว

เมื่อคุณมีลิงก์ของแบบอักษรและเส้นทาง style.css แล้ว สิ่งที่คุณต้องทำเพื่อเพิ่ม Google Fonts ลงในไซต์ WordPress ของคุณคือคัดลอกโค้ดจากด้านล่าง และวางลงใน ไฟล์ header.php ของธีม

 <link href="https://fonts.googleapis.com/css2? family= Oxygen & display=swap" rel="stylesheet">
<link rel = "stylesheet" type = "text/css" href = "http://yoursite.com/wp-content/themes/yourtheme/style.css" สื่อ = "ทั้งหมด" >

อย่าลืมแทนที่ URL ด้วยแบบอักษรของคุณและเปลี่ยนเส้นทางไปยัง style.css ของคุณเอง

หากคุณไม่สะดวกที่จะแก้ไข ไฟล์ header.php คุณสามารถใช้ปลั๊กอินแทรกส่วนหัวและส่วนท้ายเพื่อเพิ่มโค้ดได้ มาดูวิธีการใช้เครื่องมือนี้กัน

เปลี่ยน header.php ด้วยปลั๊กอิน

ขั้นแรก ติดตั้งและเปิดใช้งาน แทรกส่วนหัวและส่วนท้ายบนไซต์ของคุณ

หลังจากนั้น ไปที่ การ ตั้งค่า > แทรกส่วนหัวและส่วนท้าย

คุณจะเห็นสามช่วงตึกที่นั่น

  • หัวข้อ
  • ร่างกาย
  • ส่วนท้าย

ขณะที่คุณจะเพิ่มโค้ดลงในส่วนหัว ให้วางโค้ดด้านบนด้วย URL ของฟอนต์และเส้นทาง style.css ใน สคริปต์ในส่วนส่วนหัว จากนั้น อย่าลืมบันทึกการเปลี่ยนแปลง

คุณสามารถปล่อยให้เนื้อหาและส่วนท้ายว่างเปล่าได้ เนื่องจากคุณจะไม่ทำการเปลี่ยนแปลงใดๆ ที่นั่น

โค้ดที่คุณเพิ่งวางจะอยู่เหนือแท็ก </head> หากคุณไม่ได้ใช้ปลั๊กอิน ตรวจสอบให้แน่ใจว่าคุณวางโค้ด HTML ในส่วน <head> มิฉะนั้นจะไม่ทำงาน!

เพียงเท่านี้ คุณได้ผสานรวมและเพิ่ม Google Fonts ลงในไซต์ของคุณเรียบร้อยแล้ว!

เคล็ดลับ Google Fonts Pro

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

โฮสต์ Google Fonts ในพื้นที่

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

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

เปิดใช้งานการดึงข้อมูล DNS ล่วงหน้า

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

นี่คือตัวอย่างจากส่วนการดึงข้อมูลล่วงหน้า DNS จากปลั๊กอิน WP Rocket

สิ่งที่เราต้องทำคือพิมพ์โดเมน Google Fonts ใต้ส่วน URL เพื่อดึงข้อมูลล่วงหน้า และบันทึกการเปลี่ยนแปลง

จำกัดน้ำหนักแบบอักษร

ในการปรับแต่งฟอนต์ คุณสามารถใช้น้ำหนักฟอนต์ได้ มีตัวเลือกน้ำหนักแบบอักษรมากมาย เช่น:

  • บาง
  • เบาเป็นพิเศษ
  • แสงสว่าง
  • ปกติ
  • ปานกลาง
  • กึ่งหนา
  • ตัวหนา
  • กล้าหาญเป็นพิเศษ
  • สีดำ

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

บทสรุป

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

เราได้เห็นวิธีการต่างๆ ในการทำเช่นนี้:

  1. ด้วยปลั๊กอิน
  2. ผ่านไฟล์ functions.php
  3. ผ่าน Style.css
  4. การแก้ไข ไฟล์ header.php

แล้วควรใช้วิธีไหน? พวกเขาทั้งหมดจะทำงานให้สำเร็จขึ้นอยู่กับทักษะและความชอบของคุณ หากคุณไม่สะดวกในการเขียนโค้ด เราขอแนะนำให้คุณใช้วิธีปลั๊กอิน Google Fonts Typography นั้นใช้งานง่ายมากและเป็นส่วนเสริมที่ดีในเว็บไซต์ของคุณ อย่างไรก็ตาม หากคุณไม่ต้องการเพิ่มปลั๊กอินในไซต์ของคุณ คุณสามารถแก้ไขไฟล์ functions.php ของธีมได้โดยใช้ปลั๊กอิน Code Snippets หรือผ่านทาง FTP นอกจากนี้ วิธี style.css @import เป็นอีกวิธีหนึ่งที่ง่ายและรวดเร็วในการเพิ่ม Google Fonts ด้วยโค้ด CSS สองสามบรรทัด หรือคุณสามารถเพิ่ม URL ของฟอนต์และพาธ style.css ลงใน ไฟล์ header.php

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

คุณวางแผนที่จะใช้วิธีใด? คุณรู้จักคนอื่นอีกไหม? แจ้งให้เราทราบในส่วนความคิดเห็นด้านล่าง!