วิธีเพิ่มแบบอักษรที่กำหนดเองบน WordPress ด้วยวิธีง่ายๆ
เผยแพร่แล้ว: 2015-05-22การเพิ่มแบบอักษรให้กับคอมพิวเตอร์ของคุณค่อนข้างตรงไปตรงมา เพียงดาวน์โหลดไฟล์ไปยังไดเร็กทอรีฟอนต์ของคุณ จากนั้นคุณก็สามารถเริ่มใช้งานได้ในซอฟต์แวร์และแอพพลิเคชั่นที่คุณเลือก
อย่างไรก็ตาม หากคุณต้องการใช้แบบอักษรที่กำหนดเองบนเว็บไซต์ของคุณ โดยเฉพาะแบบอักษรที่ผู้เยี่ยมชมอาจไม่ได้ติดตั้งบนอุปกรณ์ของพวกเขา แบบอักษรนั้นจะซับซ้อนขึ้นเล็กน้อย
โชคดีที่ในฐานะผู้ใช้ WordPress มี เครื่องมือดีๆ ที่คุณสามารถใช้เพิ่มแบบอักษรแต่ละแบบ หรือทั้งไลบรารีของเครื่องมือเหล่านี้ในเว็บไซต์ของคุณ เมื่อคุณทำให้ฟอนต์พร้อมใช้งานสำหรับธีมของคุณแล้ว คุณสามารถเริ่มนำไปใช้กับสไตล์ต่างๆ ที่ใช้ในเว็บไซต์ของคุณได้
ในบทความนี้เราจะแสดงให้คุณเห็นถึงที่ที่คุณสามารถหาแบบอักษรคุณภาพสูงและฟรีได้ วิธีเพิ่มลงในเว็บไซต์ WordPress ของคุณ รวมทั้งเครื่องมือบางอย่างที่จะช่วยคุณเลือกการตั้งค่าที่เหมาะสมสำหรับแบบอักษรแต่ละแบบบนเว็บไซต์ของคุณ
จะหาแบบอักษรสำหรับเว็บไซต์ของคุณได้ที่ไหน
ก่อนที่เราจะได้รับคำแนะนำเกี่ยวกับวิธีที่คุณสามารถเพิ่มแบบอักษรที่กำหนดเองลงในเว็บไซต์ WordPress ของคุณ มาดูสถานที่บางแห่งที่คุณสามารถค้นหาแบบอักษรใหม่เพื่อแก้ไขลักษณะที่ปรากฏของข้อความในไซต์ของคุณ
มีแหล่งข้อมูลออนไลน์ดีๆ มากมายให้คุณเลือกใช้ ซึ่งคุณจะ พบแบบอักษรโอเพนซอร์ส ที่สามารถใช้ได้อย่างอิสระทั่วทั้งเว็บไซต์ของคุณ แหล่งข้อมูลบางอย่างที่คุณอาจต้องการสำรวจ ได้แก่:
- Google Fonts: เรียกดูแบบอักษรโอเพ่นซอร์สกว่า 600 แบบที่ได้รับการปรับให้เหมาะสมสำหรับเว็บ การใช้แบบอักษรเหล่านี้บนเว็บไซต์ WordPress ของคุณนั้นง่ายมาก เนื่องจากเราจะกล่าวถึงในไม่ช้า
- Font Squirrel: พื้นที่เก็บข้อมูลขนาดใหญ่อีกแห่งที่ให้ฟอนต์ใช้งานฟรี
- Edge Web Fonts: ชุดแบบอักษรเว็บฟรีที่ขับเคลื่อนโดย Adobe Typekit
- Typekit: คอลเลกชันระดับมืออาชีพของฟอนต์พรีเมียมฟรีกว่า 4,000 แบบจาก Adobe สำหรับใช้บนเว็บและในงานพิมพ์
อย่างที่คุณเห็นมีแหล่งออนไลน์ที่ถูกต้องตามกฎหมายมากมายสำหรับฟอนต์ฟรีและฟอนต์พรีเมียมที่คุณสามารถใช้ปรับแต่งรูปลักษณ์ของเว็บไซต์ WordPress ของคุณได้
เครื่องมือการพิมพ์สำหรับนักออกแบบเว็บไซต์
การเลือกชุดแบบอักษรที่เหมาะสมสำหรับเว็บไซต์ของคุณอาจเป็นเรื่องยาก มีกระบวนการมากกว่าแค่ การเลือกหนึ่งหรือสองแบบอักษร ที่คุณชอบ แล้วเพิ่มลงในเว็บไซต์ของคุณ
คุณไม่เพียงแต่ต้องพิจารณารูปลักษณ์ของฟอนต์เท่านั้น แต่ยังรวมถึงขนาดที่คุณเลือก พื้นที่เนื้อหาบนไซต์ของคุณกว้างเพียงใด และความสูงของบรรทัดที่เหมาะสมที่สุดสำหรับแบบอักษรแต่ละแบบคือเท่าใด
โชคดีที่มีเครื่องมือออนไลน์ฟรีที่คุณสามารถใช้เพื่อช่วยให้คุณใช้แบบอักษรที่เลือกได้อย่างถูกต้อง ซึ่งจะ ทำให้มั่นใจได้ว่าเนื้อหาของคุณจะดูดีที่สุด
แหล่งข้อมูลออนไลน์หนึ่งที่คุณควรดูอย่างรวดเร็วเมื่อปรับแต่งแบบอักษรบนเว็บไซต์ของคุณคือ Golden Ratio Typography Calculator เครื่องมือการพิมพ์นี้จากคนที่อยู่เบื้องหลัง Thesis Framework ช่วยให้คุณสามารถป้อนขนาดแบบอักษร ตามด้วยความกว้างของพื้นที่เนื้อหาของคุณ จากนั้นเครื่องมือจะคำนวณการตั้งค่าการพิมพ์ที่สมบูรณ์แบบสำหรับการกำหนดค่าเว็บไซต์เฉพาะของคุณ
Type Scale เป็นเครื่องมือออนไลน์อีกชนิดหนึ่งที่ช่วยให้ง่ายต่อการกำหนดขนาดที่รูปแบบข้อความต่างๆ บนเว็บไซต์ของคุณควรสัมพันธ์กัน หลังจากป้อนขนาดฟอนต์พื้นฐานของคุณแล้ว เช่น ขนาดของข้อความย่อหน้าบนไซต์ของคุณ คุณจะพบ ว่าแต่ละหัวเรื่องต่างๆ ควรกำหนดขนาด ไว้เท่าใด
มีหลายขนาดให้เลือก รวมทั้งอัตราส่วนทองคำด้านบน เมื่อคุณพอใจกับการตั้งค่าแล้ว คุณสามารถ คัดลอก CSS เพื่อใช้งานบนเว็บไซต์ของคุณเองได้อย่างรวดเร็ว
ปลั๊กอินแบบอักษรที่กำหนดเองของ WordPress
เช่นเดียวกับที่มีหลายแห่งในการค้นหาแบบอักษรออนไลน์ มีวิธีมากมายในการรวมแบบอักษรเหล่านี้เข้ากับเว็บไซต์ WordPress ของคุณ อย่างไรก็ตาม เพื่อช่วยให้คุณ เริ่มต้นได้เร็วที่สุด นี่คือปลั๊กอินที่เกี่ยวข้องกับฟอนต์ WordPress ที่ดีที่สุดบางส่วน:
Google Fonts อย่างง่าย
Google Fonts อย่างง่ายเป็นปลั๊กอินฟรีที่ให้คุณใช้ แบบอักษรฟรีกว่า 600 แบบ จากพื้นที่เก็บข้อมูล Google บนเว็บไซต์ WordPress ของคุณได้ ปลั๊กอินนี้ทำงานร่วมกับเครื่องมือปรับแต่ง WordPress วิธีนี้ทำให้คุณสามารถดูตัวอย่างการเปลี่ยนแปลงของคุณก่อนตัดสินใจขั้นสุดท้ายว่าจะใช้แบบอักษรใดในไซต์ของคุณ
หลังจากติดตั้งและเปิดใช้งานปลั๊กอินบนเว็บไซต์ของคุณแล้ว คุณสามารถเริ่มเปลี่ยนแบบอักษรที่ใช้โดยธีม WordPress ปัจจุบันของคุณได้ โดยไปที่เครื่องมือปรับแต่ง WordPress และคลิกที่ส่วนวิชาการพิมพ์
ปลั๊กอินช่วยให้คุณเปลี่ยนการตั้งค่าตัวพิมพ์สำหรับสไตล์หลักที่ใช้โดยธีมของคุณ แกะกล่องได้ทันที ซึ่งอาจรวมถึงย่อหน้าและแต่ละหัวเรื่อง อย่างไรก็ตาม คุณสามารถ สร้างการควบคุมแบบอักษรที่กำหนดเอง ได้ผ่านหน้าการตั้งค่า Google Fonts อย่างง่าย สิ่งเหล่านี้จะถูกเพิ่มไปยังอินเทอร์เฟซของเครื่องมือปรับแต่ง ทำให้คุณมีวิธีง่ายๆ ในการเปลี่ยนแบบอักษรที่ใช้โดยองค์ประกอบต่างๆ เช่น รายการ เครื่องหมายคำพูด และอื่นๆ
หลังจากที่คุณได้เพิ่มตัวควบคุมฟอนต์แบบกำหนดเองแล้ว คุณสามารถเข้าถึงได้จากการตั้งค่าตัวพิมพ์ของธีมบนเครื่องมือปรับแต่ง
ด้วยการใช้คุณลักษณะนี้ของปลั๊กอิน คุณสามารถปรับเปลี่ยนแบบอักษรที่ใช้โดยองค์ประกอบหรือสไตล์ใดๆ ของธีม WordPress ของคุณได้ ตัวควบคุมที่เพิ่มลงในเครื่องมือปรับแต่งยังครอบคลุมน้ำหนักแบบอักษร การตกแต่งข้อความ และคุณสมบัติการแปลง ตลอดจน สีแบบอักษร สีพื้นหลัง ขนาด ความสูงของบรรทัด และระยะห่างระหว่างตัวอักษร

