วิธีใช้แบบอักษรที่ดาวน์โหลดใน WordPress โดยไม่ต้องใช้ปลั๊กอิน

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

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

ตอนนี้ ฉันต้องการชี้ให้เห็นว่าคุณสามารถทำได้ผ่านปลั๊กอิน มีกำมือที่มีอยู่ใน repo แต่ทำไมเราถึงต้องการทำเช่นนั้น? ฉันเป็นคนประเภทที่ชอบหลีกเลี่ยงการใช้ปลั๊กอินเมื่อโค้ดสองสามบรรทัดจะทำแบบเดียวกัน ปลั๊กอินที่มากเกินไปทำให้เกิดการล้นจำนวนมาก คำขอ HTTP ที่ไม่จำเป็น และทำให้ไซต์ของคุณช้าลง

ดังนั้น เราจะนำเข้าแบบอักษรเหล่านี้ด้วยมือ เหมือนเป็นช่วงปลายยุค 90 อีกครั้ง อร๊ายยย.

การเลือกและดาวน์โหลดแบบอักษร

ฉันเป็นแฟนตัวยงของการปัดเศษแบบอักษร ธีมที่หรูหรามีมากมายที่คุณสามารถสแกนเพื่อดูว่าคุณชอบอะไร ลองตีสิ่งเหล่านี้และดูว่าคุณชอบอะไร

• แบบอักษรลายมือ
• แบบอักษรย้อนยุค
• แบบอักษรหรู
• แบบอักษรเล่นหาง
• แบบอักษรฮิปสเตอร์
• ฟอนต์สนุกๆ

สำหรับฉัน ฉันจะใช้แบบอักษร Aventura จากการปัดเศษของ Hipster

ขั้นตอนแรกของคุณคือค้นหาลิงก์ดาวน์โหลดสำหรับแบบอักษรและบันทึกไฟล์ลงในคอมพิวเตอร์ของคุณ น่าจะเป็นไฟล์ .zip ที่มีรูปแบบไฟล์ต่างๆ ไฟล์ทั่วไปที่คุณจะพบคือ .ttf (ฟอนต์ TrueType) หรือ . otf (ฟอนต์ OpenType)

การสร้าง Webfont (เป็นทางเลือก แต่ไม่ใช่จริงๆ)

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

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

FontSquirrel นั้นยอดเยี่ยมมากที่มี CSS ที่จำเป็นในการนำเข้าไปยังเว็บไซต์ของคุณ เป็นมิตรกับผู้ใช้อย่างไร? คุณเพียงแค่คัดลอกและวาง (ซึ่งเราจัดการด้านล่าง)

การอัปโหลดแบบอักษรของคุณไปยัง WordPress

เมื่อเสร็จแล้ว คุณจะต้องอัปโหลดแบบอักษรไปยังผู้ให้บริการโฮสต์ของคุณ ฉันทำสิ่งนี้ผ่าน FTP เสมอ (ฉันใช้ FileZilla แต่คุณสามารถใช้ไคลเอนต์ใดก็ได้ที่คุณต้องการ)

หากคุณไม่ทราบข้อมูล FTP ของโฮสต์ ให้ไปที่ cPanel และดูที่ Files -> FTP Accounts

คุณจะเห็นทุกบัญชี FTP สำหรับโฮสต์ที่นั่น และคุณควรเห็นลิงก์ Configure FTP Client ข้างๆ แต่ละบัญชี

เมื่อคุณเข้าไปที่นั่น cPanel จะให้ข้อมูลเซิร์ฟเวอร์หรือไฟล์ FileZilla (และอื่น ๆ ) ที่คุณสามารถนำเข้าเพื่อรับชุดข้อมูลรับรองของคุณ ฉันไปสำหรับคู่มือเป็นการส่วนตัว แต่คุณทำในสิ่งที่คุณชอบ แม้ว่าคุณจะใช้ไฟล์ คุณจะต้องใช้รหัสผ่านเพื่อเข้าสู่ระบบ ดังนั้นทั้งสองวิธีจึงปลอดภัย

