วิธีเพิ่มแบบอักษรที่กำหนดเองลงในไซต์ WordPress ของคุณโดยใช้ Adobe Typekit
เผยแพร่แล้ว: 2022-09-15การเพิ่มแบบอักษรที่กำหนดเองลงในไซต์ WordPress ของคุณอาจเป็นวิธีที่ยอดเยี่ยมในการทำให้ไซต์ของคุณโดดเด่นกว่าใคร และทำให้ไซต์ของคุณมีรูปลักษณ์และความรู้สึกที่ไม่เหมือนใคร อย่างไรก็ตาม การค้นหาฟอนต์ที่ถูกต้องแล้วเพิ่มลงในไซต์ WordPress อาจเป็นเรื่องท้าทายเล็กน้อย วิธีหนึ่งที่นิยมในการเพิ่มแบบอักษรที่กำหนดเองไปยัง WordPress คือการใช้บริการ Typekit จาก Adobe Typekit เป็นบริการแบบสมัครสมาชิกที่ให้คุณเข้าถึงไลบรารีฟอนต์คุณภาพสูงที่คุณสามารถใช้บนเว็บไซต์ของคุณ ในการใช้แบบอักษร Typekit บนเว็บไซต์ WordPress คุณจะต้องสมัคร บัญชี Typekit แล้วติดตั้งปลั๊กอิน Typekit Fonts สำหรับ WordPress เมื่อคุณทำเสร็จแล้ว คุณจะสามารถเลือกแบบอักษรใดก็ได้จากไลบรารี Typekit และใช้งานบนไซต์ WordPress ของคุณ
Adobe Typekit เป็นบริการของ Adobe ที่อนุญาตให้ผู้ใช้สร้างแบบอักษรด้วยแบบอักษรที่ดีที่สุดในโลก คุณยังสามารถลองใช้แบบอักษรสองสามแบบได้ฟรีหากคุณสมัครใช้งานแพลตฟอร์มแบบสมัครสมาชิก แบบอักษรที่กำหนดเองสามารถช่วยให้คุณรักษาสไตล์ของธีม WordPress ของคุณได้ หากคุณใช้บริการสมัครรับข้อมูลเพื่อเข้าถึงแบบอักษร จะมีประโยชน์มาก Typekit ให้ผู้ใช้เข้าถึงแคตตาล็อกขนาดใหญ่ของตัวเลือกคุณภาพสูงได้โดยตรง เมื่อคุณลงชื่อสมัครใช้แล้ว คุณจะสามารถสร้างชุดแบบอักษรได้ เราจะพูดถึงวิธีการใช้ชุดเครื่องมือของคุณใน WordPress ในหัวข้อถัดไป
คุณสามารถเพิ่มแบบอักษร Typekit ลงใน WordPress ได้สองวิธี แบบอักษร Typekit เป็นวิธีที่ง่ายที่สุดในการใช้ปลั๊กอิน WordPress หากคุณไม่ต้องการติดตั้งปลั๊กอินบนไซต์ของคุณ คุณสามารถเพิ่ม แบบอักษร Typekit ด้วยตนเองได้ตลอดเวลา จำเป็นต้องมีขั้นตอนต่อไปนี้: คุณต้องแก้ไขไฟล์ header.php ของธีมที่ใช้งานอยู่ เลือกแบบอักษร TypeKit ที่คุณต้องการใช้ในไซต์ WordPress จากไฟล์ header.html หรือ style.html ของไซต์ ควรวางโค้ดฝังตัวสำหรับ Typekit ไว้ระหว่างกัน จากนั้นจึงบันทึก สามารถใช้ FTP เพื่อเข้าถึงไซต์ของคุณได้ Typekit เป็นตัวเลือกที่ยอดเยี่ยมสำหรับการจัดหาแบบอักษรคุณภาพสูงให้กับเว็บไซต์
ฉันจะเพิ่มแบบอักษรให้กับธีม Typekit Divi ได้อย่างไร

