วิธีการใช้ Google Fonts กับ WordPress?

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

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

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

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

1- WordPress Google Fonts คืออะไรและทำไมคุณจึงควรใช้

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

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

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

มีเว็บไซต์จำนวนมากที่ใช้ Google Fonts ใน WordPress เพื่อประโยชน์ของตน ธีมทันสมัยทั้งหมดรองรับการใช้งาน Google Fonts

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

2- วิธีเพิ่ม Google Fonts ใน WordPress ด้วยตนเอง

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

ในส่วนนี้ ฉันจะสาธิตวิธีการติดตั้ง Google Fonts บนเว็บไซต์ WordPress ด้วยตนเอง

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

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

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

• แบบอักษรเหล่านี้เป็นแบบอักษรที่มีเส้นเล็กๆ ต่อท้ายการขีดตัวอักษร เช่น Times New Roman และ Courier
• ซัง-เซริฟ แบบอักษรที่ไม่มีบรรทัดเล็ก ๆ ที่ท้ายการขีดตัวอักษรคือแบบอักษร sans-serif เช่น Helvetica และ Roboto
• แบบอักษรที่ใช้แสดงเป็นหลักสำหรับข้อความขนาดใหญ่เช่นชื่อเรื่อง
• แบบอักษรที่มีลักษณะเป็นลายมือ เช่น Pacifico
• แบบอักษรที่มีระยะห่างเท่ากันทุกตัวอักษร เช่น Source Code Pro

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

สำหรับจุดประสงค์ของบทช่วยสอนนี้ ฉันจะใช้ Open Sans

ขั้นตอนที่ 2: เพิ่มแบบอักษรให้กับการเลือกของคุณ

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

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

ขั้นตอนที่ 3: ปรับแต่งฟอนต์

แถบ X Family Selected จะ เปิดหน้าต่างที่มีสองแท็บ – Embed และ Customize ก่อนที่เราจะฝังฟอนต์แฟมิลี่ลงในเว็บไซต์ WordPress ของเรา เราจะใช้เวลาสักครู่เพื่อปรับแต่งฟอนต์นั้นสักหน่อย

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

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

เพื่อป้องกันไม่ให้การเลือกแบบอักษรของเราส่งผลต่อเวลาในการโหลดหน้าเว็บของไซต์ เราจึงตัดสินใจเลือกใช้การเลือกแบบง่ายๆ – light 300 และ Regular 400

ขั้นตอนที่ 4: ฝัง Google Fonts ลงในเว็บไซต์ WordPress ของคุณ

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

เริ่มต้นด้วยการกลับไปที่แท็บ ฝัง และคัดลอกลิงก์ (URL) ของการเลือกแบบอักษรของคุณไปยังคลิปบอร์ดของคุณ ในกรณีของเรา URL แบบเต็มคือ: https://fonts.googleapis.com/css?family=Open+Sans:300,400

ถัดไป ลงชื่อเข้าใช้แดชบอร์ด WordPress ของคุณและภายใน Appearance ให้ไปที่ Editor และเปิดไฟล์ functions.php ของธีมที่ใช้งานอยู่โดยใช้ไคลเอนต์ FTP และเพิ่มโค้ดต่อไปนี้ลงไป

 ฟังก์ชั่น add_google_fonts() {

wp_enqueue_style( ' add_google_fonts ', ' https://fonts.googleapis.com/css?family=Open+Sans:300,400', false );}

add_action( 'wp_enqueue_scripts', 'add_google_fonts' );

หมายเหตุ: คุณจะต้องแทนที่ URL ด้วยของคุณเอง

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

 ชั่วโมง2 {

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

}

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

เหตุใดความเร็วจึงเป็นสิ่งสำคัญสำหรับ SEO & UX

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

ฉันยอมรับข้อกำหนดในการให้บริการและนโยบายความเป็นส่วนตัวของ Cloudways

รับ Ebook ตอนนี้!

ขอบคุณ

Ebook ของคุณกำลังมาถึงกล่องจดหมายของคุณ

ในการดำเนินการดังกล่าว เพียงเพิ่มประเภทแบบอักษรเริ่มต้นที่โฮสต์ในเครื่อง เช่น Georgia, Cambria หรือ Courier

3- วิธีเพิ่ม Google Fonts ใน WordPress โดยใช้ Plugin

สำหรับบางคน การผสานรวม WordPress Google Fonts ด้วยตนเองอาจไม่ใช่ตัวเลือก ไม่ต้องกังวล. มีอีกวิธี (ง่ายกว่า) ในการเพิ่ม Google Fonts ในเว็บไซต์ WordPress ของคุณ ผ่านปลั๊กอิน

ในส่วนนี้ ฉันจะแสดงวิธีผสานรวม Google Fonts ใน WordPress โดยใช้ปลั๊กอิน Easy Google Fonts

ขั้นตอนที่ 1: ติดตั้งและเปิดใช้งาน Plugin

