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

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

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

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

พร้อมที่จะเริ่มต้นหรือยัง

คุณสามารถหาแบบอักษรที่กำหนดเองได้ที่ไหน?

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

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

• Google Fonts – ตัวเลือกยอดนิยมของ Google Fonts มีไดเร็กทอรีฟรีกว่า 900 ฟอนต์ของนักออกแบบโอเพ่นซอร์สที่สามารถใช้ได้ในกว่า 135 ภาษา แบบอักษรเหล่านี้สามารถเรียกดูได้อย่างรวดเร็วและรวมเข้ากับโครงการออกแบบเว็บใดๆ ได้อย่างราบรื่น
• Adobe Fonts (ก่อนหน้านี้เรียกว่า Typekit) – แม้ว่า Typekit จะเสนอบริการทั้งเวอร์ชันฟรีและพรีเมียม แต่ตอนนี้เปลี่ยนชื่อเป็น Adobe Fonts คุณจะต้องลงชื่อสมัครใช้แพ็คเกจ Adobe Creative Cloud แบบชำระเงินเพื่อเข้าถึงทรัพยากรนี้ มีแบบอักษรให้เลือกหลายพันแบบ แบบอักษรทั้งหมดได้รับอนุญาตให้ใช้งานส่วนบุคคลและเชิงพาณิชย์ และคุณยังสามารถเลือกจากชุดแบบอักษรตามธีมของโปรเจ็กต์ได้อีกด้วย ซึ่งเหมาะสำหรับผู้ที่ไม่ต้องการการออกแบบ
• Font Squirrel – ในไลบรารี Font Squirrel คุณจะพบกับฟอนต์แบบฟรีและแบบพรีเมียม ซึ่งแบบหลังสามารถซื้อแบบซื้อครั้งเดียวได้ อีกครั้ง คุณสามารถเลือกแบบอักษรคุณภาพสูงได้หลายพันแบบ ซึ่งส่วนใหญ่เป็นแบบฟรีและได้รับอนุญาตให้ใช้ในเชิงพาณิชย์
• Fonts.com – ให้บริการผลิตภัณฑ์ฟอนต์สำหรับเดสก์ท็อปและเว็บมากกว่า 150,000 รายการ Fonts.com มีคอลเลกชั่นฟอนต์แบบกำหนดเองระดับพรีเมียมที่น่าประทับใจ นอกจากนี้คุณยังจะได้พบกับบทความที่น่าสนใจมากมายในบล็อก Font.com การแบ่งปันเคล็ดลับและเทคนิคในการพิมพ์
• FontPair – นำเสนอประสบการณ์ที่แตกต่างเล็กน้อยแก่แหล่งข้อมูลอื่น FontPair จับคู่แบบอักษรจาก Google Fonts เข้าด้วยกัน ช่วยให้คุณค้นหาแบบอักษรที่ผสมผสานกันอย่างลงตัวสำหรับเว็บไซต์ของคุณ

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

วิธีเพิ่ม Google Fonts ใน WordPress โดยใช้ Plugin Easy Google Fonts

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

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

ตอนนี้เรามาดูวิธีการติดตั้งและใช้งานปลั๊กอินนี้กัน

ขั้นตอนที่ 1: ติดตั้ง Google Fonts อย่างง่าย

ในการเริ่มต้นใช้งาน Google Fonts อย่างง่าย ให้เปิดแดชบอร์ด WordPress และเลือก Plugins > Add New จากเมนู

จากนั้นพิมพ์ Easy Google Fonts ลงในฟังก์ชันการค้นหา และเมื่อดึงข้อมูลปลั๊กอินแล้ว ให้คลิกที่ ติดตั้ง > เปิดใช้งาน

ตอนนี้คุณจะพบ Easy Google Fonts ในส่วน การตั้งค่า ในเมนู WordPress ของคุณ

ขั้นตอนที่ 2: แก้ไขแบบอักษรใน WordPress Customizer

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

คลิกที่ วิชาการพิมพ์ จากนั้น คุณสามารถเลือกส่วนต่างๆ ของเว็บไซต์ของคุณที่คุณต้องการใช้แบบอักษร Google ที่กำหนดเอง (เช่น ย่อหน้า ส่วนหัว 2 ส่วนหัว 3 เป็นต้น)

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

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

ขั้นตอนที่ 3: สร้างการควบคุมแบบอักษรที่กำหนดเอง