การเพิ่มแบบอักษรให้กับ Typekit นั้นง่ายมาก! เพียงไปที่ เว็บไซต์ Typekit เลือกแบบอักษรที่คุณต้องการใช้ แล้วคลิกปุ่ม "เพิ่มลงใน Kit" เมื่อคุณเพิ่มแบบอักษรลงในชุดแล้ว คุณสามารถใช้แบบอักษรเหล่านั้นในธีม Divi ได้โดยเลือกจากเมนูแบบเลื่อนลง "แบบอักษร" ใน Divi Builder
แบบอักษรที่กำหนดเองจะถูกเพิ่มลงในไซต์ Divi ของคุณในขั้นตอนทีละขั้นตอนนี้ มีขั้นตอนเล็กน้อยและง่ายมากที่เกี่ยวข้องกับการสร้างแบบอักษร แต่หลายคนกลัวเพราะเกี่ยวข้องกับการเข้ารหัสเพียงเล็กน้อย Google Fonts คือไฟล์ที่จัดเก็บไว้ในเซิร์ฟเวอร์ของ Google และคุณสามารถแตกไฟล์ได้โดยใช้โค้ด แบบอักษรอื่นๆ จะถูกดาวน์โหลดไปยังเซิร์ฟเวอร์ของคุณ จากนั้นคุณอัปโหลดไปยัง FTP คุณสามารถใช้ปลั๊กอิน TypeKit Fonts สำหรับ WordPress เพื่อส่งแบบอักษรที่กำหนดเองไปยัง Divi Builder ได้โดยตรง ไม่จำเป็นต้องมีความเชี่ยวชาญ CSS ในการใช้เทคโนโลยี หากต้องการดาวน์โหลดสำเนาของ Georgina.ttf หรือ.otf ให้ไปที่เว็บไซต์ทางการ
ไฟล์ The.wav สามารถถ่ายโอนไปยังเครื่องของคุณจากเว็บได้ แบบอักษรประเภทนี้สามารถดูได้ว่าเป็นการเลือกองค์ประกอบทั้งหมด เนื่องจากปัญหาความเข้ากันได้ จึงไม่แนะนำให้ใช้ปลั๊กอิน Use Any Font อีกต่อไป สร้างปลั๊กอิน WordPress โดยค้นหา "ใช้แบบอักษรใดก็ได้" ในส่วนปลั๊กอิน ปลั๊กอินสามารถเปิดใช้งานได้โดยการสร้างคีย์ API อัปโหลดและกำหนดแบบอักษร ควรกำหนดเมนู ส่วนหัว และเนื้อหาทั้งหมด หากคุณต้องการแบบอักษรที่กำหนดเอง ให้ค้นหาใน รายการแบบอักษรของ Google (เฉพาะในธีม)
เพียงอัปโหลดแบบอักษรไปยังเว็บไซต์ WordPress ของคุณ แบบอักษรก็จะเสร็จสิ้นโดยอัตโนมัติ ไปที่ตัวเลือกธีม Divi และป้อน รหัสแบบอักษร Google ของคุณ หลังจากนั้นให้บันทึกการเปลี่ยนแปลงและคุณพร้อมแล้ว
คลิกบันทึก 4. รีเฟรชหน้าของคุณ วิธีเปิดใช้งาน Adobe Fonts บนคอมพิวเตอร์ของคุณ
ในการเปิดใช้งานแบบอักษร Adobe คุณต้องเปิดใช้แบบอักษร Adobe ก่อน ในแอป Adobe Creative Cloud คุณสามารถเปลี่ยนแปลงการตั้งค่าได้ ตรวจสอบว่าได้เลือกช่องทำเครื่องหมาย Use Adobe fonts ภายใต้ General หลังจากคลิกตกลง คุณจะสามารถใช้การเปลี่ยนแปลงได้ หากคุณไม่ได้ใช้งาน Adobe Creative Cloud คุณสามารถลองทำสิ่งต่อไปนี้: มีอะไรที่ฉันสามารถช่วยคุณได้ เมื่อไปที่แดชบอร์ดของ WordPress คุณจะสามารถเข้าถึง Divi ได้ โค้ดต่อไปนี้สามารถใช้เชื่อมโยงโค้ดกับส่วนหัวได้ #link%27s https://Fonts.googleapis.com/css?family=Montserrat:400,700%27 rel%27stylesheet%27 หลังจากคลิกบันทึก คุณจะสามารถบันทึกไฟล์ได้ ตรวจสอบเพื่อดูว่าจำเป็นต้องรีเฟรชหน้าหรือไม่ คุณอาจต้องลองวิธีอื่นหากไม่ได้ผล ผลที่ได้คือธุรกิจที่ทำกำไร คลิกที่ส่วน ลิงก์ไปยังส่วนหัว และป้อนรหัสต่อไปนี้ *ลิงค์ = https://www.googleapis.com/browser/browser/browser/family/Montserrat:400,700 *type = text/browser