ด้วยการรวมการควบคุมแบบอักษรที่กำหนดเองเข้ากับการตั้งค่าโดยละเอียดที่เสนอ ปลั๊กอิน Easy Google Fonts จะเปิดโลกทั้งใบของความเป็นไปได้ในการปรับเปลี่ยนลักษณะที่ปรากฏของข้อความบนเว็บไซต์ WordPress ของคุณ โดยไม่จำเป็นต้องแก้ไขโค้ดใดๆ โดยตรง
ใช้แบบอักษรใดก็ได้
ขอแนะนำให้ใช้ปลั๊กอิน Easy Google Fonts ข้างต้น อย่างไรก็ตาม มีข้อเสียอยู่อย่างหนึ่ง: คุณสามารถใช้แบบอักษรจากคอลเล็กชัน Google Fonts เท่านั้น หากไม่มีฟอนต์ 686 แบบที่ดึงดูดใจ หรือคุณต้องการ ใช้ฟอนต์แบบกำหนดเอง ปลั๊กอิน Use Any Font ที่ฟรีเท่ากันก็เป็นทางเลือกที่ดี
หลังจากติดตั้งและเปิดใช้งานปลั๊กอินแล้ว คุณสามารถอัปโหลดแบบอักษรอย่างน้อยหนึ่งแบบไปยังเว็บไซต์ของคุณได้โดยตรงจากคอมพิวเตอร์ของคุณ อย่างไรก็ตาม ก่อนที่คุณจะเริ่มต้น คุณต้องสมัครใช้งานคีย์ API ฟรี (หรือบริจาค) ซึ่งจะเชื่อมต่อปลั๊กอินกับเครื่องมือแปลงฟอนต์
เมื่อคุณอัปโหลดแบบอักษรอย่างน้อยหนึ่งแบบแล้ว คุณสามารถกำหนดแบบอักษรนั้นให้กับองค์ประกอบเฉพาะของเว็บไซต์ของคุณได้ ซึ่งรวมถึงรายการองค์ประกอบเริ่มต้น เช่นเดียวกับองค์ประกอบที่กำหนดเองใดๆ ที่คุณกำหนด
ปลั๊กอินยังเพิ่ม การควบคุมแบบอักษรให้กับตัวแก้ไขบทความของ WordPress วิธีนี้ทำให้ง่ายต่อการเปลี่ยนแบบอักษรที่ใช้ในโพสต์และหน้าของคุณ ทีละรายการ แทนที่จะเปลี่ยนทั่วโลก
หลังจากกำหนดแบบอักษรแล้ว คุณสามารถดูการเปลี่ยนแปลงการพิมพ์ของคุณได้โดยไปที่ส่วนหน้าของเว็บไซต์ของคุณ แม้ว่าการควบคุมของปลั๊กอินนี้จะไม่เปรียบเทียบกับตัวเลือกที่มีให้จากปลั๊กอิน Easy Google Fonts หากคุณต้องการเปลี่ยนแบบอักษรที่ใช้โดยองค์ประกอบเฉพาะของธีมของคุณเป็นแบบอักษรแบบกำหนดเองที่คุณเลือก ใช้แบบอักษรใดก็ได้ งานอย่างดี
แบบอักษร Typekit สำหรับ WordPress
หากคุณต้องการใช้แบบอักษรพรีเมียมฟรีจากบริการ Adobe Typekit บนเว็บไซต์ WordPress ปลั๊กอิน Typekit Fonts สำหรับ WordPress ฟรีเหมาะสำหรับคุณ
ด้วยปลั๊กอินนี้ คุณสามารถใช้ตัวเลือกที่กำหนดไว้ล่วงหน้า หรือ เพิ่มกฎ CSS แบบกำหนดเองของคุณเอง เพื่อให้แน่ใจว่าส่วนใดของเว็บไซต์ของคุณที่คุณต้องการปรับแต่งด้วยแบบอักษร Typekit คุณสามารถทำได้ด้วยปลั๊กอินนี้
การเพิ่มแบบอักษรที่กำหนดเองให้กับ WordPress ด้วยมือ
หากด้วยเหตุผลใดก็ตาม แนวคิดในการใช้ปลั๊กอินฟรีข้างต้นไม่น่าสนใจ คุณสามารถเปลี่ยนแบบอักษรที่ใช้บนเว็บไซต์ WordPress ได้ด้วยตนเอง หากพบแบบอักษรที่คุณต้องการใช้ในที่เก็บ Google Fonts การเพิ่มลงในเว็บไซต์ของคุณนั้นง่ายมาก
สิ่งที่คุณต้องทำคือเลือกแบบอักษรบนเว็บไซต์ Google จากนั้นคัดลอกโค้ดที่เกี่ยวข้องลงในส่วนหัวและสไตล์ชีต CSS ของเว็บไซต์ของคุณ
อย่างไรก็ตาม หากแบบอักษรที่คุณเลือก ไม่ได้โฮสต์อยู่ในที่เก็บ เช่น Google Fonts ซึ่งคุณสามารถเชื่อมโยงไปยังแบบอักษรนั้นได้ คุณจะต้องโฮสต์แบบอักษรนั้นเอง การดำเนินการนี้จะเปลี่ยนกระบวนการเล็กน้อยและเพิ่มขั้นตอนพิเศษบางอย่าง เช่น การอัปโหลดแบบอักษรไปยังเซิร์ฟเวอร์ของคุณ
คุณสามารถอัปโหลดไฟล์ฟอนต์โดยใช้ซอฟต์แวร์ FTP หรือเครื่องมือจัดการไฟล์ในแผงควบคุมของโฮสต์เว็บของคุณ เป็นความคิดที่ดีที่จะ อัปโหลดแบบอักษรไปยังไดเร็กทอรีแบบอักษร เฉพาะ โดยเฉพาะในโฟลเดอร์ธีมลูกของคุณเพื่อช่วยจัดระเบียบสิ่งต่างๆ
เมื่อไฟล์ฟอนต์อยู่บนเซิร์ฟเวอร์ของคุณแล้ว ให้เปิดไฟล์สไตล์ชีต CSS ของธีมเพื่อทำการแก้ไข ซึ่งสามารถทำได้จากภายในแดชบอร์ดผู้ดูแลระบบ WordPress ของคุณ บนหน้าจอ ลักษณะที่ปรากฏ > ตัวแก้ไข
เมื่อคุณเพิ่ม CSS ด้านบนลงในสไตล์ชีตเพื่อโหลดฟอนต์แล้ว คุณสามารถใช้มันได้ทุกที่ในไฟล์ CSS นั้นเพื่อแก้ไขลักษณะที่ปรากฏของข้อความดังต่อไปนี้:
ด้วยเหตุผลด้านประสิทธิภาพ หากเป็นไปได้ คุณควรพยายามลิงก์ไปยังที่เก็บแบบอักษรภายนอก เช่น Google Fonts อย่างไรก็ตาม หากคุณไม่พบแบบอักษรที่ต้องการใช้ทางออนไลน์ คุณอาจต้องเสียสละความเร็วหน้าเว็บบางส่วนด้วยการโฮสต์ไฟล์ด้วยตนเอง
บทสรุป
หวังว่าตอนนี้คุณจะรู้ว่าจะหาแบบอักษรที่กำหนดเองได้จากที่ใด รวมถึงวิธีเริ่มเพิ่มแบบอักษรเหล่านี้ลงในไซต์ WordPress ของคุณ ด้วยการใช้ปลั๊กอินฟรีตัวใดตัวหนึ่ง เช่น Easy Google Fonts คุณสามารถเริ่มเปลี่ยนไม่เพียงแต่แบบอักษรที่ใช้ในเว็บไซต์ของคุณ แต่ยังรวม ถึงวิธีนำเสนอแบบอักษรเหล่านั้น ด้วย
ต้องขอบคุณเครื่องมือ WordPress Customizer ที่ทำให้คุณสามารถเปลี่ยนแปลงลักษณะที่ปรากฏของข้อความบนเว็บไซต์ของคุณได้อย่างง่ายดาย ทั้งหมดนี้เกิดขึ้นผ่านชุดเมนูภาพ พร้อมการแสดงตัวอย่างแบบสด
หากชุดรูปแบบปัจจุบันของคุณไม่สามารถควบคุมแบบอักษรที่จะใช้ในไซต์ของคุณได้มากนัก โดยใช้วิธีใดวิธีหนึ่งข้างต้น คุณก็จะมีวิธีที่ง่ายในการเปลี่ยนแปลงเหล่านั้น โดยไม่ต้องแก้ไข CSS พื้นฐานด้วยตนเอง
แบบอักษรที่คุณชื่นชอบคืออะไร? คุณต้องการเปลี่ยนแปลงการตั้งค่าตัวพิมพ์บนเว็บไซต์ของคุณอย่างไร หากคุณมีคำถามเกี่ยวกับฟอนต์ วิชาการพิมพ์ หรือ WordPress โดยทั่วไป โปรดแบ่งปันในความคิดเห็นด้านล่าง