วิธีเปลี่ยนแบบอักษรใน WordPress
วิธีที่ยอดเยี่ยมในการเพิ่มการสร้างแบรนด์และความเป็นปัจเจกนิยมให้กับ ไซต์ WordPress ของคุณ คือการเปลี่ยนแบบอักษรในธีมของคุณ
การพิมพ์และองค์ประกอบแถบอื่นๆ สร้างความประทับใจแรกพบที่ดี สร้างบรรยากาศให้กับผู้เยี่ยมชมไซต์ของคุณ และสร้างเอกลักษณ์ให้กับแบรนด์ของคุณ จากการศึกษา(Studies)ยังพบว่าแบบอักษรส่งผลต่อความสามารถในการเรียนรู้ เรียกคืนข้อมูล และจดจำข้อความของผู้อ่าน
หากคุณเพิ่งติดตั้งธีม WordPress(installed a WordPress theme)หรือมี ประสบการณ์ CSSและการเขียนโค้ด เราจะแสดงตัวเลือกต่างๆ ให้คุณใช้เพื่อเปลี่ยนแบบอักษรในWordPress
วิธีเปลี่ยนแบบอักษรใน WordPress(How to Change Fonts in WordPress)
มีสามตัวเลือกหลักให้คุณเปลี่ยนแบบอักษรใน WordPress:
- ใช้แบบอักษรของเว็บ เช่นGoogle Fonts , Fonts.comหรือAdobe Edge Web Fontsซึ่งโฮสต์อยู่บนไซต์ของบุคคลที่สาม
- โค้ด(Code)แบบอักษรเว็บลงในธีมของคุณและจัดคิวให้
- โฮสต์(Host)แบบอักษรบนเว็บไซต์ของคุณและเพิ่มลงในธีมของคุณ
1. วิธีเปลี่ยนแบบอักษรใน WordPress โดยใช้แบบอักษรเว็บ(1. How to Change Fonts in WordPress Using Web Fonts)
การใช้แบบอักษรเว็บเป็นวิธีที่ง่ายและรวดเร็วในการเปลี่ยนแบบอักษรในWordPressมากกว่าการดาวน์โหลดและอัปโหลดไฟล์แบบอักษร
ด้วยตัวเลือกนี้ คุณสามารถเข้าถึงแบบอักษรต่างๆ(access a variety of fonts)ได้โดยไม่ต้องอัปเดตทุกครั้งที่มีการเปลี่ยนแปลง และไม่ทำให้พื้นที่เซิร์ฟเวอร์บนโฮสติ้งของคุณเสีย แบบอักษรให้บริการโดยตรงจากเซิร์ฟเวอร์ของผู้ให้บริการโดยใช้ปลั๊กอินหรือโดยการเพิ่มโค้ดในไซต์ของคุณ
ตรวจสอบ ให้(Make)แน่ใจว่าแบบอักษรของเว็บที่คุณเลือกสำหรับไซต์ของคุณตรงกับเอกลักษณ์ของแบรนด์ อ่านง่ายสำหรับเนื้อหา คุ้นเคยกับผู้เยี่ยมชมเว็บไซต์ และถ่ายทอดอารมณ์และภาพประเภทที่คุณต้องการ
คุณสามารถเพิ่มแบบอักษรของเว็บได้โดยใช้ปลั๊กอิน WordPress(using a WordPress plugin)หรือด้วยตนเองโดยการเพิ่มโค้ดสองสามบรรทัดในไซต์ของคุณ ลองสำรวจทั้งสองตัวเลือก
วิธีเพิ่มแบบอักษรเว็บโดยใช้ปลั๊กอิน WordPress(How to Add Web Fonts Using a WordPress Plugin)
คุณสามารถใช้ปลั๊กอิน WordPress(WordPress)เพื่อเข้าถึงไลบรารีของแบบอักษรและเลือกแบบอักษรที่คุณต้องการบนเว็บไซต์ได้ทั้งนี้ขึ้นอยู่กับแบบอักษรของเว็บที่คุณเลือก สำหรับคำแนะนำนี้ เราเลือกGoogle Fontsและใช้ปลั๊กอินGoogle Fonts Typography
- ในการเริ่มต้น ให้เข้าสู่ ระบบแด ชบอร์ดผู้ดูแลระบบWordPress และเลือก (WordPress)Plugins > Add New
- พิมพ์Google Fonts Typographyในช่องค้นหา แล้วเลือกInstall Now(Install Now)
- เลือกเปิดใช้(Activate)งาน
- ถัดไป เข้าถึงเครื่องมือปรับแต่ง(Customizer)โดยไปที่ ลักษณะที่ Appearance > Customizeแต่ง
- เลือกส่วนGoogle Fonts(Google Fonts)
- ถัดไป ให้คลิกที่ลิงก์เพื่อเปิดการตั้งค่าแบบอักษรและกำหนดค่าดังนี้:
- ภายใต้การตั้งค่าพื้นฐาน(Basic Settings)ให้ตั้งค่าแบบอักษรเริ่มต้นสำหรับข้อความเนื้อหา หัวเรื่อง และปุ่มของคุณ
- ภายใต้การตั้งค่าขั้นสูง(Advanced Settings)ให้กำหนดค่าชื่อไซต์และคำอธิบาย เมนู หัวเรื่องและเนื้อหา แถบด้านข้าง และส่วนท้ายของคุณ
- ยกเลิกการเลือก(Uncheck)น้ำหนักแบบอักษรที่ไม่ต้องการในส่วนการโหลดแบบอักษร(Font Loading)เพื่อหลีกเลี่ยงการทำให้ไซต์ของคุณช้า(avoid slowing down your site)ลง
หากมีแบบอักษรบนไซต์ของคุณที่ไม่แสดงหรือทำงานไม่ถูกต้อง ให้ใช้ ส่วน การดีบัก(Debugging )เพื่อแก้ไขปัญหา
- คุณสามารถทดสอบการตั้งค่าเหล่านี้ในเครื่องมือปรับแต่ง(Customizer) เพื่อให้แน่ใจว่าทำงานตามที่คุณต้องการ จากนั้นเลือกเผยแพร่(Publish)
หมายเหตุ(Note) : หากคุณลืมเลือกเผยแพร่ในเครื่องมือปรับแต่ง(Customizer)คุณจะสูญเสียการเปลี่ยนแปลงทั้งหมดที่คุณทำไว้
วิธีเพิ่มแบบอักษรเว็บโดยใช้โค้ด(How to Add Web Fonts Using Code)
คุณสามารถติดตั้งและใช้แบบอักษรของเว็บได้หากคุณมีสิทธิ์เข้าถึงโค้ดของธีมของคุณ นี้เป็นทางเลือกด้วยตนเองในการเพิ่มปลั๊กอินพิเศษ แต่ก็ไม่ซับซ้อนหากคุณทำตามขั้นตอนอย่างระมัดระวัง
อย่างไรก็ตาม มีขั้นตอนต่างๆ ที่ต้องทำ หากคุณใช้ธีมจาก ไดเร็กทอรีธีม WordPressหรือธีมที่กำหนดเอง
หากคุณซื้อธีมจากไดเร็กทอรีธีม ของ WordPress ให้ (WordPress)สร้างธีม(create a child theme)ย่อย จากนั้นให้ไฟล์ style.css และ functions.php ง่ายกว่าถ้าคุณมีธีมที่กำหนดเอง เนื่องจากคุณสามารถแก้ไขไฟล์สไตล์ชีตและฟังก์ชันจากธีมของคุณได้
- ในการเริ่มต้น เลือกแบบอักษรจากไลบรารีGoogle Fonts แล้วเลือกไอคอน (Google Fonts)+ (plus)เพื่อเพิ่มลงในไลบรารีของคุณ
- ถัดไป เลือกแท็บที่ด้านล่างซึ่งคุณจะพบโค้ดสำหรับเพิ่มลงในไซต์ของคุณ ไปที่ ส่วน แบบอักษรฝัง(Embed font)ใต้แท็บฝัง (Embed)คุณจะพบโค้ดที่สร้างโดยGoogle Fontsซึ่งมีลักษณะดังนี้:
<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>
หมายเหตุ(Note) : เราเลือกWork Sansสำหรับคู่มือนี้ ดังนั้นชื่อแบบอักษรอาจแตกต่างกันไปขึ้นอยู่กับสิ่งที่คุณเลือก
- คัดลอกโค้ดส่วนนี้: https://fonts.googleapis.com/css2?family=Work+Sans
วิธีนี้ช่วยให้คุณจัดคิวสไตล์จาก เซิร์ฟเวอร์ Google Fontsเพื่อป้องกันความขัดแย้งกับปลั๊กอินของบุคคลที่สาม นอกจากนี้ยังช่วยให้แก้ไขธีมลูกได้ง่ายขึ้น
- หากต้องการจัดคิวฟอนต์ ให้เปิดไฟล์ฟังก์ชั่นและเพิ่มโค้ดต่อไปนี้ ( แทนที่(Replace)ลิงก์ด้วยลิงก์ที่คุณได้รับจากGoogle Fonts ):
ฟังก์ชัน wosib_add_google_fonts () { (function 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' );
- คุณสามารถเพิ่มบรรทัดใหม่ให้กับฟังก์ชันของคุณหรือในบรรทัดเดียวกันได้หากต้องการเพิ่มฟอนต์ในอนาคตดังนี้:
ฟังก์ชัน 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_fonts' );
ในกรณีนี้ เราได้จัดคิวทั้งแบบอักษรCambriaและWork Sans
ขั้นตอนต่อไปคือการเพิ่มแบบอักษรลงในสไตล์ชีตของธีมเพื่อให้แบบอักษรทำงานบนไซต์ของคุณ
- ในการดำเนินการนี้ ให้เปิดไฟล์ style.css ของธีมของคุณ และเพิ่มโค้ดเพื่อจัดรูปแบบองค์ประกอบแต่ละรายการด้วยแบบอักษรเว็บของคุณดังนี้:
ร่างกาย { (body {)
ตระกูลแบบอักษร: 'Work Sans', sans-serif; (font-family: ‘Work Sans’, sans-serif; )
}
h1, h2, h3 {
ตระกูลฟอนต์: 'Cambria', serif; (font-family: ‘Cambria’, serif;)
}
ในกรณีนี้ ฟอนต์หลักจะเป็นWork Sansในขณะที่องค์ประกอบส่วนหัว เช่น h1, h2 และ h3 จะใช้Cambria
เมื่อเสร็จแล้ว ให้บันทึกสไตล์ชีตและตรวจสอบว่าฟอนต์ของคุณทำงานตามที่ควรจะเป็นหรือไม่ หากไม่เป็นเช่นนั้น ให้ตรวจสอบว่าแบบอักษรไม่ได้ถูกแทนที่ในสไตล์ชีต หรือล้างแคชของเบราว์เซอร์แล้วลองอีกครั้ง
- มีฟอนต์สำรองเพื่อให้แน่ใจว่าฟอนต์สามารถแสดงผลหรือเข้าถึงได้ง่ายโดยเฉพาะสำหรับผู้ใช้ที่มีอุปกรณ์เก่า การเชื่อมต่อไม่ดี หรือหากผู้ให้บริการฟอนต์มีปัญหาทางเทคนิค เมื่อต้องการทำสิ่งนี้ ไปที่สไตล์ชีตและแก้ไขCSSเพื่ออ่านดังนี้:
ร่างกาย { (body {)
ตระกูลแบบอักษร: 'Work Sans', Arial, sans-serif; (font-family: ‘Work Sans’, Arial, sans-serif;)
}
h1, h2, h3 {
ตระกูลแบบอักษร: 'Cambria', Times New Roman, serif; (font-family: ‘Cambria’, Times New Roman, serif;)
}
ถ้าทุกอย่าง เรียบร้อยดีผู้เยี่ยมชมเว็บไซต์ของคุณจะเห็นแบบอักษรเว็บเริ่มต้นของคุณ ในกรณีของเราWork SansและCambria หากมีปัญหา พวกเขาจะเห็นแบบอักษรสำรอง เช่นArialหรือTimes New Romanในกรณีของเรา
2. วิธีเปลี่ยนฟอนต์ใน WordPress โดยโฮสติ้งฟอนต์(2. How to Change Fonts in WordPress by Hosting Fonts)
การโฮสต์ฟอนต์บนเซิร์ฟเวอร์ของคุณเองจะช่วยให้คุณเพิ่มประสิทธิภาพการทำงานของฟอนต์เว็บได้ แต่ก็เป็นวิธีที่ปลอดภัยกว่าใน(a more secure way)การทำเช่นนั้น แทนที่จะดึงทรัพยากรจากไซต์ของบุคคลที่สาม
Google Fonts และแบบอักษรเว็บอื่นๆ อนุญาตให้คุณดาวน์โหลดแบบอักษรเพื่อใช้เป็นแบบอักษรที่โฮสต์ในเครื่อง แต่คุณยังสามารถดาวน์โหลดแบบอักษรอื่นๆ ลงในคอมพิวเตอร์ของคุณได้หากใบอนุญาตอนุญาตให้คุณทำเช่นนั้น
- ในการเริ่มต้น ให้ดาวน์โหลด แตกไฟล์ อัปโหลดไฟล์ฟอนต์ไปยังไซต์ของคุณ แล้วเชื่อมโยงมันในสไตล์ชีตของคุณ ในกรณีนี้ คุณไม่จำเป็นต้องจัดคิวฟอนต์ในไฟล์ functions.php เหมือนที่คุณทำกับฟอนต์ของเว็บ ตรวจสอบว่าไฟล์ที่คุณกำลังอัปโหลดอยู่ใน รูปแบบ .woffก่อนนำไปใช้บนเว็บไซต์ของคุณ
- ถัดไป ไปที่wp-content/themes/themenameเพื่ออัปโหลดไฟล์ฟอนต์ไปยังธีมของคุณ
- เปิดสไตล์ชีตและเพิ่มโค้ดต่อไปนี้ (ในกรณีนี้ เรากำลังใช้ฟอนต์ Work Sansแต่คุณสามารถแทนที่ด้วยฟอนต์ของคุณเองได้):
@font-face {
ตระกูลฟอนต์: 'Work Sans'; (font-family: ‘Work Sans’;)
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
font-weight: ปกติ; ( font-weight: normal;)
ตัวอักษรสไตล์: ปกติ; ( font-style: normal;)
}
@font-face {
ตระกูลฟอนต์: 'Work Sans'; ( font-family: ‘Work Sans’;)
src: url( “fonts/Work Sans-Bold.ttf”) format(‘woff’); /* medium */
font-weight: ตัวหนา; ( font-weight: bold;)
ตัวอักษรสไตล์: ปกติ; (font-style: normal;)
}
@font-face {
ตระกูลแบบอักษร: 'Cambria'; (font-family: ‘Cambria’;)
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
font-weight: ปกติ; ( font-weight: normal;)
ตัวอักษรสไตล์: ปกติ; ( font-style: normal;)
}
หมายเหตุ(Note) : การใช้ @fontface จะทำให้คุณสามารถใช้แบบอักษรตัวหนา ตัวเอียง และรูปแบบอื่นๆ ของแบบอักษรได้ หลังจากนั้นคุณสามารถระบุน้ำหนักหรือรูปแบบสำหรับแต่ละแบบอักษรได้
- ถัดไป เพิ่มสไตล์สำหรับองค์ประกอบของคุณดังนี้:
ร่างกาย { (body {)
ตระกูลแบบอักษร: 'Work Sans', Arial, sans-serif; (font-family: ‘Work Sans’, Arial, sans-serif;)
src: url( “/fonts/Work Sans-Medium.ttf” );
}
h1, h2, h3 {
ตระกูลแบบอักษร: 'Cambria', Times New Roman, serif; (font-family: ‘Cambria’, Times New Roman, serif;)
}
ปรับแต่งตัวอักษร WordPress ของคุณ(Customize Your WordPress Typography)
การเปลี่ยนแบบอักษรในWordPressเป็นความคิดที่ดีในการปรับปรุงการสร้างแบรนด์และประสบการณ์ของผู้ใช้ ไม่ใช่งานตรงไปตรงมา แต่คุณจะควบคุมธีมได้มากขึ้น
คุณสามารถ ปรับ(Were)แต่งแบบอักษรของไซต์โดยใช้ขั้นตอนโดยใช้เคล็ดลับในคู่มือนี้ได้หรือไม่ บอก(Tell)เราในความคิดเห็น
Related posts
วิธีย้าย WordPress site จากโฮสต์หนึ่งไปยังอีก
วิธีการติดตั้งและการตั้งค่าบน WordPress Microsoft Azure
วิธีการรันอย่างรวดเร็ว WordPress บน Microsoft Azure
วิธีการกำหนดค่า Privacy ใน WordPress และทำไมจึงเป็นสิ่งสำคัญ
วิธีการติดตั้ง WordPress บน Google Cloud Platform
วิธีการเพิ่มแถบด้านข้างลอยใน Wordpress
วิธีเพิ่มความเร็วไซต์ WordPress ใน 11 ขั้นตอน
แสดงให้เห็นว่า WordPress HTTP Error เมื่ออัปโหลดรูปภาพ
วิธีสำรองข้อมูลไซต์ WordPress ของคุณ
บทช่วยสอน WordPress Gutenberg: วิธีใช้ตัวแก้ไขใหม่
Squarespace Vs WordPress: แพลตฟอร์มไซต์ไหนดีกว่ากัน?
วิธีสร้างบล็อก Wix ที่ดีพอๆ กับ WordPress
รูปแบบการเขียนบล็อกที่ดีที่สุดเพื่อให้ได้คะแนนของคุณ
การสร้าง Child Theme ใน WordPress
วิธีการติดตั้งไซต์ทดสอบ WordPress บนคอมพิวเตอร์ของคุณ
วิธีค้นหาการเข้าสู่ระบบผู้ดูแลระบบ WordPress ของคุณ
Must Have WordPress Yoast SEO Settings 2021
แสดงข้อความที่ตัดตอนมาบนโฮมเพจของ WordPress blog
วิธีทำ WordPress Site Secure
วิธีการติดตั้งธีมบน WordPress