เมื่อคุณเข้าสู่ระบบโฮสต์ผ่าน FTP แล้ว ให้ไปที่โฟลเดอร์ /wp-content สำหรับไซต์ของคุณ เนื่องจากนี่คือเนื้อหาสำหรับไซต์ WordPress ของคุณ ทำไมคุณไม่ใส่มันลงไปล่ะ วางได้ทุกที่แม้ใน /wp-content/uploads คุณทำคุณ

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

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

การใช้แบบอักษรของคุณด้วย CSS

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

ไปที่ไดเร็กทอรีของธีมลูกของคุณ (คุณกำลังใช้ธีมลูกใช่ไหม) ในไคลเอนต์ FTP ของคุณและค้นหา ไฟล์ style.css คลิกขวาและเลือก View/Edit เพื่อเรียกใช้ในโปรแกรมแก้ไขข้อความเริ่มต้นของคุณ

หากคุณไม่มีธีมย่อย ให้ใช้ Orbisius Child Theme Creator เพื่อสร้างธีมแบบด่วนพิเศษ คุณสามารถลบปลั๊กอินได้ในภายหลัง ฉันรักสิ่งนี้

@font-face

รหัสที่เราใช้มาจาก FontSquirrel โดยตรง (คุณสามารถเขียนเองหรือคัดลอก/วางตัวอย่างด้านล่าง) และทั้งหมดที่ฉันเปลี่ยนคือเส้นทางการอัปโหลด URL เพื่อรวม /wp-content อย่างอื่นเป็นสิ่งที่ตัวสร้างเว็บฟอนต์มีให้

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

หากไม่มี @font-face หากคุณพยายามเรียก font-family: 'aventurabold'; โดย CSS เว็บไซต์ของคุณจะไม่พบมันเพราะไม่เคยบอกว่าคุณเก็บไว้ที่ไหน

@font-face {
    font-family: 'aventurabold';
    src: url('/wp-content/aventura-bold-webfont.eot');
    src: url('/wp-content/aventura-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/aventura-bold-webfont.woff2') format('woff2'),
         url('/wp-content/aventura-bold-webfont.woff') format('woff'),
         url('/wp-content/aventura-bold-webfont.ttf') format('truetype'),
         url('/wp-content/aventura-bold-webfont.svg#aventurabold') format('svg');
    font-weight: normal;
    font-style: normal;

}

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

ตอนนี้สิ่งที่คุณต้องทำคือเข้าไปที่ custom.css ของคุณ (หรือถ้าคุณใช้ Divi, Divi -> ตัวเลือกธีม -> CSS ที่กำหนดเอง ในบานหน้าต่างนำทางของแดชบอร์ด WP)

คุณเพียงแค่เพิ่มสไตล์ CSS เช่นเดียวกับที่คุณทำกับแบบอักษรอื่นๆ ฉันเพียงแค่แทนที่ 'Roboto' และ 'Exo' Google Fonts ที่ฉันใช้กับ 'aventurabold' และสิ่งต่าง ๆ ก็ดีไป (ขอบคุณการนำเข้า @ font-face ด้านบน)

body {
    font-family: "aventurabold", arial, sans-serif;
    font-size: 18px;
    line-height: 28px;
    color: #ffffff;
    text-transform: uppercase;
}

h1, h2, h3, h4, h5, h6 {
    color:  #fff;
    font-family: 'aventurabold', sans-serif;
    font-weight: 700;
   text-transform: uppercase;
}

ผลของแรงงานของเรา

นี่คือสิ่งที่ดูเหมือนก่อนหน้านี้:

และนี่คือสิ่งที่เกิดขึ้นหลังจากที่ฉันเพิ่ม Aventura ลงใน CSS:

ไชโย! มันได้ผล! ทำได้ดีมาก! ไปกันเถอะ!

ดูดีนะเพื่อน

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

และนั่น เพื่อนของฉัน ทำให้คุณแข็งแกร่งขึ้นจริงๆ

แล้วฟอนต์ไหนที่คุณชอบที่สุดที่จะใช้บนเว็บที่ไม่ใช่ Google Font? บอกฉันในความคิดเห็น!

ภาพขนาดย่อของบทความโดย 32 Pixels / shutterstock.com