วิธีเพิ่มแบบอักษร WordPress แบบกำหนดเอง (และเลือกแบบอักษรที่จับคู่)

กำลังมองหาวิธีเพิ่มแบบอักษร WordPress แบบกำหนดเองลงในไซต์ของคุณหรือไม่?

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

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

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

จากนั้น เราจะแสดงวิธีเพิ่มแบบอักษร WordPress แบบกำหนดเองจาก:

• Google Fonts
• Adobe ฟอนต์ (Typekit)
• แท้จริงอยู่ที่อื่น! (โดยการอัปโหลดไฟล์ฟอนต์และใช้ CSS3 @font-face)

คลิกลิงก์นี้เพื่อข้ามไปยังบทช่วยสอนโดยตรง

จะหาแบบอักษรที่กำหนดเองสำหรับ WordPress ได้ที่ไหน

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

หลังจาก Google Fonts อีกตัวเลือกหนึ่งที่รู้จักกันดีคือ Adobe Fonts ( เดิมเรียกว่า Typekit ) Adobe Fonts รวมอยู่ในการสมัครใช้งาน Creative Cloud ของ Adobe โดยไม่มีค่าใช้จ่ายเพิ่มเติม แต่ไม่มีให้สำหรับผู้ที่ไม่ได้สมัครใช้บริการ

สุดท้ายนี้ คุณจะพบไซต์อื่นๆ มากมายที่รวบรวมฟอนต์ฟรีและฟอนต์พรีเมียม สองรายการโปรดของเราคือ:

• Font Squirrel – รวบรวมแบบอักษรที่ใช้งานได้ฟรี 100% สำหรับใช้ในเชิงพาณิชย์
• Fonts.com - มีฟอนต์พรีเมียมมากมาย

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

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

อย่างไรก็ตาม คุณคงไม่อยากสุ่มเอาแบบอักษรสองแบบมารวมกันซึ่งอาจดูไม่ร้อนเกินไป

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

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

• FontPair
• Fontjoy
• Typ.io

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

วิธีเพิ่มแบบอักษร WordPress แบบกำหนดเอง: คำแนะนำทีละขั้นตอน

ตอนนี้เพื่อความสนุก นี่คือวิธีเริ่มใช้ฟอนต์ WordPress ที่คุณกำหนดเอง

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

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

1. เพิ่ม Google Fonts ใน WordPress (ปลั๊กอิน วิธีการโฮสต์ด้วยตนเองหรือในเครื่อง)
2. เพิ่ม Adobe Fonts (Typekit) ใน WordPress
3. ใช้ CSS3 @font-face เพื่ออัปโหลดและเพิ่มแบบอักษรใด ๆ ใน WordPress

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

เนื่องจาก Google Fonts เป็นแหล่งที่นิยมมากที่สุดสำหรับแบบอักษร WordPress แบบกำหนดเอง เราจะครอบคลุมสามวิธีในการเพิ่ม Google Fonts ใน WordPress:

1. เพิ่ม Google Fonts จาก CDN ของ Google ด้วยปลั๊กอิน
2. เพิ่ม Google Fonts จาก CDN . ของ Google ด้วยตนเอง
3. โฮสต์ Google Fonts ใน WordPress ด้วยปลั๊กอิน

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

เนื่องจากความนิยมของ Google Fonts คุณจึงสามารถพบปลั๊กอินคุณภาพหลายตัวที่ทำให้เพิ่ม Google Fonts ลงใน WordPress ได้อย่างง่ายดาย โดยที่เราชอบที่สุดคือ Easy Google Fonts เนื่องจาก:

• ฟรี
• น้ำหนักเบา
• ง่ายต่อการใช้

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

จากนั้น คลิกที่ตัวเลือก Typography เพื่อเลือกตัวเลือก Google Fonts ของคุณ:

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

ตัวอย่างเช่น การเปลี่ยนแบบอักษรของย่อหน้ามีลักษณะดังนี้:

นอกเหนือจากการเลือกแบบอักษรแล้ว ปลั๊กอินยังให้คุณปรับแต่ง:

• น้ำหนักตัวอักษร
• ตกแต่งข้อความ
• สี

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