การควบคุมเริ่มต้นของ Google Fonts อย่างง่ายจะช่วยให้คุณเปลี่ยนแบบอักษรของส่วนย่อหน้าและส่วนหัว 1-6 อย่างไรก็ตาม ไม่ใช่ทุกองค์ประกอบในธีมของคุณที่สามารถจัดการได้ด้วยการควบคุมฟอนต์เริ่มต้น

หากคุณต้องการเปลี่ยนองค์ประกอบอื่นของธีมของคุณ (นอกเหนือจากย่อหน้าหรือส่วนหัว) คุณจะต้องสร้างการควบคุมแบบอักษรที่กำหนดเอง แม้ว่า Easy Font Control จะช่วยให้คุณทำสิ่งนี้ได้อย่างง่ายดาย แต่คุณยังต้องการความเข้าใจพื้นฐานเกี่ยวกับตัวเลือก CSS

หากต้องการเพิ่มการควบคุมแบบอักษรที่กำหนดเอง ให้เลือก การตั้งค่า > Google Fonts จากแดชบอร์ด WordPress ของคุณ จากนั้น ในแท็บ แก้ไข ตัวควบคุมฟอนต์ ให้ตั้งชื่อที่เหมาะสมให้กับกลุ่มควบคุมฟอนต์ใหม่ของคุณ แล้วเลือก สร้างการควบคุมฟอนต์ ที่นี่เราจะสร้างการควบคุมแบบอักษรสำหรับ blockquotes...

ใต้ Add CSS Selectors ให้เพิ่มตัวเลือก CSS สำหรับองค์ประกอบที่คุณต้องการจัดการ คุณสามารถเพิ่มองค์ประกอบได้มากกว่าหนึ่งรายการหากต้องการ จากนั้นเลือก บันทึกการควบคุมแบบอักษร

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

ขณะนี้ คุณสามารถเลือกแบบอักษรที่กำหนดเองใหม่สำหรับองค์ประกอบที่กำหนดเองและเปลี่ยนแปลงการตั้งค่าลักษณะที่ ปรากฏ และการ จัดตำแหน่ง อื่นๆ

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

วิธีเพิ่ม Google Fonts บน WordPress ด้วยตนเอง (ไม่ต้องใช้ปลั๊กอิน)

หากคุณต้องการเพิ่ม Google Fonts ใน WordPress ด้วยตนเอง คุณจะต้องมีความรู้พื้นฐานเกี่ยวกับการเขียนโค้ดเป็นอย่างดี

ขั้นตอนที่ 1: เลือกแบบอักษรของ Google

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

จากนั้นในหน้าของฟอนต์ ให้คลิก Select this Font ที่นี่เราได้เลือกแบบอักษรอินดี้ฟลาวเวอร์

ป๊อปอัปจะปรากฏขึ้นบนหน้าจอของคุณ ขึ้นอยู่กับฟอนต์ที่คุณเลือก คุณจะสามารถเข้าถึงตัวเลือกการปรับแต่งสำหรับน้ำหนักและสไตล์ของฟอนต์ ตลอดจนดูข้อมูลการฝังได้

ขั้นตอนที่ 2: ฝังรหัสแบบอักษรที่กำหนดเองในเว็บไซต์ WordPress ของคุณ

ถัดไป คุณจะต้องคัดลอก โค้ดฝัง ตัว (ดูป๊อปอัปด้านบน) และวางลงในส่วน <head> ของธีม WordPress ของคุณ วิธีที่ง่ายที่สุดในการทำเช่นนี้คือการติดตั้งปลั๊กอิน WordPress ฟรี แทรกส่วนหัวและส่วนท้าย การใช้ปลั๊กอินนี้คุณสามารถเพิ่มโค้ดไปยังเว็บไซต์ของคุณได้อย่างรวดเร็วโดยไม่ต้องแก้ไขไฟล์ธีมของคุณ

หลังการติดตั้ง เปิดการตั้งค่าปลั๊กอินโดยเลือกการ ตั้งค่า > แทรกส่วนหัวและส่วนท้าย จากแดชบอร์ด WordPress ของคุณ จากนั้นคุณต้องเพิ่มโค้ดฝังตัวของ Google Fonts ในส่วนส่วนหัว

ในทำนองเดียวกัน หากคุณต้องการแก้ไขไฟล์ header.php ของธีมลูกของคุณ