เพิ่มแบบอักษรให้กับ WordPress โดยไม่ต้องใช้ปลั๊กอิน
ลาก ไฟล์ฟอนต์ ที่คุณดาวน์โหลดมาลงในบานหน้าต่างด้านขวาล่างของ FileZilla เพื่อเริ่มกระบวนการติดตั้ง ตอนนี้คุณควรจะสามารถอัปโหลดไปยังเซิร์ฟเวอร์ได้แล้ว คุณไม่ต้องรอนานเพื่อดูมันในไดเร็กทอรีหากคุณทำอย่างรวดเร็ว
แบบอักษรเว็บไม่ได้ติดตั้งเป็นส่วนหนึ่งของธีม ขณะที่คุณเรียกดูหน้าเว็บ คุณจะสามารถดาวน์โหลดไปยังคอมพิวเตอร์ของคุณได้ หากคุณต้องการใช้ แบบอักษรเฉพาะ ให้คัดลอกและวางโค้ดลงในธีมของคุณ เมื่อคุณสลับระหว่างแบบอักษรต่างๆ พร้อมกัน เวลาในการโหลดสำหรับแต่ละแบบอักษรจะแสดงขึ้น หากต้องการปรับแต่งหรือเพิ่ม CSS ใหม่ในบล็อก WordPress ให้ไปที่แดชบอร์ด คุณสามารถคัดลอกรหัสสำหรับข้อความเนื้อหาจากช่องสีเทา 1 แบบอักษรเว็บแบบอักษรใหม่จะอยู่ในกล่องสีเทาที่สองของไลบรารีแบบอักษร Google ของคุณ โค้ดต่อไปนี้สามารถใช้ปรับขนาดและน้ำหนักของฟอนต์ได้
แบบอักษรถูกเก็บไว้ใน WordPress ที่ไหน?
หากคุณต้องการแก้ไขไฟล์ธีมของคุณ ให้ไปที่ไดเร็กทอรี public_html/WP-content/themes และคัดลอกไปที่โฟลเดอร์ของธีมของคุณ ในกรณีนั้น WordPress จะนำเข้า ตัวเลือกแบบอักษร Google ที่คุณเลือก
วิธีเปลี่ยนแบบอักษรบนเว็บไซต์ของคุณ
หากต้องการเปลี่ยนแบบอักษรสำหรับย่อหน้าเดียว ให้เลือกจากเมนูแบบเลื่อนลง "แบบอักษร" คุณสามารถเปลี่ยนแบบอักษรสำหรับทั้งไซต์ได้โดยเลือก "ทั่วทั้งไซต์" จากเมนูแบบเลื่อนลง
หากต้องการดูผลกระทบของการเปลี่ยนแปลงของคุณ ให้กดปุ่ม "ดูตัวอย่าง" คุณสามารถใช้ตัวเลือก "ดูตัวอย่างสด" เพื่อดูการเปลี่ยนแปลงแบบเรียลไทม์เพื่อดูตัวอย่างได้
คุณต้องคลิกปุ่ม "ใช้" เพื่อเริ่มใช้การเปลี่ยนแปลงของคุณ
Adobe Typekit Css
Adobe Typekit เป็นบริการสมัครสมาชิกที่ให้การเข้าถึงไลบรารีฟอนต์คุณภาพสูงเพื่อใช้บนเว็บไซต์ของคุณ แบบอักษรมีทั้งแบบน้ำหนักปกติและแบบหนา และสามารถใช้ได้หลายวิธี รวมถึงใน CSS ของเว็บไซต์ของคุณ
แบบอักษร Adobe พร้อมใช้งานแล้วจากการได้มาของ TypeKit ไลบรารีฟอนต์แบบสมบูรณ์พร้อมให้ใช้งานแล้วสำหรับแผน Creative Cloud หมวดหมู่นี้มีทั้งแผนแอปเดี่ยวและแผนการถ่ายภาพ แม้ว่าคุณจะไม่ได้ชำระเงิน คุณยังสามารถใช้คอลเลกชันแบบอักษรพื้นฐานได้ฟรีด้วย Adobe ID ด้วยการออกแบบเว็บไซต์ฟอนต์ Adobe ใหม่ ทำให้ตอนนี้การใช้ฟอนต์ทั้งหมดที่คุณต้องการง่ายกว่าที่เคย ด้วยการเปิดใช้งานขั้นตอนเดียว แอปทั้งหมดของคุณสามารถมีแบบอักษรบนคลาวด์ได้ทันทีที่คุณเปิดแอปพลิเคชัน Creative Cloud บนเดสก์ท็อป เมื่อพูดถึงการออกแบบส่วนต่อประสานกับผู้ใช้ อินเทอร์เฟซแบบเก่ามีความแออัดมากกว่าที่ควรจะเป็น ด้วยการออกแบบใหม่นี้ คุณจึงไม่ต้องดำเนินการใดๆ อีกต่อไปในการรับแบบอักษรบนเว็บไซต์ของคุณ
Typekit เป็น Adobe Fonts แล้ว
Adobe Fonts เป็นชื่อของฟอนต์ที่มาพร้อมกับ Typekit การทำเช่นนี้ Adobe Creative Cloud จะสอดคล้องกับ ตัวเลือกแบบอักษร มากขึ้น หากต้องการใช้แบบอักษร Typekit ต่อไป คุณต้องสมัครใช้งาน Creative Cloud ซึ่งคุณรับได้โดยคลิกที่นี่
วิธีเพิ่ม Adobe Fonts ให้กับ WordPress
คลิก เพิ่มใหม่: ค้นหา “แบบอักษร Adobe แบบกำหนดเอง” คลิก ติดตั้ง จากนั้นเปิดใช้งานปลั๊กอิน: บนแดชบอร์ดในแถบด้านข้างทางซ้าย ให้คลิก ลักษณะที่ปรากฏ จากนั้นเลือก Adobe Fonts: สร้าง Adobe Web Project และ
1stWebDesigner สาธิตวิธีการนำเข้าแบบอักษร Google และ Adobe ลงใน WordPress ปลั๊กอิน WordPress เป็นวิธีแรกในการโหลดแบบอักษร Google หรือแบบอักษร Adobe คุณสามารถอัปโหลดฟอนต์ที่คุณเลือกหลังจากติดตั้ง ซึ่งจะถูกเพิ่มโดยอัตโนมัติไปยังตัวสร้างเพจที่คุณเลือก ขณะนี้เราใช้แบบอักษร Google เป็นตัวเลือกที่สามสำหรับการสร้างแบบอักษรที่กำหนดเองสำหรับ WordPress ตัวปรับแต่ง WordPress ของปลั๊กอินนี้รวมเข้ากับมัน ทำให้คุณสามารถดูแบบอักษรของคุณได้แบบเรียลไทม์จากภายในเครื่องมือแก้ไข อีกวิธีหนึ่ง คุณสามารถจัดคิว ฟอนต์ใหม่ ของคุณโดยใช้ไฟล์ functions.php ของธีมของคุณ การใช้ Typekit (TypeKit) ขอแนะนำให้อัปเดตฟอนต์ Adobe (TypeKit) ด้วยตนเอง
คุณสามารถรับแบบอักษร Typekit ได้ฟรีหากคุณสมัครใช้งาน Creative Cloud เป็นสิ่งสำคัญที่คุณต้องทำตามขั้นตอนที่จำเป็นเพื่อสร้างแบบอักษรที่กำหนดเองสำหรับเว็บไซต์ของคุณ ความล้มเหลวในการติดตั้งหรือโหลดแบบอักษรอาจทำให้เว็บไซต์ของคุณใช้เวลาในการโหลดนานขึ้นและอาจส่งผลให้ฟังก์ชันการทำงานไม่ดี คำแนะนำในที่นี้จะช่วยคุณในการเตรียมแบบอักษรอย่างเหมาะสม เนื้อหาของโพสต์นี้อยู่ภายใต้ลิงค์พันธมิตร ส่วนการเปิดเผยลิงก์ของเว็บไซต์ของเราจะแจ้งให้คุณทราบเกี่ยวกับลิงก์ในเครือ
ฉันจะเพิ่ม Adobe Fonts ได้อย่างไร
ดับเบิลคลิกที่ "คอมพิวเตอร์ของฉัน" จากนั้นจากเมนู "แผงควบคุม" เลือก "แบบอักษร" เลือกเมนูไฟล์จากหน้าต่างไฟล์ จากนั้นเลือก "ติดตั้งแบบอักษรใหม่" ฟอนต์ที่คุณต้องการติดตั้งสามารถพบได้ในโฟลเดอร์ที่มีไฟล์ส่วนใหญ่