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

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

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

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

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

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

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

สารบัญ

  • วิธีเพิ่มแบบอักษรที่กำหนดเองใน WordPress
    • 1. เพิ่ม Google Fonts โดยใช้ Plugin
    • 2. เพิ่ม Google Fonts โดยใช้ Code
    • 3. เพิ่ม Adobe TypeKit Fonts ให้กับ WordPress
  • ไลบรารีฟอนต์แบบกำหนดเองอื่น ๆ
  • วิธีเพิ่มแบบอักษรที่กำหนดเองอื่น ๆ โดยใช้ Plugin
  • วิธีเพิ่มแบบอักษรที่กำหนดเองอื่น ๆ ด้วยตนเอง
  • บทสรุป

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

1. เพิ่ม Google Fonts โดยใช้ Plugin

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

  1. สำหรับวิธีนี้ ให้ติดตั้งปลั๊กอิน Easy Google Fonts ก่อน เมื่อติดตั้งปลั๊กอินแล้ว คุณจะพบตัวเลือกใหม่ที่เรียกว่า 'ตัวพิมพ์' ในเครื่องมือปรับแต่ง WordPress ของคุณ (ลักษณะที่ปรากฏ > ปรับแต่ง)
วิชาการพิมพ์

2. เมื่อคุณไปที่ตัวเลือก Typography คุณจะพบส่วนเนื้อหาเริ่มต้นหรือตัวควบคุมแบบอักษรต่างๆ ที่คุณสามารถปรับแต่งได้ คุณสามารถค้นหาการตั้งค่าแบบอักษรสำหรับกลุ่มนั้นได้โดยคลิกที่ 'แก้ไขแบบอักษร'

แก้ไขแบบอักษร

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

ใต้แท็บ ลักษณะที่ปรากฏ คุณจะพบตัวเลือกทั่วไปอื่นๆ เช่น สีแบบอักษร ขนาดแบบอักษร และความสูงของบรรทัด

มีการควบคุมด้วยภาพเชิงลึกบางส่วนภายใต้แท็บ Positioning เช่น Margin, Padding และ Border

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

Google Fonts

4. ไปที่แท็บ Manage Font Controls และคลิกที่ 'Create a Font Control'

สร้างการควบคุมแบบอักษรใหม่

5. คุณจะถูกขอให้ระบุ CSS Selectors เพื่อกำหนดหมวดหมู่เฉพาะนี้ จากนั้นคลิก 'Safe Font Control' เพื่อสร้างหมวดหมู่/การควบคุมแบบอักษรใหม่

ตัวเลือก CSS

6. การควบคุมแบบอักษรแบบกำหนดเองสามารถพบได้ที่ตำแหน่งอื่นนอกเหนือจากค่าเริ่มต้น กลับไปที่ WordPress Customizer และคลิกที่ตัวเลือก Typography คุณจะพบว่ามีสองประเภท — Default Typography และ Theme Typography การควบคุมฟอนต์แบบกำหนดเองจะอยู่ภายใต้ตัวเลือก Theme Typography

วิชาการพิมพ์ธีม

2. เพิ่ม Google Fonts โดยใช้ Code

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

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

ครอบครัวที่เลือก

3. คัดลอกลิงก์สำหรับฝังนี้แล้ววางลงในไฟล์ header.php ก่อนแท็ก <body>

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

แทรกส่วนหัวและส่วนท้าย

3. เพิ่ม Adobe TypeKit Fonts ให้กับ WordPress

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

  1. เมื่อคุณลงชื่อเข้าใช้เว็บไซต์ คุณสามารถใช้แบบอักษรที่ต้องการได้โดยคลิกที่ปุ่ม </>
Adobe Fonts

2. ในการรับลิงก์สำหรับฝัง คุณต้องสร้างเว็บโปรเจ็กต์บน Adobe Fonts และเพิ่มฟอนต์ที่เลือกลงในโปรเจ็กต์

การเลือกแบบอักษรให้กับโครงการ
รหัสฝัง

3. เช่นเดียวกับกระบวนการของ Google Fonts คุณต้องวางลิงก์สำหรับฝังนี้ลงในไฟล์ header.php ของธีมก่อนแท็ก <body>

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

แทรกส่วนหัวและส่วนท้าย

ไลบรารีฟอนต์แบบกำหนดเองอื่น ๆ

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

  1. เทมเพลตมอนสเตอร์
  2. แบบอักษรกระรอก
  3. ฟอนต์สปริง
  4. 1001 แบบอักษรฟรี
  5. Font Freak
  6. แบบอักษรนามธรรม
  7. MyFonts

วิธีเพิ่มแบบอักษรที่กำหนดเองอื่น ๆ โดยใช้ Plugin

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

วิธีเพิ่มแบบอักษรที่กำหนดเองอื่น ๆ ด้วยตนเอง

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

ดาวน์โหลดแบบอักษรที่คุณต้องการจากไลบรารีแบบอักษรใดก็ได้ เช่น TemplateMonster จากนั้นไปที่ wp-content/themes/your-theme/fonts และอัปโหลดไปยังโฟลเดอร์ Fonts โดยใช้ไคลเอนต์ FTP หากไม่มีโฟลเดอร์ Fonts ให้สร้างขึ้นใหม่

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

@ แบบอักษรหน้า {

ตระกูลแบบอักษร: แบบอักษรที่กำหนดเอง;

src: url (http://yourwebsite.com/wp-content/themes/twentynineteen/fonts/AguafinaScript-Regular.ttf);

ตัวอักษร-น้ำหนัก: ปกติ;

}

คุณต้องแทนที่ font-family ด้วยชื่อของฟอนต์ที่คุณต้องการนำเข้าและ URL ด้วย URL ของเว็บไซต์ของคุณ

บทสรุป

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