วิธีเปลี่ยนแบบอักษรใน WordPress
เผยแพร่แล้ว: 2024-04-22การพิมพ์มีบทบาทสำคัญในการออกแบบและการใช้งานไซต์ WordPress ของคุณ การเปลี่ยนแบบอักษรสามารถช่วยให้คุณปรับปรุงความสามารถในการอ่าน อารมณ์ และความสวยงามโดยรวมของไซต์ของคุณได้ นอกจากนี้ยังสามารถเสริมสร้างเอกลักษณ์ของแบรนด์ ดึงดูดผู้ใช้ และทำให้เนื้อหาของคุณเข้าใจได้ง่ายขึ้น ไม่ว่าคุณกำลังมองหาการปรับปรุงรูปลักษณ์ของไซต์ของคุณหรือเพิ่มประสิทธิภาพประสบการณ์ผู้ใช้ การเปลี่ยนแบบอักษรของไซต์อาจเป็นจุดเริ่มต้นที่ดี
คำถามที่พบบ่อย
ฉันจะเปลี่ยนรูปแบบตัวอักษรบนเว็บไซต์ของฉันได้อย่างไร?
ฉันจะเพิ่มแบบอักษรเฉพาะลงใน WordPress ได้อย่างไร?
คุณจะเปลี่ยนแบบอักษรในรูปแบบ WordPress ได้อย่างไร?
แบบอักษรของเว็บคืออะไร?
แบบอักษรของเว็บคือแบบอักษรที่ใช้บนเว็บไซต์และไม่ได้ติดตั้งไว้ในอุปกรณ์ของผู้ใช้ แต่จะถูกดาวน์โหลดจากอินเทอร์เน็ตเมื่อมีการโหลดหน้าเว็บ ช่วยให้นักออกแบบเว็บไซต์สามารถใช้แบบอักษรที่กำหนดเองซึ่งไม่ถูกจำกัดด้วยแบบอักษรที่ติดตั้งบนคอมพิวเตอร์ของผู้ใช้ ทำให้มั่นใจได้ว่าการพิมพ์จะสอดคล้องกันบนแพลตฟอร์มและอุปกรณ์ต่างๆ
แบบอักษรเว็บ 4 แบบ
- แบบอักษร TrueType (TTF): เป็นไฟล์แบบอักษรอเนกประสงค์ที่ใช้ทั้งในเดสก์ท็อปและในบริบทของเว็บ ได้รับการรองรับอย่างกว้างขวางในอุปกรณ์และระบบปฏิบัติการต่างๆ
- แบบอักษร OpenType (OTF): คล้ายกับ TrueType แต่มีความสามารถด้านการพิมพ์ขั้นสูง เช่น การรองรับอักษรควบและอักขระสำรอง ทำให้เหมาะสำหรับเค้าโครงข้อความที่ซับซ้อน
- รูปแบบแบบอักษรเปิดบนเว็บ (WOFF): ออกแบบมาโดยเฉพาะสำหรับการใช้งานบนเว็บ แบบอักษรเหล่านี้ได้รับการบีบอัดและปรับให้เหมาะสมเพื่อให้โหลดได้รวดเร็ว WOFF ถือเป็นรูปแบบฟอนต์เว็บมาตรฐานเนื่องจากมีความเข้ากันได้และประสิทธิภาพที่กว้างขวาง
- แบบอักษร OpenType แบบฝัง (EOT): พัฒนาโดย Microsoft แบบอักษรเหล่านี้ใช้ใน Internet Explorer เวอร์ชันเก่าเป็นหลัก และพบได้น้อยกว่าในปัจจุบัน
จะเปลี่ยนแบบอักษรใน WordPress ได้อย่างไร?
วิธีที่ 1: การใช้เครื่องมือปรับแต่งธีมเพื่อเปลี่ยนแบบอักษรใน WordPress
เมื่อปรับแบบอักษรโดยใช้เครื่องมือปรับแต่งธีม WordPress โดยเฉพาะกับธีม North Shore คุณสามารถทำตามขั้นตอนหมายเลขเหล่านี้:
- เข้าสู่แดชบอร์ด WordPress ของคุณ
- ไปที่ ลักษณะที่ปรากฏ > ปรับแต่งเพื่อเปิดตัวปรับแต่งธีม
- เมื่ออยู่ในเครื่องมือปรับแต่งแล้ว ให้คลิก ที่Fonts
- คุณสามารถตั้งค่าแบบอักษรสำหรับชื่อไซต์ เมนูการนำทาง ส่วนหัว และข้อความเนื้อหาแยกกันได้
- หลังจากเลือกแบบอักษรแล้ว คลิกเผยแพร่ หรือ อัปเดตเพื่อเพิ่มลงในไซต์ของคุณ
ขั้นตอน เหล่านี้ จะช่วยให้คุณจัดการและเปลี่ยนแบบอักษรใน WordPress ได้อย่างมีประสิทธิภาพโดยใช้เครื่องมือปรับแต่งธีม
วิธีที่ 2: ใช้การแก้ไขไซต์แบบเต็มเพื่อเปลี่ยนแบบอักษรใน WordPress
ธีมตัวแก้ไขไซต์เต็ม (FSE) จำนวนมากมาพร้อมกับแบบอักษรให้เลือกมากมาย ในตัวอย่างนี้ เราใช้ธีม Twenty Twenty-Two ซึ่งอนุญาตให้คุณแก้ไขแบบอักษรได้โดยตรงภายในตัวแก้ไขธีม ต่อไปนี้คือวิธีที่คุณสามารถเปลี่ยนแบบอักษร:
- ไปที่ลักษณะที่ปรากฏ > ตัวแก้ไขบนแดชบอร์ด WordPress ของคุณ
- คลิกที่ไอคอน รูปแบบ S ที่อยู่ทางด้านซ้ายของหน้าจอเพื่อเข้าถึงการตั้งค่ารูปแบบและเลือกไอคอน ปากกา เพื่อ แก้ไข
- เลือก ส่วนการพิมพ์ เพื่อเปิดการตั้งค่าแบบอักษรสำหรับธีมของคุณ
- ภายในการตั้งค่าการพิมพ์ ให้เลือกองค์ประกอบข้อความที่คุณต้องการแก้ไข เช่น ข้อความไซต์หรือข้อความลิงก์
- คลิก เมนูแบบเลื่อนลง ตระกูลแบบอักษร เพื่อดูและเลือกจากแบบอักษรที่มีอยู่หรืออัปโหลดแบบอักษรใหม่
- คุณสามารถเลือกที่จะปรับขนาดแบบอักษร ความสูงของบรรทัด และลักษณะโดยรวมให้เหมาะกับความต้องการของคุณ
- เมื่อคุณทำการเลือกแล้ว ให้คลิก ปุ่มบันทึก ที่ด้านบนขวาของหน้าเพื่อใช้การเปลี่ยนแปลงของคุณ
กระบวนการนี้ช่วยให้คุณปรับแต่งการออกแบบตัวอักษรของไซต์ของคุณได้อย่างง่ายดายภายในสภาพแวดล้อม FSE ซึ่งช่วยเพิ่มทั้งความสวยงามและประสบการณ์ผู้ใช้
วิธีที่ 3: การใช้ตัวแก้ไขบล็อกเพื่อเปลี่ยนแบบอักษรใน WordPress
- เลือก ตัวแก้ไขบล็อก จาก การตั้งค่า>การเขียน เริ่มต้นด้วยการแก้ไขโพสต์หรือเพจที่คุณต้องการเปลี่ยนแบบอักษร
- ปรับเปลี่ยนข้อความและสีพื้นหลังเลือก บล็อกข้อความที่คุณต้องการใช้การเปลี่ยนแปลง
- ปรับขนาดตัวอักษรและรูปลักษณ์ ในแถบด้านข้างเดียวกัน ให้ตั้งค่าขนาดตัวอักษรที่ต้องการ
- ปรับปรุงการจัดรูปแบบข้อความและเพิ่มคุณสมบัติข้อความ หากจำเป็น ให้เพิ่มอักขระตัวห้อยหรือตัวยกลงในข้อความของคุณ
- หลังจากทำการปรับเปลี่ยนแล้ว ตรวจสอบให้แน่ใจว่าคุณได้บันทึก หรือ อัปเดตโพสต์เพื่อใช้การเปลี่ยนแปลง
ขั้นตอนเหล่านี้จะช่วยให้คุณใช้เครื่องมือแก้ไขบล็อกได้อย่างมีประสิทธิภาพเพื่อปรับแต่งการพิมพ์และสไตล์ของเนื้อหา WordPress ของคุณ
วิธีที่ 4: การใช้ปลั๊กอินเพื่อเปลี่ยนแบบอักษรใน WordPress
หากคุณใช้ธีม WordPress ทั่วไปและต้องการเปลี่ยนแบบอักษร คุณอาจจำเป็นต้องใช้ปลั๊กอิน เช่นFonts Plugin |การพิมพ์แบบอักษรของ Googleต่อไปนี้เป็นวิธีเริ่มต้นใช้งาน:
- ไปที่ปลั๊กอิน > เพิ่มใหม่ในแดชบอร์ด WordPress ของคุณ และติดตั้ง Fonts Plugin | การพิมพ์แบบอักษรของ Google
- ไปที่ลักษณะที่ปรากฏ > ปรับแต่ง เมื่อโหลดแล้ว คุณจะพบส่วนใหม่ชื่อปลั๊กอินแบบ อักษรภายในส่วนนี้มีหลายแท็บรวมถึงการตั้งค่าพื้นฐาน การตั้งค่าขั้นสูง การโหลดแบบอักษร และการดีบัก
- ในการตั้งค่าพื้นฐาน ให้เลือกตระกูลแบบอักษรเริ่มต้นจากตัวเลือกแบบอักษรของ Google มากกว่า 1,400 แบบระบุแบบอักษรสำหรับส่วนหัว ปุ่ม และอินพุตการตั้งค่าขั้นสูง ช่วยให้คุณสามารถปรับแบบอักษรสำหรับชื่อเว็บไซต์ สโลแกน และเมนูการนำทางได้
- ตอนนี้คุณสามารถ แก้ไข ตัวพิมพ์พื้นฐาน ตัวพิมพ์ส่วนหัว และตัวพิมพ์ของปุ่มและอินพุตได้
- รุ่น Pro ช่วยให้คุณสามารถปลดล็อกขนาดและสีแบบอักษร โฮสต์แบบอักษรในเครื่อง เพิ่มประสิทธิภาพการโหลดแบบอักษร และอัปโหลดแบบอักษรที่กำหนด เอง
- และอย่าลืม เผยแพร่ หรือ อัปเดตเพื่อบันทึกการเปลี่ยนแปลง
- หากจำเป็น ให้ใช้ ปุ่ม รีเซ็ต เพื่อคืนค่าการเปลี่ยนแปลงทั้งหมดที่ทำกับปลั๊กอิน
ขั้นตอนเหล่านี้จะช่วยให้คุณปรับแต่งและจัดการแบบอักษรบนเว็บไซต์ WordPress ของคุณได้อย่างมีประสิทธิภาพโดยใช้ปลั๊กอินแบบอักษร
วิธีที่ 5: การเพิ่มแบบอักษรที่กำหนดเองใน WordPress ด้วยตนเอง
หากคุณสนใจที่จะเพิ่มแบบอักษรที่กำหนดเอง เช่น Roboto ของ Google ลงในไซต์ WordPress ของคุณด้วยตนเอง กระบวนการนี้ค่อนข้างตรงไปตรงมา แม้ว่าจะต้องมีความคุ้นเคยกับการแก้ไขไฟล์ธีมบ้างก็ตาม ขอแนะนำให้ใช้ธีมลูกเพื่อหลีกเลี่ยงปัญหา เนื่องจากข้อผิดพลาดเล็กๆ น้อยๆ ก็อาจทำให้เกิดปัญหาร้ายแรงกับไซต์ของคุณได้ ต่อไปนี้คือวิธีที่คุณสามารถทำได้:
- ไปที่แบบอักษรของ Google และเลือกแบบอักษร Roboto เลือกสไตล์ที่คุณต้องการรวม
- คัดลอกลิงก์ที่ให้ไว้ในโค้ดฝังจาก Google Fonts มันจะมีลักษณะดังนี้:
https: / /fonts.googleapis.com/css 2?family= Roboto:wght @100 ; 300 ; 400 ; 500 ; 700 ; 900 &display=swap
- ใช้ไคลเอนต์ FTP เช่น FileZilla เพื่อเชื่อมต่อกับเว็บไซต์ของคุณ ไปที่ /public_html/wp-content/themes/yourthemechild/functions.php (แทนที่ yourthemechild ด้วยชื่อธีมลูกของคุณ)
- เปิดไฟล์ function.php และต่อท้ายโค้ดต่อไปนี้:
ฟังก์ชั่น add_my_font () { wp_enqueue_style ( 'add_my_font' , 'https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap' , false ); - add_action ( 'wp_enqueue_scripts' , 'add_my_font' );
- ใช้แบบอักษรกับเว็บไซต์ของคุณ:
- ค้นหาไฟล์ style.css ของธีมลูกของคุณในไดเร็กทอรีเดียวกัน
- เพิ่ม CSS ต่อไปนี้เพื่อกำหนดตำแหน่งที่ควรใช้ Roboto:
.ร่างกาย , .h1 , .h2 , .h3 , .h4 , .h5 , .h6 { ตระกูลฟอนต์ : 'Roboto' , sans-serif; -
- CSS นี้จะใช้แบบอักษร Roboto กับข้อความเนื้อหาและส่วนหัวทั้งหมดทั่วทั้งไซต์ของคุณ
โปรดจำไว้ว่า แต่ละธีมอาจมีความแตกต่างกัน ดังนั้นหากโค้ดที่ให้มาไม่ทำงานตามที่คาดไว้ ให้ปรึกษานักพัฒนาธีมของคุณหรือใช้เครื่องมือตรวจสอบของเบราว์เซอร์เพื่อระบุตัวเลือก CSS ที่ถูกต้องสำหรับแบบอักษรของไซต์ของคุณ
เคล็ดลับเพิ่มเติมเมื่อเปลี่ยนแบบอักษรใน WordPress
- เลือกแบบอักษรที่อ่านง่ายสำหรับข้อความเนื้อหา เช่น แบบอักษร sans-serif สำหรับหน้าจอดิจิทัล พิจารณาผู้ฟังและความสามารถในการอ่านข้อความโดยรวมบนอุปกรณ์ต่างๆ
- การใช้แบบอักษรที่แตกต่างกันมากเกินไปอาจทำให้ไซต์ของคุณดูรกและลดความสามารถในการอ่าน หลักการทั่วไปที่ดีคือการใช้แบบอักษรสูงสุดสองถึงสามแบบ: หนึ่งแบบสำหรับส่วนหัว หนึ่งแบบสำหรับข้อความเนื้อหา และอีกแบบหนึ่งสำหรับเน้นเสียง
- แต่ละแบบอักษรจะเพิ่มเวลาในการโหลดเว็บไซต์ของคุณ เลือกแบบอักษรอย่างชาญฉลาดและจำกัดจำนวนน้ำหนักและสไตล์แบบอักษรที่คุณใช้เพื่อให้เว็บไซต์ของคุณมีประสิทธิภาพสูงสุด
- หากคุณต้องการแบบอักษรที่จะใช้งานได้กับทุกแพลตฟอร์มและอุปกรณ์โดยไม่ต้องดาวน์โหลด ให้ลองใช้แบบอักษรที่ปลอดภัยบนเว็บที่ติดตั้งไว้ล่วงหน้าบนอุปกรณ์ส่วนใหญ่
- ตรวจสอบให้แน่ใจว่าแบบอักษรที่คุณเลือกแสดงอย่างถูกต้องในเบราว์เซอร์และอุปกรณ์หลักทั้งหมด แบบอักษรบางตัวอาจแสดงผลแตกต่างกันไปในแต่ละแพลตฟอร์ม
- แบบอักษรที่คุณเลือกควรเสริมและส่งเสริมเอกลักษณ์ของแบรนด์ของคุณ ตรวจสอบให้แน่ใจว่าสอดคล้องกับโทนและวัตถุประสงค์ของเว็บไซต์ของคุณ
- เลือกแบบอักษรและขนาดที่ผู้ใช้ทุกคนสามารถเข้าถึงได้ รวมถึงผู้ที่มีความบกพร่องทางการมองเห็น หลีกเลี่ยงแบบอักษรที่ตกแต่งมากเกินไปสำหรับองค์ประกอบข้อความที่สำคัญ
- ปลั๊กอินเช่น Easy Google Fonts ช่วยให้สามารถผสานรวมและปรับแต่งแบบอักษรได้อย่างง่ายดายโดยไม่จำเป็นต้องแก้ไขไฟล์ CSS โดยตรง นี่อาจเป็นตัวเลือกที่ตรงไปตรงมาสำหรับผู้ที่ไม่ค่อยคุ้นเคยกับโค้ด
- ตรวจสอบให้แน่ใจว่าแบบอักษรดูดีไม่เพียงแต่บนเดสก์ท็อป แต่ยังบนแท็บเล็ตและสมาร์ทโฟนด้วย ปรับขนาดและความสูงของบรรทัดเพื่อให้อ่านง่ายและปรากฏบนหน้าจอขนาดเล็ก
- ใช้เฉพาะแบบอักษรที่คุณมีสิทธิ์ใช้เท่านั้น ฟอนต์บางตัวจำเป็นต้องมีใบอนุญาต โดยเฉพาะสำหรับการใช้งานเชิงพาณิชย์ ดังนั้นโปรดตรวจสอบเงื่อนไขการใช้งานก่อนที่จะรวมเข้าด้วยกัน
บทสรุป
การเปลี่ยนแบบอักษรใน WordPress อาจส่งผลกระทบอย่างมากต่อรูปลักษณ์ของไซต์และประสบการณ์ผู้ใช้ ด้วยการทำความเข้าใจวิธีการและแนวปฏิบัติที่ดีที่สุดที่มีอยู่ คุณจะสามารถนำการเปลี่ยนแปลงแบบอักษรไปใช้ได้อย่างมีประสิทธิภาพ ซึ่งจะช่วยปรับปรุงความสวยงามและฟังก์ชันการทำงานของไซต์ของคุณ ไม่ว่าจะผ่านเครื่องมือปรับแต่งธีม การแก้ไขไซต์แบบเต็ม ปลั๊กอิน หรือวิธีการด้วยตนเอง ความเป็นไปได้ก็มีมากมายและยืดหยุ่น เลือกวิธีการที่เหมาะกับความต้องการของคุณมากที่สุด และเริ่มทดลองเพื่อค้นหาการออกแบบตัวอักษรที่สมบูรณ์แบบสำหรับเว็บไซต์ WordPress ของคุณ