ในการตั้งค่านี้ ให้ไปที่การ ตั้งค่า → Google Fonts และสร้างการควบคุมแบบอักษรใหม่เพื่อกำหนดเป้าหมายตัวเลือก CSS เฉพาะ:

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

เนื่องจาก Google โฮสต์แบบอักษรทั้งหมดบน CDN ของตัวเอง การเพิ่ม Google Fonts ลงใน WordPress ด้วยตนเองจึงค่อนข้างง่าย

โดยพื้นฐานแล้ว แทนที่จะต้องอัปโหลดไฟล์ฟอนต์ไปยังเซิร์ฟเวอร์ของคุณ คุณสามารถลิงก์ไปยัง CDN ที่โฮสต์ของ Google แล้ว Google จะจัดการให้บริการฟอนต์ให้คุณ

บางคนไม่ชอบการทำเช่นนี้ด้วยเหตุผลด้านประสิทธิภาพ – ฉันจะแบ่งปันวิธีการโฮสต์ Google Fonts ในเครื่องในส่วนถัดไป ถ้าคุณต้องการ

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

สำหรับตัวอย่างนี้ สมมติว่าคุณต้องการใช้ Roboto

ไปที่หน้าแบบอักษรแล้วคลิก + เลือกแบบอักษรนี้ :

จะเป็นการเพิ่มหน้าต่างที่มุมล่างขวา คลิกเพื่อขยายหน้าต่างนั้น

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

• ปกติ
• ตัวเอียง
• ตัวหนา

คุณสามารถใช้น้อยลงหากต้องการประสิทธิภาพที่ดีที่สุด

เมื่อคุณได้เลือกแล้ว ให้กลับไปที่แท็บ Embed และคัดลอก โค้ด Embed Font :

ถัดไป คุณต้องเพิ่มโค้ดนี้ในส่วน <head> ของธีม WordPress ของคุณ คุณสามารถทำได้โดย:

• แก้ไข ไฟล์ header.php ของ ธีมลูก ของคุณโดยตรง ( ตรวจสอบให้แน่ใจว่าคุณใช้ธีมย่อย มิฉะนั้น แบบอักษรที่กำหนดเองของคุณจะหายไปเมื่อคุณอัปเดตธีมของคุณ )
• ใช้ปลั๊กอินฟรีเช่น แทรกส่วนหัวและส่วนท้าย

เมื่อคุณเพิ่มโค้ดแล้ว คุณสามารถเริ่มใช้ Google Fonts ใน CSS ของคุณได้

หากคุณกลับไปที่เว็บไซต์ Google Fonts Google จะบอกกฎ CSS ที่คุณต้องใช้:

ตัวอย่างเช่น หากต้องการให้แท็ก h2 ของคุณใช้แบบอักษร Roboto ใหม่ คุณสามารถไปที่ ลักษณะที่ปรากฏ → ปรับแต่ง → CSS เพิ่มเติม และเพิ่มข้อมูลโค้ดต่อไปนี้:

ชั่วโมง2 {

ตระกูลแบบอักษร: 'Roboto', sans-serif;

}

วิธีโฮสต์ Google Fonts ใน WordPress ด้วย Plugin

นี่เป็นวิธีสุดท้ายสำหรับ Google Fonts!

บางคนชอบที่จะโฮสต์ Google Fonts ในเครื่อง แทนที่จะโหลดจาก CDN ของ Google นั่นคือ แทนที่จะโหลดจากลิงก์เช่น “https://fonts.googleapis.com/css?family=Roboto:400,700” คุณสามารถโฮสต์ไฟล์บนเซิร์ฟเวอร์ของคุณเองได้

วิธีที่ง่ายที่สุดในการทำเช่นนี้คือการใช้ปลั๊กอินฟรีที่เรียกว่า CAOS สำหรับ Webfonts

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

เมื่อคุณทำเสร็จแล้ว คุณสามารถเริ่มใช้แบบอักษรใน CSS ของคุณได้ ( เหมือนกับว่าคุณทำตามวิธีการก่อนหน้านี้ )

วิธีเพิ่ม Adobe Fonts (Typekit) ใน WordPress