ขั้นตอนที่ 3: ใช้แบบอักษรใหม่โดยใช้ CSS

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

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

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

วิธีเพิ่ม Adobe Fonts บน WordPress

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

ขั้นตอนที่ 1: เลือก Adobe Font

ก่อนอื่น คุณจะต้องเรียกดูไลบรารีฟอนต์ที่กว้างขวางของ Adobe และเลือกฟอนต์ที่เหมาะสมกับโปรเจ็กต์ของคุณ เมื่อคุณทำการเลือกแล้ว ให้คลิกที่ไอคอน </> เพื่อเพิ่มแบบอักษรให้กับ โครงการเว็บ ใหม่

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

ขั้นตอนที่ 2: ฝังโค้ด Adobe Font ในเว็บไซต์ WordPress ของคุณ

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

เป็นไปตามกระบวนการเดียวกับการฝังโค้ด Google Fonts เพียงฝังโค้ดลงในแท็ก <head> บนเว็บไซต์ของคุณหรือใช้ปลั๊กอิน WordPress แทรกส่วนหัวและส่วนท้าย (ตามที่กล่าวไว้ก่อนหน้านี้)

ขั้นตอนที่ 3: ใช้แบบอักษรใหม่โดยใช้ CSS

เช่นเดียวกับ Google Fonts คุณสามารถใช้แบบอักษรใหม่ที่กำหนดเองของ Adobe โดยใช้กฎ CSS ในแดชบอร์ด Adobe ของคุณ หน้า Web Project จะแสดงรายชื่อฟอนต์ CSS ตลอดจนรูปแบบฟอนต์และน้ำหนักตัวเลข สำหรับฟอนต์แต่ละประเภทที่คุณเลือก

กลับไปที่เว็บไซต์ WordPress ของคุณ กฎ CSS เหล่านี้สามารถใช้ภายในเครื่องมือปรับแต่งภายใต้ CSS เพิ่มเติม

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

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

วิธีเพิ่มแบบอักษรที่กำหนดเองลงในพื้นที่เว็บของคุณ

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

ขั้นตอนที่ 1: ดาวน์โหลดแบบอักษรที่กำหนดเอง

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

ที่นี่เราได้ดาวน์โหลดแบบอักษร Milkshake แบบกำหนดเองฟรีจาก Squirrel Fonts

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

หากคุณต้องการแปลงแบบอักษรที่กำหนดเองเป็นรูปแบบอื่น Squirrel Font มีเครื่องมือสร้าง Webfont Generator ฟรีที่จะช่วยให้คุณดำเนินการดังกล่าวได้

ขั้นตอนที่ 2: อัปโหลดแบบอักษรที่กำหนดเองไปยังเซิร์ฟเวอร์ของคุณ

ขั้นตอนต่อไปคือการอัปโหลดแบบอักษรที่กำหนดเองของคุณไปยังเซิร์ฟเวอร์ของคุณ ในการดำเนินการนี้ ให้เปิดตัวจัดการไฟล์ใน cPanel ของเว็บไซต์ของคุณ

จากนั้นภายในโฟลเดอร์ธีมที่ใช้งานอยู่ ให้สร้างโฟลเดอร์ใหม่ชื่อ Fonts และอัปโหลดแบบอักษรที่กำหนดเองของคุณที่นี่

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

ขั้นตอนที่ 3: ใช้ CSS เพื่อใช้แบบอักษรที่กำหนดเองกับเว็บไซต์ของคุณ

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

 @ แบบอักษรหน้า {
    ตระกูลฟอนต์: มิลค์เชค;
    src: url("https://jonesblogs.com/wp-content/themes/beautiful-pro/fonts/milkshake.woff")
         รูปแบบ ("woff");
}

ที่สำคัญ อย่าลืมเปลี่ยนชื่อฟอนต์และ URL (คัดลอก URL สำหรับไฟล์ฟอนต์บนเซิร์ฟเวอร์ของคุณ)

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

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

ความคิดสุดท้ายเกี่ยวกับวิธีการเพิ่มแบบอักษรที่กำหนดเองไปยัง WordPress

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

มีคำถามเกี่ยวกับวิธีเพิ่มแบบอักษรที่กำหนดเองใน WordPress หรือไม่? กรุณาถามออกไปในความคิดเห็นด้านล่าง ...