เทคนิคการมีฟอนต์แฟนซีใน WordPress?

เผยแพร่แล้ว: 2021-11-08

เทคนิคการมีฟอนต์สวยๆใน WordPress

บทความนี้พยายามช่วยให้เข้าใจวิธีต่างๆ ในการใช้ฟอนต์ใน WordPress ของคุณ

เราจะพูดถึงปลั๊กอินต่างๆ ที่หาได้ง่ายซึ่งสามารถใช้ได้หากไม่สะดวกในการใช้โค้ด

ต่อไปนี้คือวิธีการและเคล็ดลับบางประการในการใช้แบบอักษรแฟนซีใน WordPress และการพิมพ์ใน WordPress:

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

ฟอนต์แบบกำหนดเอง/ฟอนต์แฟนซีใน WordPress คืออะไร?

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

ดังนั้นจึงมีรูปแบบตัวอักษรจำนวนมากเกิดขึ้น ธีม WordPress จำนวนมากมีแบบอักษรจำนวนหนึ่งที่ติดตั้งไว้แล้ว

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

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

ปลั๊กอินแบบอักษรต่างๆ อยู่ด้านล่าง

1. แบบอักษร :

2. ใช้แบบอักษรใดก็ได้ :

ใช้แบบอักษรใดก็ได้

3. Google Fonts ง่าย ๆ :

ปลั๊กอิน Google Fonts อย่างง่าย

4. WP Google แบบอักษร:

ปลั๊กอิน WP Google Fonts

5. แบบอักษรที่ดีกว่าน่ากลัว:

Better Font Awesome

6. ตัวเปลี่ยนแบบอักษร MW:

Parsi Font

7. Google Fonts สำหรับ WordPress :

8. แบบอักษรที่กำหนดเอง :

แบบอักษรที่กำหนดเอง

9. ฟอนต์เจ๋งๆ :

Font Awesome

10. ฟอนต์ภาษาญี่ปุ่นสำหรับ WordPress :

11. Styleguide – แบบอักษรและสีที่กำหนดเอง:

คู่มือสไตล์

12. ตัวปรับขนาดอักษร Zeno:

ตัวปรับขนาดอักษร Zeno

13. WP Font ยอดเยี่ยม:

WP Font Awesome

14. แบบอักษร Typekit สำหรับ WordPress:

แบบอักษร Typekit สำหรับ WordPress

15. ไอคอน WP SVG:

ปลั๊กอินไอคอนเวกเตอร์ svg

16. เว็บฟอนต์ภาษาอาหรับ :

เว็บฟอนต์ภาษาอาหรับ

17. ปลั๊กอินฟอนต์แบบกำหนดเองระดับพรีเมียมสำหรับ WordPress:

18. ไอคอน WP Ionic:

ไอคอน WP Ionic

19. FontPress – ตัวจัดการฟอนต์ WordPress :

20. ตัวอัพโหลดฟอนต์ :

21. Styler – ไอคอน แบบอักษร และเครื่องมือสร้าง CSS สำหรับ WP :

22. ไอคอนแบบอักษรสไตล์ iOS7:

23. เครื่องมือเสริมความงาม WooCommerce:

ช่างเสริมสวยสุขา

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

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

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

วิธีที่ 1: เพิ่มแบบอักษรโดยใช้ Google Fonts Plugin :
หากคุณต้องการใช้แบบอักษร Google บนเว็บไซต์ WordPress วิธีนี้เป็นวิธีที่ดีที่สุดสำหรับผู้เริ่มต้น เพราะมันใช้งานง่ายมากเช่นกัน

วิธีที่ 2: เพิ่มแบบอักษรแฟนซีใน WordPress ด้วยตนเอง :
ในการเพิ่มแบบอักษรด้วยตนเองบนไซต์ WordPress คุณเพียงแค่คัดลอกและวางโค้ดในไซต์ WordPress

วิธีที่ 3: การใช้ Typekit :
Typekit เป็นปลั๊กอินฟรีอีกตัวสำหรับฟอนต์เจ๋งๆ ที่คุณสามารถใช้ฟอนต์ประเภทนี้ในโครงการออกแบบของคุณได้ พวกเขาจะได้รับเงินด้วยแผนการสมัครสมาชิกฟรีแบบจำกัดที่คุณสามารถใช้ได้

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

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

1. SIFR :

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

เทคนิคนี้ใช้กันอย่างแพร่หลายจนกระทั่งเบราว์เซอร์ สมาร์ทโฟน และแท็บเล็ตเริ่มใช้ javaript และ jquery แทน Flash และได้ถูกยกเลิกโดยผู้พัฒนาตั้งแต่นั้นเป็นต้นมา

