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

เผยแพร่แล้ว: 2021-08-19

แบบอักษรที่กำหนดเอง

บุคคลมักตั้งใจที่จะอัปโหลดแบบอักษรที่กำหนดเองใน WordPress แต่ติดอยู่กับขั้นตอน

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

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

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

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

มียุคที่แม้แต่แบบอักษรมีราคาแพง แต่มันไม่เป็นเช่นนั้นในวันนี้ คุณสามารถดาวน์โหลดแบบอักษรบนเว็บที่ยอดเยี่ยมได้ฟรีจากที่ต่างๆ เช่น FontSquirrel, TypeKit, Google Fonts และ fonts.com เราขอแนะนำให้คุณลองใช้คู่แบบอักษร หากคุณพบว่าจับคู่และผสมแบบอักษรได้ยาก นักออกแบบใช้เพื่อจับคู่แบบอักษร Google ที่ดีที่สุดด้วยกัน

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

ใช้ Google Fonts เพื่ออัปโหลดแบบอักษรที่กำหนดเองใน WordPress

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

ใช้ปลั๊กอิน Google Fonts

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

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

Google Fonts อย่างง่าย
Google Fonts อย่างง่าย

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

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

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

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

เพิ่ม Google Fonts ด้วยตนเอง

ใช้แบบอักษรใดก็ได้

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

เลือกเฉพาะลักษณะแบบอักษรที่คุณมั่นใจในการใช้งานเท่านั้น เมื่อเลื่อนลงมา คุณจะไปถึงส่วนโค้ดที่ฝังไว้ คัดลอกโค้ดที่ฝังไว้ใต้แท็บมาตรฐานแล้ววางลงในไฟล์ header.php ของธีมของคุณ

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

ใช้ TypeSkit เพื่ออัปโหลดแบบอักษรที่กำหนดเองใน WordPress

แบบอักษร Typekit สำหรับ WordPress

ทรัพยากรพรีเมียมและฟรีสำหรับฟอนต์ที่จะใช้ในโครงการออกแบบคือ Typekit มาพร้อมกับแผนการสมัครสมาชิกฟรีแบบจำกัด และแผนระดับพรีเมียมให้ผู้ใช้เลือก คุณจะต้องสร้างชุดอุปกรณ์ใหม่หลังจากลงชื่อสมัครใช้บัญชี Typekit

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

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

สำหรับการใช้ฟอนต์ Typekit บนสไตล์ชีต WordPress ของคุณ ให้ทำตามรหัสด้านล่าง:

h1 .site-title { 
ตัวอักษรตระกูล: 'modesto-condensed', Arial, Sans-Serif; 
}

ใช้ CSS3 @ font-face เพื่ออัปโหลดแบบอักษรที่กำหนดเองใน WordPress

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

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

ในธีมหรือธีมลูกของคุณ ให้สร้างโฟลเดอร์ 'ใหม่' ในโฟลเดอร์ 'ฟอนต์' จากนั้นอัปโหลดฟอนต์แบบกำหนดเองของคุณ ในการอัปโหลดฟอนต์ให้ใช้ตัวจัดการไฟล์หรือ FTP ของ CPanel ของคุณ โหลดแบบอักษรในสไตล์ชีตสไตล์ธีมของคุณเช่นนี้:

@ แบบอักษรหน้า {
    ตระกูลแบบอักษร: ชื่อแบบอักษร;  
    src: url (http://www.sktthemes.org/skt-content/themes/your-theme/fonts/fontname-Regular.ttf);  
    ตัวอักษร-น้ำหนัก: ปกติ;  
}

ปรับเปลี่ยนและเปลี่ยนตระกูลแบบอักษรและ URL ในรหัสข้างต้น สำหรับการใช้งานในสไตล์ชีตตามวิธีด้านล่าง

.h1 ชื่อไซต์ { 
Font-Family: "FONT_NAME", Cambria, Sans-Serif; 
}

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

บทสรุป

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

บทความที่เกี่ยวข้อง

แบบอักษรแฟนซีใน WordPress

แบบอักษร Google ใช้โดยตรงหรือใช้ปลั๊กอิน