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

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

บทความนี้นั่งบนโต๊ะของฉันมาระยะหนึ่งแล้ว และฉันต้องการแบ่งปันกับคุณ ฟอนต์ Google ถูกโหลดเต็มในเครื่อง ฉันใช้แบบอักษร Google Oswald และ Lato จาก Crunchify.com มาจนถึงตอนนี้ เพียงเปิด URL ในภาพด้านบนที่ปรากฏในแท็บใหม่ คุณจะสังเกตเห็นว่าได้สร้าง แบบอักษรใหม่ 14 แบบ บทช่วยสอนนี้จะช่วยได้เช่นกันหากคุณมีคำถามใดๆ ต่อไปนี้ เมื่อคุณแตกไฟล์ Lato.zip แล้ว คุณจะสามารถเห็นนามสกุลฟอนต์ with.ttf ทั้งสิบของ Lato ในเว็บไซต์ส่วนใหญ่ คุณจะต้องใช้แบบอักษรปกติ ตัวหนา และตัวเอียงเท่านั้น

ในขั้นตอนที่ 2 คุณต้องแปลงแบบอักษรของคุณเป็นรูปแบบ woff2, eot,svg, ttf และ wof สามารถอัปโหลดไฟล์ไปยัง เว็บไซต์ https://Font-Converter.net/en ที่จะแปลงแบบอักษรเป็นรูปแบบเหล่านี้ ไม่มีอะไรต้องพูดอีก คุณสามารถโหลดแบบอักษรจากระบบไฟล์ในเครื่องได้แล้ว

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

คุณสามารถเพิ่มแบบอักษรที่กำหนดเองให้กับธีม WordPress ได้หลายวิธี วิธีหนึ่งคือการใช้ไลบรารี Google Fonts คุณสามารถค้นหารายการแบบอักษรทั้งหมดที่มีได้ในเว็บไซต์ Google Fonts เมื่อคุณพบแบบอักษรที่ต้องการแล้ว คุณสามารถเพิ่มโค้ดลงในสไตล์ชีตของธีมได้ (style.css) ตัวอย่างเช่น หากคุณต้องการใช้แบบอักษร "Open Sans" คุณจะต้องเพิ่มโค้ดต่อไปนี้ในสไตล์ชีตของคุณ: body { font-family: 'Open Sans', sans-serif; } อีกวิธีในการเพิ่มแบบอักษรที่กำหนดเองให้กับธีม WordPress ของคุณคือการใช้ปลั๊กอิน เช่น Easy Google Fonts ปลั๊กอินนี้ทำให้ง่ายต่อการเพิ่มแบบอักษรที่กำหนดเองให้กับธีมของคุณโดยไม่ต้องแก้ไขโค้ดใดๆ

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

ติดตั้งปลั๊กอิน Custom Adobe Fonts เพื่อให้ง่ายต่อการรวมแบบอักษรเหล่านี้ในไซต์ WordPress ของคุณ ติดตั้งปลั๊กอิน จากนั้นไปที่ไลบรารีแบบอักษรขนาดใหญ่ของ Adobe เพื่อค้นหาแบบอักษรที่เหมาะกับคุณ (คุณต้องลงทะเบียนเพื่อใช้งาน) หลังจากที่คุณเลือกแบบอักษรแล้ว ให้คลิกที่แบบอักษรนั้นแล้วมองหา 'เพิ่มไปยังโครงการเว็บ' ที่มุมบนขวาของหน้า เมื่อใช้การจับคู่แบบอักษร คุณจะเห็นว่าชุดแบบอักษรของคุณมีหน้าตาเป็นอย่างไร และคุณสามารถผสมและจับคู่แบบอักษรตามสิ่งที่คุณเห็นได้ มีเว็บไซต์ที่ยอดเยี่ยมหลายแห่งที่ขายฟอนต์แบบกำหนดเองที่ผู้ออกแบบสร้างขึ้นเอง ไลบรารีฟอนต์ขนาดใหญ่รวมอยู่ในฟอนต์ Squirrel และง่ายต่อการใช้งาน คุณสามารถใช้ชุดแบบอักษรเว็บของ @ Font-Face

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

วิธีโหลด Google Fonts ใน WordPress

ไปที่แผงผู้ดูแลระบบ WordPress แล้วเลือกเพิ่มใหม่ ดาวน์โหลดและติดตั้ง Easy Google Fonts จาก Google Play Store หลังจากติดตั้งปลั๊กอินแล้ว คุณต้องคลิกปุ่มเปิดใช้งานเพื่อเริ่มใช้งาน

