วิธีเปลี่ยนแบบอักษรใน WordPress

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

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

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

วิธีเปลี่ยนฟอนต์ใน WordPress

มีสามตัวเลือกหลักสำหรับการเปลี่ยนแบบอักษรใน WordPress:

ใช้แบบอักษรของเว็บเช่น Google Fonts, Fonts.com หรือ Adobe Edge Web Fonts ซึ่งโฮสต์บนไซต์ของบุคคลที่สาม

เขียนโค้ดแบบอักษรของเว็บลงในธีมของคุณและจัดลำดับแบบอักษร

โฮสต์ฟอนต์บนไซต์ของคุณและเพิ่มลงในธีมของคุณ

1. วิธีเปลี่ยนฟอนต์ใน WordPress โดยใช้ฟอนต์เว็บ

การใช้ฟอนต์เว็บเป็นวิธีที่ง่ายและรวดเร็วกว่าในการเปลี่ยนฟอนต์ใน WordPress มากกว่าการดาวน์โหลดและอัพโหลดไฟล์ฟอนต์

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

In_content_1 ทั้งหมด: [300x250] / dfp: [640x360]->

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

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

วิธีเพิ่มแบบอักษรของเว็บโดยใช้ปลั๊กอิน WordPress

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

ในการเริ่มต้นให้ลงชื่อเข้าใช้แดชบอร์ดผู้ดูแลระบบ WordPress ของคุณแล้วเลือก ปลั๊กอิน>เพิ่มใหม่

พิมพ์ Google Fonts Typographyในช่องค้นหาและเลือก ติดตั้งทันที

เลือก Activate.

จากนั้นเข้าถึง เครื่องมือปรับแต่งโดยไปที่ ลักษณะที่ปรากฏ>ปรับแต่ง

เลือกส่วน Google Fonts

จากนั้นคลิกที่ลิงค์เพื่อเปิดการตั้งค่าแบบอักษรและกำหนดค่าดังต่อไปนี้:

ภายใต้ การตั้งค่าพื้นฐานตั้งค่าแบบอักษรเริ่มต้นสำหรับเนื้อหาของคุณ ข้อความหัวเรื่องและปุ่ม

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

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

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

คุณสามารถทดสอบการตั้งค่าเหล่านี้ใน Customizer เพื่อให้แน่ใจว่าการตั้งค่าเหล่านี้ทำงานตามที่คุณต้องการจากนั้นเลือก เผยแพร่

หมายเหตุ: หาก คุณลืมเลือกเผยแพร่ใน Customizer คุณจะสูญเสียการเปลี่ยนแปลงทั้งหมดที่คุณทำไป

วิธีเพิ่มแบบอักษรของเว็บโดยใช้โค้ด

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

อย่างไรก็ตามมีขั้นตอนต่างๆที่ต้องดำเนินการหากคุณใช้ธีมจากไดเรกทอรีธีม WordPress หรือ ธีมที่กำหนดเอง

หากคุณซื้อธีมจากไดเร็กทอรีธีม WordPress ให้ สร้างธีมลูก จากนั้นให้ไฟล์ style.css และ functions.php จะง่ายกว่าถ้าคุณมีธีมที่กำหนดเองเนื่องจากคุณสามารถแก้ไขไฟล์สไตล์ชีตและฟังก์ชันจากธีมของคุณได้

ในการเริ่มต้นให้เลือกแบบอักษรจากไลบรารี Google Fonts และเลือกไอคอน + (บวก)เพื่อเพิ่มลงในห้องสมุดของคุณ

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

หมายเหตุ: เราเลือก Work Sans สำหรับคำแนะนำนี้ดังนั้นแบบอักษร ชื่อของคุณอาจแตกต่างกันไปขึ้นอยู่กับสิ่งที่คุณเลือก

คัดลอกโค้ดส่วนนี้: https://fonts.googleapis.com/css2?family = งาน + Sans

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

ในการจัดคิวฟอนต์ให้เปิดไฟล์ฟังก์ชันและเพิ่มโค้ดต่อไปนี้ (แทนที่ลิงก์ด้วยลิงก์ที่คุณได้รับจาก Google Fonts):

ฟังก์ชัน wosib_add_google_fonts () {
wp_register_style ('googleFonts', ' https://fonts.googleapis.com/css?family=Work Sans ');

wp_enqueue_style (' googleFonts ');
}add_action ('wp_enqueue_scripts', 'mybh_add_google_fonts');

คุณสามารถ เพิ่มบรรทัดใหม่ในฟังก์ชันของคุณหรือในบรรทัดเดียวกันหากคุณต้องการเพิ่มแบบอักษรเพิ่มเติมในอนาคตดังนี้:

function mybh_add_google_fonts () {
wp_register_style ('googleFonts', 'https://fonts.googleapis.com/css?family=Cambria|Work Sans');

wp_enqueue_style ('googleFonts') ;
}add_action ('wp_enqueue_scripts', 'mybh_add_google_font s ');

ในกรณีนี้เราได้จัดทำแบบอักษรทั้ง Cambria และ Work Sans

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

ในการดำเนินการนี้ให้เปิดไฟล์ style.css ของธีมของคุณและเพิ่มโค้ดเพื่อจัดรูปแบบองค์ประกอบแต่ละรายการด้วยแบบอักษรบนเว็บของคุณดังนี้:

body {
font-family: 'Work Sans', sans-serif;
}h1, h2, h3 {
font-family: "Cambria", serif ;
}

ในกรณีนี้แบบอักษรหลักจะเป็น Work Sans ในขณะที่องค์ประกอบส่วนหัวเช่น h1, h2 และ h3 จะใช้ แคมเบรีย

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

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

body {
font-family: 'Work Sans ', Arial, sans-serif;
}h1, h2, h3 {
font - ครอบครัว: 'Cambria', Times New Roman, serif;
}

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

2. วิธีการเปลี่ยนฟอนต์ใน WordPress โดยการโฮสต์ฟอนต์

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

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

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

ถัดไปไปที่ wp-content / themes / themenameเพื่ออัปโหลดไฟล์ฟอนต์ไปยังธีมของคุณ

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

@ font-face {
font-family: 'Work Sans';
src: url (“ font / Work Sans-Medium.ttf”) รูปแบบ ('woff'); / * medium * /
font-weight: normal;
font-style: normal;
}

@ font-face {
font-family: 'Work Sans';
src: url ( รูปแบบ "แบบอักษร / งาน Sans-Bold.ttf") ('woff'); / * medium * /
font-weight: bold;
font-style: normal;
}

@ font-face {
font-family: 'Cambria';
src: url (“ แบบอักษร / Cambria.ttf”) รูปแบบ ('woff'); / * medium * /
font-weight: normal;
font-style: normal;
}แข็งแรง>

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

ถัดไปเพิ่มสไตล์สำหรับองค์ประกอบของคุณดังนี้:

body {
font-family: "Work Sans ', Arial, sans-serif;
src: url (“ / font / Work Sans-Medium.ttf”);
}

h1, h2, h3 {
font-family: "Cambria", Times New Roman, serif;
}

ปรับแต่งการพิมพ์ WordPress ของคุณ

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

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

กระทู้ที่เกี่ยวข้อง: