วิธีเพิ่มแบบอักษรที่กำหนดเองลงในเว็บไซต์ WordPress

คุณต้องการเรียนรู้วิธีเพิ่มแบบอักษรที่กำหนดเองให้กับเว็บไซต์ WordPress หรือไม่?

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

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

และที่นี่มีคำถามสองข้อเกิดขึ้น: จะรับแบบอักษรที่กำหนดเองได้ที่ไหน สำหรับ WordPress และ วิธีการติดตั้งฟอนต์แบบกำหนดเอง บนเว็บไซต์ของคุณ

ลองหา

เหตุใดฉันจึงควรใช้แบบอักษรที่กำหนดเอง

ไปเป็นวันที่ Times New Roman และ Georgia ถูกมองว่าเป็นแบบอักษรเดียวสำหรับข้อความบนเว็บไซต์ ในช่วงไม่กี่ปีที่ผ่านมา พื้นที่แบบอักษรได้เปลี่ยนแปลงไปอย่างสิ้นเชิงกับการถือกำเนิดของแบบอักษรต่างๆ เช่น Google แบบอักษร และคนอื่น ๆ

ปัจจุบันมีฟอนต์ฟรี ข้อมูลและสื่อการฝึกอบรมและทรัพยากรการออกแบบฟรีหลายร้อยรายการบนอินเทอร์เน็ต ต่างจาก Adobe Illustrator, Photoshop และแอพคลาสสิคอื่นๆ WordPress ไม่ได้ให้คุณควบคุมฟอนต์เริ่มต้นได้อย่างสมบูรณ์ เฉพาะบางธีมของ WordPress เท่านั้นที่เลือกที่จะสนับสนุนและใช้แบบอักษรที่กำหนดเอง

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

ความสำคัญของการใช้แบบอักษรที่กำหนดเอง

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

มากขึ้นอยู่กับการสร้างแบบอักษร ในระดับจิตสำนึกและจิตใต้สำนึก – ทุกคนประเมินเนื้อหาของหน้าเว็บด้วยการออกแบบ

การออกแบบตัวอักษรส่งผลต่อผู้อ่าน แม้จะไม่สนใจก็ตาม. ล้มเลิกการออกแบบฟอนต์หมายถึงเลิกพัฒนาตัวเอง! อารมณ์ของผู้อ่านขึ้นอยู่กับมัน แบบอักษรทำให้อ่านง่ายขึ้นหรือบังคับให้ผู้ใช้ออกจากหน้า

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

ทางเลือกของ Google Fonts

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

นี่คือบางส่วน แหล่งข้อมูลอื่น ๆ สำหรับการค้นหาแบบอักษร สำหรับการใช้งานฟรีและเชิงพาณิชย์:

1. เทมเพลทมอนสเตอร์ — บนเว็บไซต์ TemplateMonster คุณจะพบทุกสิ่งที่คุณต้องการสำหรับการออกแบบเว็บ นอกจากนี้ยังมีฟอนต์และฟอนต์แพ็กมากมายสำหรับใช้ส่วนตัวในราคาประหยัด นอกจากนี้ เพื่อช่วยให้คุณเลือกแบบอักษรทั้งหมดที่นำเสนอบนโบรชัวร์หรือเฟรม แบบอักษรแต่ละแบบมีใบอนุญาตการค้าด้วย
2. MyFonts — ปัจจุบัน MyFonts มีแบบอักษรให้เลือกมากมายที่สุดในโลก อย่างไรก็ตาม ราคาที่นี่ก็อยู่ในส่วนบนเช่นกัน ดังนั้นหากคุณมีงบจำกัด วิธีนี้อาจไม่เหมาะกับคุณ
3. ฟอนต์สปริง — Fontspring จำหน่ายฟอนต์แปลกใหม่สำหรับใช้ในเชิงพาณิชย์ แต่ในเกือบทุกครอบครัว สามารถใช้แบบอักษรฟรี 1-2 แบบเพื่อวัตถุประสงค์ส่วนตัวได้ นอกจากนี้ยังมีส่วนแยกต่างหากที่มีแบบอักษรฟรี คอลเลกชันมีชีวิตชีวา แต่คุณจะต้องศึกษาข้อมูลใบอนุญาตสำหรับแบบอักษรใดแบบอักษรหนึ่งอย่างละเอียดก่อนดาวน์โหลด
4. ฟอนต์ — มันเป็นคอลเล็กชั่นฟอนต์ต่างๆ มากมาย เลือกอันใดอันหนึ่งแล้วคุณจะเห็นหน้าที่มีข้อมูลโดยละเอียดเกี่ยวกับเรื่องนี้ มีแบบอักษรฟรีมากมายและแบ่งออกเป็นแต่ละส่วน ระบบการเรียงลำดับบน CufonFonts ค่อนข้างยืดหยุ่นและสะดวกสบาย รวมถึงการสนับสนุน Webfont
5. Dafont — คอลเลกชันแบบอักษรฟรีอีก 3 แบบที่สามารถเข้าถึงได้ ส่วนใหญ่ได้รับการออกแบบสำหรับใช้ส่วนตัวเท่านั้น คุณลักษณะ DaFont ที่ยอดเยี่ยมคือระบบหมวดหมู่ คุณสามารถเลือกแบบอักษรในสไตล์การ์ตูน วิดีโอเกม วินเทจ ฯลฯ….

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

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

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

มีหลายวิธีในการเพิ่มแบบอักษรให้กับเว็บไซต์ WordPress:

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

ตัวเลือก 1 – เปลี่ยนแบบอักษร WordPress ด้วยปลั๊กอิน

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

คุณสมบัติของปลั๊กอินแบบอักษรที่กำหนดเอง

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

ต่อไปนี้คือบางประเด็นที่ควรพิจารณา:

• ความสามารถในการใช้แบบอักษรที่กำหนดเอง
• ความสามารถในการใช้แบบอักษรหลายแบบ
• ส่วนหัวและส่วนประกอบเป้าหมาย
• โบนัส: ความสามารถในการเปลี่ยนการตั้งค่าแบบอักษรจากโปรแกรมแก้ไขภาพ

นั่นคือทั้งหมดที่ ลักษณะแรกในรายการมีความสำคัญมาก คุณยังคงสามารถดาวน์โหลดแบบอักษรจากเว็บไซต์ต่างๆ เช่น DaFont, Font Squirrel เป็นต้น แต่คุณต้องสามารถอัปโหลดแบบอักษรเหล่านั้นไปยัง WordPress ได้

มาดูปลั๊กอินบางตัวสำหรับ WordPress ที่อนุญาตให้คุณอัปโหลดแบบอักษรที่กำหนดเองได้

1 แบบอักษรที่ดีกว่า

ปลั๊กอิน WordPress นี้จะช่วยให้ผู้ใช้สามารถรวมแบบอักษร Better Font Awesome รุ่นล่าสุดเข้ากับ CSSรหัสย่อและอีกมากมาย นอกจากนี้ปลั๊กอิน WordPress นี้ได้รับการปรับปรุงโดยอัตโนมัติ

คุณจะพบว่ามีคุณสมบัติ: การอัปเดตปกติตัวสร้างรหัสย่อความเข้ากันได้กับปลั๊กอิน WordPress อื่น ๆ ฯลฯ ...

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

2 Google แบบอักษรสำหรับ WordPress

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

นอกจากนี้คุณจะสามารถบันทึกและแก้ไขในส่วนหน้าเมื่อคุณพบชุดค่าผสมที่คุณจะเพลิดเพลิน

คุณสมบัติของมันรวมถึง: ตัวอย่างเรียลไทม์, a SEO ค่อนข้างสูงรองรับหลายภาษารองรับ 870 + Google แบบอักษรเพิ่มเติมอัปเดตง่ายและอีกมากมาย

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

ปลั๊กอิน 3.Fonts

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

หากต้องการปรับแต่งรูปแบบตัวอักษรของเว็บไซต์ของคุณ เช่น ขนาดตัวอักษร การเว้นวรรคตัวอักษร และความสูงของบรรทัด คุณสามารถอัปเกรดเป็นเวอร์ชันพรีเมียมได้ ปลั๊กอินแบบอักษร Pro.ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

4 Google แบบอักษรง่าย ๆ

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

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

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

ตัวเลือก 2 – ติดตั้ง WordPress Custom Fonts ด้วยตนเอง

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

ผลประโยชน์:

• ขอบคุณ CSS คุณสามารถเชื่อมต่อแบบอักษรของรูปแบบใดก็ได้: ttf, otf, woff, svg
• ไฟล์ฟอนต์จะอยู่บนเซิร์ฟเวอร์ของคุณ – คุณจะไม่ต้องพึ่งพาบริการของบุคคลที่สาม

ข้อเสีย :

• สำหรับการเชื่อมต่อแบบอักษรที่ถูกต้องสำหรับแต่ละสไตล์ คุณต้องลงทะเบียนรหัสแยกต่างหาก
• หากไม่รู้ CSS คุณอาจสับสนได้ง่าย

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

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

ขั้นตอนที่ 1: สร้างโฟลเดอร์ "แบบอักษร"

ในธีมลูกของคุณ ให้สร้างโฟลเดอร์ "แบบอักษร" ใหม่ภายใต้: wp-content/themes/your-child-theme/fonts