ลงชื่อเข้าใช้แผงผู้ดูแลระบบ WordPress และไปที่ Plugins > Add New ค้นหา Easy Google Fonts และติดตั้งบนเว็บไซต์ของคุณ

เมื่อติดตั้งปลั๊กอินแล้ว ให้คลิกปุ่ม เปิดใช้งาน เพื่อเริ่มใช้งาน

ขั้นตอนที่ 2: เริ่มใช้ Google Fonts

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

คุณจะสังเกตเห็นว่ามีการเพิ่มรายการเมนูใหม่ลงใน WordPress Customizer ชื่อ Typography

ช่วยให้คุณควบคุมการตั้งค่าตัวพิมพ์ของย่อหน้าและหัวเรื่องต่างๆ (H1 ถึง H6)

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

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

ดังนั้น ถ้าเราต้องการใช้ Open Sans เราจะตั้งค่าตัวเลือกสคริปต์เป็น Latin ตัวเลือกตระกูลฟอนต์เป็น Open Sans และน้ำหนักฟอนต์เป็น Regular (ซึ่งเทียบเท่ากับ Regular 400 )

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

4- แบบอักษรที่ดีที่สุดที่จะใช้

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

มาดู Google Fonts ที่ดีที่สุดซึ่งใช้กันอย่างแพร่หลายและให้การอ่านที่ดีที่สุด

1. ลอร่า

Lora เป็นหนึ่งในกลุ่มแบบอักษรที่ใช้กันอย่างแพร่หลายเนื่องจากมีความสามารถในการอ่านและรูปแบบต่างๆ

2. การแสดงเพลย์แฟร์

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

3. จดหมายเหตุ

แบบอักษรนี้เป็นของตระกูลแบบอักษร sans serif พิลึก มีรูปลักษณ์ที่สะอาดตาเหมาะสำหรับข้อความเนื้อหา

4. Roboto

Roboto เป็นหนึ่งในแบบอักษรที่ใช้บ่อยที่สุดบนเว็บสมัยใหม่ ดูดีด้วยการออกแบบเว็บเพียงเล็กน้อยและให้ผู้ใช้อ่านง่าย

5. มอนต์เซอร์รัต

มอนต์เซอร์รัตมีรากฐานมาจากการพิมพ์เมืองในศตวรรษที่ยี่สิบ ตระกูลฟอนต์ยอดนิยมอีกตัวหนึ่งซึ่งมาพร้อมกับหลากหลายรูปแบบ

6. รูบิค

สะอาดมาก Rubik เป็นตระกูลฟอนต์ซานเซอริฟที่ให้บริการเว็บไซต์มากกว่า 470,000 แห่งทั่วโลก

7. ที่มา Sans

คุณต้องใช้ตระกูลแบบอักษร Source Sans เนื่องจากมีการวนซ้ำมากกว่า 4.18 พันล้านครั้งผ่าน Google Fonts API

8. ลาโต้

Lato ยังเป็นแบบอักษรของ Sans Serif และถือว่าเป็นแบบอักษรที่เป็นมืออาชีพและชัดเจนโดยผู้ดูแลเว็บ มันถูกใช้ในเกือบทุกตำแหน่งของเนื้อหา

9. PT Serif

ด้วยเว็บไซต์กว่าล้านแห่งที่ใช้แบบอักษรนี้ PT Serif จึงเป็นหนึ่งในแบบอักษร Google ที่ใช้กันอย่างแพร่หลายมากที่สุด เหมาะสำหรับทั้งเว็บและพิมพ์เอกสาร

10. เปิด Sans

แบบอักษร Open Sans ใกล้เคียงกับการเขียนของมนุษย์มากที่สุด ซึ่งทำให้อ่านได้ทั้งบนเว็บและบนกระดาษได้ง่ายขึ้น Google Fonts API ให้บริการแบบอักษรนี้มากกว่า 28.5 พันล้านครั้งในเวลาเพียงสัปดาห์เดียว!

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

5- แนวทางปฏิบัติที่ดีที่สุดของการใช้ Google Fonts ในเว็บไซต์

การรวม WordPress Google Fonts ไม่ใช่วิทยาศาสตร์จรวด แต่มีสองวิธีในการทำงานใด ๆ – วิธีที่ดีและวิธีที่ดีที่สุด

มาดูแนวทางปฏิบัติที่ดีที่สุดที่เกี่ยวข้องกับการใช้ Google Fonts ใน WordPress

– จำกัดน้ำหนักแบบอักษร: การเลือกชุดน้ำหนักแบบอักษรที่สมบูรณ์นั้นน่าดึงดูด แต่ก็มีข้อเสียอยู่ สำหรับทุกตัวแปร API จะหนักขึ้นและต้องใช้เวลามากขึ้นในการโหลดชุดน้ำหนักแบบอักษรที่สมบูรณ์

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

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

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

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

บทสรุป

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

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

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