หากคุณต้องการใช้ Adobe Fonts ใน WordPress ให้ทำตามขั้นตอนเดียวกับวิธี Google Fonts ด้วยตนเอง โปรดจำไว้ว่า บริการ Adobe Fonts มีให้โดยเป็นส่วนหนึ่งของการสมัครสมาชิก Creative Cloud เท่านั้น

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

ในหน้าต่าง เพิ่มแบบอักษรให้กับ Web Project คุณสามารถเลือกแบบอักษรที่จะรวม:

จากนั้น Adobe จะให้โค้ดสำหรับฝังแก่คุณ เช่นเดียวกับ Google Fonts:

นำโค้ดฝังตัวนั้นและเพิ่มลงในไซต์ของคุณโดยใช้ไฟล์ header.php ของธีมลูกหรือปลั๊กอิน เช่น แทรกส่วนหัวและส่วนท้าย

เมื่อคุณเชื่อมโยงกับไฟล์ CSS แล้ว คุณสามารถใช้ CSS ที่ Adobe จัดเตรียมไว้เพื่อเริ่มใช้แบบอักษรกับตัวเลือก CSS ที่ไซต์ของคุณ:

วิธีใช้ @font-face ใน WordPress

สุดท้าย วิธีสุดท้ายที่เราจะแสดงให้คุณเห็นคือวิธีใช้ @font-face ใน WordPress ข้อดีของวิธีนี้คือจะทำงานกับ ไฟล์ฟอนต์จากแหล่งใดก็ได้

โดยทั่วไป ตราบใดที่คุณสามารถดาวน์โหลดไฟล์ฟอนต์และมีสิทธิ์ใช้งาน CSS3 @font-face ก็จะทำให้เสร็จ

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

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

ถัดไป เชื่อมต่อกับเซิร์ฟเวอร์ของไซต์ WordPress ผ่าน FTP หรือ cPanel File Manager แล้ว…

• สร้างโฟลเดอร์ใหม่ชื่อ ฟอนต์ ภายในไดเร็กทอรีของธีมที่ใช้งานหรือธีมย่อยของคุณ ( บางธีมอาจมี โฟลเดอร์ ฟอนต์ อยู่แล้ว ในกรณีนี้ คุณสามารถข้ามได้ )
• อัปโหลดไฟล์ฟอนต์ไปยังโฟลเดอร์ ฟอนต์ คุณสามารถอัปโหลดทั้งรูปแบบ .woff และ .woff2

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

ขั้นแรก คุณต้องใช้ @font-face เพื่อเพิ่มแบบอักษรของคุณ...

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

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

ตระกูลแบบอักษร: AlexBrush;

src: url (http://easy-whale.w6.wpsandbox.pro/wp-content/themes/twentynineteen/fonts/alexbrush-regular-webfont.woff);

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

}

เมื่อคุณทำเสร็จแล้ว คุณสามารถใช้ CSS เพื่อใช้ตระกูลฟอนต์ของคุณ ( ตามชื่อที่คุณลงทะเบียนกับ @font-face ) ตัวอย่างเช่น การใช้แบบอักษร AlexBrush สำหรับส่วนหัว <h2> มีลักษณะดังนี้:

และนั่นแหล่ะ! คุณสามารถใช้วิธี CSS3 @font-face นี้กับไฟล์แบบอักษรใดก็ได้

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

หากธีม WordPress ของคุณไม่มีแบบอักษรที่คุณต้องการใช้ ก็ไม่ต้องตกใจ! คุณมีตัวเลือกมากมายในการเพิ่มแบบอักษร WordPress ของคุณเอง

วิธีที่ง่ายที่สุดในการเริ่มต้นคือการใช้แบบอักษรฟรีที่โฮสต์ที่ Google Fonts หรือตัวเลือกพรีเมียมที่โฮสต์ที่ Adobe Fonts

อย่างไรก็ตาม คุณไม่ได้จำกัดอยู่แค่บริการเหล่านั้น และด้วยการใช้ CSS3 @font-face คุณสามารถอัปโหลดไฟล์ฟอนต์ใดๆ ไปยัง WordPress และเริ่มใช้ในธีมของคุณได้

ออกไปที่นั่นและสร้างการจับคู่แบบอักษรของคุณเอง!