3 วิธีในการเปลี่ยนแบบอักษรบนเว็บไซต์ WordPress ของคุณ

เผยแพร่แล้ว: 2022-11-05

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

สร้างแบบอักษรที่กำหนดเองสำหรับธีมลูก Confetti Genesis! ดาวน์โหลดและแตกฟอนต์ลงในคอมพิวเตอร์ของคุณตามต้องการ สำหรับการใช้งานเชิงพาณิชย์ DaFont และ FontSquirrel เป็นแหล่งข้อมูลที่ยอดเยี่ยมสำหรับฟอนต์ฟรี หากคุณต้องการฟอนต์ระดับพรีเมียม/โดดเด่นมากกว่า Creative Market ก็เป็นจุดเริ่มต้นที่ดี คุณต้องอัปโหลดที่เก็บถาวร คุณสามารถทำได้โดยใช้ไคลเอนต์ FTP เช่น FileZilla หรือ Hosting File Manager หากต้องการปรับแต่ง CSS ให้ไปที่ลักษณะที่ปรากฏ ใช้แต่ละไฟล์เป็น URL ต้นทาง เพิ่ม URL ใหม่ที่สร้างจากไฟล์ที่คุณอัปโหลด การเปลี่ยนชื่อแบบอักษรและ URL จะช่วยให้มั่นใจได้ว่าไฟล์แบบอักษรของเซิร์ฟเวอร์จะยังคงอยู่ในรูปแบบที่ถูกต้อง

ฉันจะเพิ่มแบบอักษรที่กำหนดเองให้กับธีม WordPress ได้อย่างไร

ภาพโดย: https://wpbeginner.com

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

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

ปลั๊กอิน Custom Adobe Fonts ช่วยให้คุณสามารถรวมแบบอักษรเหล่านี้เข้ากับไซต์ WordPress ของคุณได้อย่างง่ายดาย หลังจากติดตั้งปลั๊กอินแล้ว ให้ไปที่ไลบรารีฟอนต์ที่ครอบคลุมของ Adobe เพื่อค้นหาฟอนต์ที่เหมาะสม (คุณต้องลงทะเบียนเพื่อใช้งาน) หลังจากที่คุณเลือกแบบอักษรที่ต้องการแล้ว คุณสามารถเพิ่มลงในโปรเจ็กต์เว็บได้โดยคลิกปุ่ม เพิ่มไปยังเว็บ ที่มุมบนขวาของหน้า เครื่องมือจับคู่แบบอักษรเป็นวิธีที่ยอดเยี่ยมในการแสดงตัวอย่างแบบอักษรร่วมกัน เพื่อให้คุณสามารถผสมและจับคู่แบบอักษรได้ตามที่เห็นสมควร เว็บไซต์ที่ยอดเยี่ยมหลายแห่งขายแบบอักษรที่กำหนดเองซึ่งออกแบบโดยนักออกแบบ ตัวอย่างเช่น ฟอนต์ Squirrel เป็นตัวเลือกที่ยอดเยี่ยมสำหรับนักพัฒนา เพราะมีไลบรารีฟอนต์ขนาดใหญ่และง่ายต่อการใช้งาน @Font-Face มีชุด แบบอักษรเว็บ ให้คุณใช้

คุณสามารถรับซอฟต์แวร์ได้จากเว็บไซต์ WordPress ของคุณ แต่ละชุดประกอบด้วยไฟล์ฟอนต์และสไตล์ชีตที่มีโค้ดที่คุณต้องใช้เพื่อสร้างสไตล์ชีต CSS ของคุณเอง เราต้องใช้ CSS ต่อไปนี้เป็นตัวอย่างของฟอนต์ OpenSans-ExtraBold-web เป็นการดีที่สุดที่จะบันทึกไฟล์ฟอนต์ทั้งหมดในไดเร็กทอรีที่คุณเลือก

ฉันจะเปลี่ยนแบบอักษรใน Genesis Framework ได้อย่างไร

ภาพโดย: https://realtydigitalmarketing.com

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