บนเว็บไซต์หรือผลิตภัณฑ์ดิจิทัลของคุณ คุณสามารถใช้ Google Fonts เพื่อทดลองใช้แบบอักษรต่างๆ กว่า 1,000 ตระกูล หากคุณต้องการเพิ่มแบบอักษร Google ลงในไซต์ WordPress ด้วยตนเอง มีหลายตัวเลือก พวกมันฟรีและโอเพ่นซอร์ส ดังนั้นนักพัฒนาจึงสามารถใช้ได้ วิธีที่สะดวกที่สุดในการผสานรวมแบบอักษรของ Google คือการรวมข้อมูลโค้ดที่มี URL ไปยังตระกูลแบบอักษรเฉพาะในไฟล์ functions.php ของคุณ หากคุณพบว่ากระบวนการแบบแมนนวลนั้นยาก คุณสามารถใช้ปลั๊กอินได้ คุณสามารถติดตั้งปลั๊กอินก่อนได้โดยไปที่ที่เก็บปลั๊กอินของ WordPress ตอนนี้จะต้องติดตั้งและเปิดใช้งาน

ธีม WordPress ส่วนใหญ่มีการรวมแบบอักษรของ Google ซึ่งเป็นส่วนหนึ่งของการตั้งค่าเริ่มต้น ปลั๊กอินที่ประกอบเป็นแพลตฟอร์ม OMGF ช่วยให้คุณสามารถเรียกดูแบบอักษรได้มากกว่า 600 แบบบนเว็บไซต์ของคุณ ในเมนูดรอปดาวน์ 'Font Family' คุณสามารถเลือกจากกว่า 100 ประเภทสำหรับส่วนต่างๆ ของไซต์ของคุณ มีหลายตัวเลือกสำหรับการเพิ่มการ ควบคุมแบบอักษรที่กำหนดเอง ดังที่แสดงในตัวอย่างเครื่องมือปรับแต่ง

ฉันควรโหลด Google Fonts ในเครื่อง WordPress หรือไม่

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

Wp-เนื้อหา/ธีม/ธีมของคุณ/แบบอักษร

โฟลเดอร์ wp-content/themes/your-theme/fonts เป็นที่ที่คุณสามารถจัดเก็บแบบอักษรที่กำหนดเองใดๆ ที่คุณต้องการใช้กับธีมของคุณ คุณสามารถเพิ่มแบบอักษรลงในโฟลเดอร์นี้ผ่าน FTP หรือโดยใช้ปลั๊กอินตัวจัดการไฟล์ เมื่อเพิ่มแบบอักษรลงในโฟลเดอร์นี้แล้ว จะสามารถใช้แบบอักษรเหล่านี้ใน CSS ของธีมได้โดยอ้างอิงชื่อแบบอักษร

สามารถใช้ Global Styles เพื่อเปลี่ยนแบบอักษรของเว็บไซต์ของคุณได้หากใช้ธีมใดธีมหนึ่งต่อไปนี้ ในกรณีนี้ ฟอนต์ฐานและหัวเรื่องจะอยู่ในฟอนต์คู่เดียวกัน หากต้องการบันทึกการจับคู่แบบอักษรใหม่ ให้คลิกปุ่มเผยแพร่ในเมนูสไตล์ร่วม หรือคลิกรีเซ็ตเพื่อย้อนกลับการเปลี่ยนแปลง หลังจากที่คุณเลือกฟอนต์แบบกำหนดเองที่เหมาะสมแล้ว คุณสามารถเปลี่ยนได้บ่อยเท่าที่คุณต้องการ หากคุณต้องการเปลี่ยนขนาดของแบบอักษรส่วนหัวหรือแบบอักษรพื้นฐาน คุณสามารถทำได้โดยเลือกตัวเลือกขนาดด้านล่างและทางด้านขวาของแต่ละแบบอักษร จากนั้นเลือกขนาดจากเมนูแบบเลื่อนลง ด้วย CSS ที่กำหนดเอง คุณสามารถเปลี่ยนขนาดฟอนต์เริ่มต้นส่วนกลางได้ ตรวจสอบให้แน่ใจว่าคุณปิดใช้งานหรือลบปลั๊กอิน หากคุณตัดสินใจที่จะหยุดใช้งานหลังจากทดสอบ ไม่สามารถเชื่อมโยงบัญชี Typekit.com กับบล็อกหรือเว็บไซต์ WordPress.com หากคุณต้องการทดสอบความเข้ากันได้ของฟอนต์เฉพาะกับภาษาที่กำหนด ให้ใช้ Customizer

เพิ่มแบบอักษรให้กับ WordPress โดยไม่ต้องใช้ปลั๊กอิน

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

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