นอกจากนี้ยังสามารถสร้าง sIFR ได้อย่างง่ายดายโดยใช้เว็บไซต์ตัวสร้าง sIFR ซึ่งจะสร้าง .swf สำหรับฟอนต์ใดๆ

นี่คือหนึ่งปลั๊กอิน: http://WordPress.org/plugins/wp-sifr/

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

2. คูฟอง :

Cufon ใช้ตัวสร้าง cufon: http://cufon.shoqolate.com/generate/ เช่นเทคนิค SVG และ VML เพื่อแสดงผลและสร้างจาวาสคริปต์สำหรับแบบอักษรใด ๆ การใช้เครื่องมือสร้าง Cufon สามารถมีแบบอักษรตัวหนา น้ำหนักเบา ตัวเอียง และแบบอักษรอื่นๆ ทั้งหมดไว้ในจาวาสคริปต์เดียว

จากนั้นพวกเขาก็ต้องใช้จาวาสคริปต์ในส่วนหัวหรือส่วนท้ายของธีม WordPress เพื่อใช้แบบอักษร cufon

หากฟังดูน่าเบื่อ ปลั๊กอินต่อไปนี้อาจมีประโยชน์สำหรับการใช้แบบอักษร cufon:

WP-Cufon

ทั้งหมดในที่เดียว Cufon

ข้อดี: ข้อดีของ cufon คือเนื่องจากมันแสดงแบบอักษรเป็นรูปภาพ มันจึงปรากฏเหมือนกันในทุกเบราว์เซอร์รวมถึงโทรศัพท์มือถือ

ข้อเสีย: มันต้องใช้จาวาสคริปต์ ดังนั้นหากมีคนปิดการใช้งานสคริปต์บนเบราว์เซอร์ แบบอักษร cufon จะไม่ปรากฏ

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

3. เทคนิค CSS :

เทคนิค CSS น่าจะดีที่สุด แต่ปัญหาเดียวของเทคนิค css คือต้องรวมไฟล์ฟอนต์ เช่น ไฟล์ฟอนต์ ttf หรือ otf ไว้ในส่วนหัวหรือส่วนท้าย

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

ข้อมูลต่อไปนี้แสดงวิธีรวมแบบอักษรจากหน้าแบบอักษรหรือแบบอักษรกระรอกหรือ dafont หรือเว็บไซต์แบบอักษรอื่น ๆ ลงใน css ของคุณ:

@แบบอักษรหน้า{

ตระกูลแบบอักษร: 'MyWebFont';

src: url('WebFont.eot');

src: url('WebFont.eot?iefix') รูปแบบ('eot'),

url('WebFont.woff') รูปแบบ('woff'),

url('WebFont.ttf') รูปแบบ('truetype'),

url('WebFont.svg#webfont') รูปแบบ('svg');

}

เทคนิคข้างต้นแสดงการรวมฟอนต์ลงใน css คุณต้องเขียนสิ่งนี้ทับ style.css . ของคุณ

อย่างไรก็ตาม วิธีนี้ยังคงใช้อยู่เป็นส่วนใหญ่ โดยเฉพาะอย่างยิ่งสำหรับฟอนต์ภาษาที่ไม่สามารถใช้ฟอนต์ภาษาอังกฤษ และต้องมีฟอนต์ภาษา มีเทคนิค CSS หรือเทคนิคการใช้แบบอักษรของการรวมแบบอักษรใน css ไว้ด้วย

4. Google Fonts

น่าจะเป็นวิธีที่ดีที่สุดโดยที่ใครๆ ก็ใช้ฟอนต์ที่ถูกใจในเว็บไซต์ของพวกเขาได้ นี่คือไลบรารี่ของ 632 ฟอนต์และยังคงเติบโต

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

ข้อดี: เป็นเรื่องง่ายและเรียบง่ายและน้ำหนักเบาเมื่อโหลดแบบอักษรจากเซิร์ฟเวอร์ของ Google

ข้อเสีย: ต้องโหลดฟอนต์และฟอนต์ที่หนักกว่าด้วยสไตล์ที่มากขึ้นสามารถลดความเร็วของเพจได้ นอกจากนี้ สำหรับเว็บไซต์ที่ใช้ภาษาอื่น แบบอักษรของ Google ไม่สามารถใช้ได้เนื่องจากมีเฉพาะภาษา/สคริปต์ Cyrillic, Greek, Khmer, Vietnamese และ Latin เท่านั้น

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

ต้องการใช้แบบอักษรของ Google โดยใช้ปลั๊กอิน นี่คือบางส่วน:

WP Google Fonts

Google Typography