ขั้นที่ 2. อัพโหลดไฟล์ฟอนต์ที่ดาวน์โหลดไปยังเว็บไซต์ของคุณ

ซึ่งสามารถทำได้ผ่านแผงควบคุมโฮสติ้งหรือผ่าน FTP

เพิ่มไฟล์ฟอนต์ทั้งหมดไปยังโฟลเดอร์ฟอนต์ที่เพิ่มใหม่: wp-content/themes/ ในธีมลูกของคุณ ให้สร้างโฟลเดอร์ "ฟอนต์" ใหม่ภายใต้: wp-content/themes/your-child-theme/fonts ที่คุณสร้างขึ้น

ขั้นตอนที่ 3 นำเข้าแบบอักษรผ่านสไตล์ชีตธีมลูก

เปิดไฟล์ style.css ของธีมลูกของคุณและเพิ่มโค้ดต่อไปนี้ที่จุดเริ่มต้นของไฟล์ CSS (หลังจากความคิดเห็นเกี่ยวกับธีมลูก):

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont.eot');
src: url('fonts/WebFont.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont.woff') format('woff'),
url('fonts/WebFont.ttf') format('truetype'),
url('fonts/WebFont.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: normal;
}

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

เนื่องจากเราเชื่อมต่อรูปแบบปกติก่อน เราจึงตั้งค่าคุณสมบัติน้ำหนักแบบอักษรและลักษณะแบบอักษรให้เป็นปกติ

ขั้นตอนที่ 4 เมื่อเพิ่ม ตัวเอียง, เขียนสิ่งต่อไปนี้:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic.eot');
src: url('fonts/WebFont-Italic.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic.woff') format('woff'),
url('fonts/WebFont-Italic.ttf') format('truetype'),
url('fonts/WebFont-Italic.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: italic;
}

เมื่อทุกอย่างเหมือนกัน เราเป็นคนเดียวที่แนบคุณสมบัติลักษณะแบบอักษรกับตัวเอียง

ขั้นตอนที่ 5. ในการเพิ่มฟอนต์ตัวหนา ให้เพิ่มรหัสต่อไปนี้:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Bold.eot');
src: url('fonts/WebFont-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Bold.woff') format('woff'),
url('fonts/WebFont-Bold.ttf') format('truetype'),
url('fonts/WebFont-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: normal;
}

โดยเราตั้งค่าคุณสมบัติ font-weight เป็นตัวหนา

อย่าลืมระบุตำแหน่งที่ถูกต้องของไฟล์ฟอนต์สำหรับแต่ละสไตล์

ขั้นตอนที่ 6 ในการเชื่อมต่อตัวเอียงหนา ให้พิมพ์ดังต่อไปนี้:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic-Bold.eot');
src: url('fonts/WebFont-Italic-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic-Bold.woff') format('woff'),
url('fonts/WebFont-Italic-Bold.ttf') format('truetype'),
url('fonts/WebFont-Italic-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: italic;
}

แค่นั้นแหละ. ตอนนี้คุณได้เชื่อมต่อรูปแบบแบบอักษรสี่แบบเข้ากับเว็บไซต์ของคุณแล้ว

แต่มีข้อสังเกตหนึ่งข้อ: การเชื่อมต่อแบบอักษรนี้จะแสดงผลไม่ถูกต้องใน Internet Explorer 8 การปลอบโยนคือมีคนน้อยมากที่ยังคงใช้ IE8

แหล่งข้อมูลอื่น ๆ ที่แนะนำ

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

• ปลั๊กอิน WordPress 10 หีบเพลงสำหรับเว็บไซต์
• วิธีเพิ่มหลายคอลัมน์ใน WordPress
• ปลั๊กอินบางเพื่อบูรณาการบริการของ Google ในบล็อกของคุณ
• ปลั๊กอิน WordPress 5 เพื่อแสดงการแจ้งเตือน
• ใช้ภูมิหลังที่แตกต่างกัน WordPress

สรุป

สิ่งแรกที่ผู้ใช้สังเกตเห็นเมื่อเยี่ยมชมเว็บไซต์ของคุณคืออะไร? ใช่แล้ว การออกแบบของมัน! การออกแบบส่วนใหญ่อาศัยการใช้ฟอนต์ที่สวยงามอย่างเหมาะสม ดังนั้น คุณต้องดูแลการออกแบบฟอนต์เว็บไซต์ของคุณ เพิ่มโค้ดหรือใช้ปลั๊กอินตัวใดตัวหนึ่งที่กล่าวถึงข้างต้นเพื่อฝังรูปแบบฟอนต์ใหม่ วิธีที่คุณเลือกขึ้นอยู่กับคุณ

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

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

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

en ผู้ดูแล แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.   

...