ธีม Genesis มาพร้อมกับแบบอักษร Source Sans Pro Google ที่เป็นค่าเริ่มต้น คุณต้องแก้ไขการกำหนดค่าแบบอักษรและไฟล์ styling.html ของไซต์ของคุณก่อน เมื่อเปลี่ยนแบบอักษร จำเป็นต้องบันทึกโดยคลิกปุ่มอัปเดตไฟล์ที่ด้านล่างของหน้า เพิ่มแบบอักษร Google ให้กับธีม Genesis โดยใช้บทช่วยสอนนี้ คุณสามารถเปลี่ยนน้ำหนักของการตั้งค่าแบบอักษร Google ได้โดยค้นหา ('Fonts-url') ตัวอย่างต่อไปนี้จะแสดงวิธีการเพิ่มน้ำหนัก 500 ให้กับ https://fonts.googleapis.com/CSS?family=Montserrat:400,400i,500,600,700&display=swap

ฉันจะเพิ่มขนาดตัวอักษรในปฐมกาลได้อย่างไร

ขนาดตัวอักษรในตัวอย่างนี้คือ ขนาดตัวอักษรบนหน้าจอสามารถกำหนดเป็นตัวเลขใดก็ได้ เลื่อนลงไปที่หน้าจอการตั้งค่าธีม/ธีม แล้วแตะ [ขนาดฟอนต์]

ฉันจะเปลี่ยนแบบอักษรในธีมของฉันได้อย่างไร

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

ความหมายของการใช้ Font:inherit

หากคุณใช้ font:inherit บนหน้าเว็บของคุณ จะใช้ฟอนต์เดียวกันกับองค์ประกอบหลัก แม้ว่าจะไม่ได้ประกาศฟอนต์นั้นก็ตาม การสืบทอดสามารถช่วยคุณประหยัดเวลาในขณะที่ประหยัดเงินได้ในระยะยาว แต่พึงระลึกไว้ถึงผลที่ตามมา
เมื่อฟอนต์ขององค์ประกอบพาเรนต์แตกต่างจากขององค์ประกอบย่อย ฟอนต์:inherit จะใช้แก้ไขไม่ได้ หากคุณใช้การสืบทอดเพื่อแทนที่สไตล์ที่กำหนดไว้ก่อนหน้านี้ในสไตล์ชีต ผลลัพธ์อาจคาดเดาไม่ได้
คุณต้องระบุอย่างชัดเจนว่าคุณต้องการใช้ฟอนต์ที่ใช้กับองค์ประกอบลูกหรือไม่เมื่อทำการแทนที่ ตัวอย่างเช่น คุณสามารถใช้ฟอนต์ตระกูล Arial หรือขนาดฟอนต์: x-large; บนองค์ประกอบลูก
หากคุณมี font:inherit ในสไตล์ชีตของคุณ อย่าลืมทดสอบในเบราว์เซอร์ของคุณเพื่อดูว่าจะมีผลกับหน้าเว็บของคุณอย่างไร อัปเดตสไตล์ชีตของคุณโดยเร็วที่สุดหากคุณวางแผนที่จะเปลี่ยนแบบอักษรบนหน้าของคุณ
การใช้ fonts:inherit มีความสำคัญต่อการออกแบบและรูปลักษณ์ของเว็บไซต์ใดๆ และจำเป็นอย่างยิ่งที่จะต้องเข้าใจความหมายของมัน เมื่อคุณใช้การประกาศนี้ องค์ประกอบสืบทอดทั้งหมดจะใช้แบบอักษรเดียวกันกับองค์ประกอบหลัก สามารถช่วยประหยัดเวลาในการจัดรูปแบบได้มาก แต่ต้องเข้าใจว่าอาจมีผลกระทบร้ายแรงได้เช่นกัน หากการประกาศ font:inherit ไม่ได้ระบุฟอนต์ขององค์ประกอบลูก จะไม่มีผลกับองค์ประกอบหลัก หากต้องการลบล้างแบบอักษรที่ใช้กับองค์ประกอบลูก ให้ประกาศอย่างชัดเจน