วิธีเพิ่มแบบอักษรที่กำหนดเองในเว็บไซต์ WordPress [2022]

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

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

เหตุใดจึงต้องใช้แบบอักษรที่กำหนดเองและจะหาได้ที่ไหน

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

DaFont เป็นไลบรารีฟอนต์ที่เก่าแก่ที่สุดที่มีฟอนต์มากกว่า 60,000 แบบ ซึ่งคุณสามารถกรองฟอนต์ที่คุณต้องการได้ คุณต้องดาวน์โหลดแบบอักษรที่เลือกและไม่เหมือนกับการรวมแบบอักษรของ Google ไลบรารีฟอนต์ประเภทเดียวกันคือ UrbanFont ที่มีฟอนต์ที่สร้างสรรค์และทำกำไรได้มากมาย

Adobe Fonts หรือ Typekit เป็นไลบรารีฟอนต์ที่มีประโยชน์มากสำหรับนักออกแบบเว็บไซต์ทุกคน เพราะมีฟอนต์ให้เลือกมากกว่า 1900 ฟอนต์ แม้ว่าคุณจะสมัครบัญชีฟรี แต่ก็ยังมีแบบอักษรเว็บมากกว่า 200 แบบ

หากคุณต้องการเช่าฟอนต์เป็นรายเดือนและชำระค่าสมัครสมาชิก คุณสามารถไป ที่ Fontstand มีแบบอักษรที่น่าทึ่งประมาณ 2,000 แบบและเรียกเก็บเงินเป็นรายเดือน เช่นเดียวกับ Type Network นี้เป็นไลบรารีฟอนต์ที่โฮสต์เองอีกตัวหนึ่ง ซึ่งคุณจะได้ฟอนต์มากกว่า 400 ตระกูลในแต่ละครั้ง และสำรวจได้อย่างง่ายดาย

วิธีการเลือกแบบอักษรที่กำหนดเองที่ดีที่สุดสำหรับเว็บไซต์?

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

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

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

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

ที่มา – https://www.w3schools.com/Css/css3_fonts.asp

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

วิธีง่ายๆ ในการเพิ่มแบบอักษรที่กำหนดเองลงในเว็บไซต์ WordPress

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

วิธีเพิ่มแบบอักษรที่กำหนดเองใน WordPress . ด้วยตนเอง

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

หากต้องการอัปโหลดไฟล์ฟอนต์ ให้ไปที่ไดเร็กทอรี wp-content/themes/your-theme/fonts คุณสามารถสร้างโฟลเดอร์แบบอักษรแยกต่างหากเพื่อความสะดวกของคุณ อัปโหลดไฟล์โดยใช้ตัวจัดการไฟล์ไปที่ hPanel ตอนนี้ไปที่บัญชี WordPress ของคุณและคลิกที่ ตัวเลือก ลักษณะ ที่ปรากฏ เลือก Theme Editor ที่คุณจะให้แสดงไฟล์ style.css เพิ่มรหัสต่อไปนี้ที่ด้านล่างของรหัส

@ แบบอักษรหน้า {

ตระกูลแบบอักษร: Aguafina Script-Regular;

src: url ( http://test-site.com/wp-content/themes/twentynineteen/fonts/AguafinaScript-Regular.ttf );

ตัวอักษร-น้ำหนัก: ปกติ;

}

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

.site-title {

ตระกูลแบบอักษร: “Aguafina Script-Regular” , Arial, sans-serif;

}

วิธีการตั้งค่าแบบอักษรที่กำหนดเองโดยใช้ปลั๊กอิน WordPress

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

WP Google Fonts

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

ปลั๊กอินแบบอักษร

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

สร้างเว็บไซต์ที่น่าสนใจโดยใช้แบบอักษรที่กำหนดเอง

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

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