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

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

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


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

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

มาดูกัน.

Contents

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

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

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

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

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

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

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

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

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

ทางเลือกของ Google แบบอักษร

ตำแหน่งที่จะค้นหาแบบอักษรที่กำหนดเอง

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

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

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

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

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

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

มีสองสามวิธีในการเพิ่มแบบอักษรไปยังไซต์ WordPress:

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

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

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

ลักษณะของปลั๊กอินแบบอักษรที่กำหนดเอง

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

นี่คือจุดที่ควรคำนึงถึง:

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

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

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

Custom Font Uploader

Custom Font Uploader

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

ใช้แบบอักษรใด ๆ

ใช้แบบอักษรใด ๆ

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

WP Google แบบอักษร

WP Google แบบอักษร

WP Google Fonts อนุญาตให้คุณใช้แคตตาล็อกแบบอักษรของ Google หนึ่งในประโยชน์ที่น่าอัศจรรย์ของปลั๊กอินนี้คือการเพิ่มแบบอักษร Google ให้มากถึง 1,000 แบบ แม้ว่าคุณจะสามารถจัดคิวฟอนต์ของ Google ด้วยตนเอง แต่ก็ง่ายกว่ามากที่จะใช้ปลั๊กอินสำหรับผู้ใช้ส่วนใหญ่.

วิธีการติดตั้งฟอนต์ด้วยปลั๊กอิน?

ลองดูตัวอย่างเช่น WP Google Fonts เพียงติดตั้งปลั๊กอินนี้จากแหล่งเก็บ WordPress อย่างเป็นทางการและเปิดส่วน Google Fonts.

WP Google แบบอักษร

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

ตัวเลือก 2 – ติดตั้งแบบอักษรที่กำหนดเอง WordPress ด้วยตนเอง

ด้วย @ direct-faceive directive คุณสามารถเชื่อมต่อทั้งแบบอักษรหนึ่งหรือหลายตัวกับไซต์ของคุณ แต่วิธีนี้มีข้อดีข้อเสีย.

ข้อดี:

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

จุดด้อย:

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

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

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

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

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

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

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

เพิ่มไฟล์ฟอนต์ทั้งหมดลงในโฟลเดอร์ฟอนต์ที่เพิ่งเพิ่มใหม่: wp-content / ธีม / คุณลูก-theme / แบบอักษร คุณสร้างขึ้น.

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

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

@ font-face {
ตระกูลฟอนต์: 'MyWebFont';
src: url ('แบบอักษร / WebFont.eot');
src: url ('fonts / WebFont.eot? #iefix') รูปแบบ ('embedded-opentype'),
รูปแบบ URL ('แบบอักษร / WebFont.woff') ('woff'),
รูปแบบ url ('fonts / WebFont.ttf') ('truetype'),
รูปแบบ url ('fonts / WebFont.svg # svgwebfont') ('svg');
น้ำหนักตัวอักษร: ปกติ;
แบบอักษร: ปกติ;
}

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

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

ขั้นตอนที่ 4 เมื่อทำการเพิ่ม หนังสือแบบตัวเอียง, เขียนดังต่อไปนี้:

@ font-face {
ตระกูลฟอนต์: 'MyWebFont';
src: url ('แบบอักษร / WebFont-Italic.eot');
src: url ('แบบอักษร / WebFont-Italic.eot? #iefix') รูปแบบ ('embedded-opentype'),
รูปแบบ url ('แบบอักษร / WebFont-Italic.woff') ('woff'),
รูปแบบ URL ('แบบอักษร / WebFont-Italic.ttf') ('truetype'),
url ('fonts / WebFont-Italic.svg # svgwebfont') รูปแบบ ('svg');
น้ำหนักตัวอักษร: ปกติ;
แบบอักษร: ตัวเอียง;
}

ในกรณีที่ทุกอย่างเหมือนกันมีเพียงเราเท่านั้นที่แนบคุณสมบัติแบบอักษรกับตัวเอียง.

ขั้นตอนที่ 5 เมื่อต้องการเพิ่มแบบอักษรตัวหนาเพิ่มรหัสต่อไปนี้:

@ font-face {
ตระกูลฟอนต์: 'MyWebFont';
src: url ('แบบอักษร / WebFont-Bold.eot');
src: url ('fonts / WebFont-Bold.eot? #iefix') รูปแบบ ('embedded-opentype'),
รูปแบบ url ('แบบอักษร / WebFont-Bold.woff') ('woff'),
รูปแบบ url ('แบบอักษร / WebFont-Bold.ttf') ('truetype'),
รูปแบบ url ('fonts / WebFont-Bold.svg # svgwebfont') ('svg');
น้ำหนักตัวอักษร: ตัวหนา;
แบบอักษร: ปกติ;
}

ที่ซึ่งเราตั้งค่าคุณสมบัติน้ำหนักตัวอักษรเป็นตัวหนา.

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

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

@ font-face {
ตระกูลฟอนต์: 'MyWebFont';
src: url ('แบบอักษร / WebFont-Italic-Bold.eot');
src: url ('แบบอักษร / WebFont-Italic-Bold.eot? #iefix') รูปแบบ ('embedded-opentype'),
รูปแบบ url ('แบบอักษร / WebFont-Italic-Bold.woff') ('woff'),
รูปแบบ URL ('แบบอักษร / WebFont-Italic-Bold.ttf') ('truetype'),
url ('แบบอักษร / WebFont-Italic-Bold.svg # svgwebfont') รูปแบบ ('svg');
น้ำหนักตัวอักษร: ตัวหนา;
แบบอักษร: ตัวเอียง;
}

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

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

การตัดแต่งฟอนต์ที่กำหนดเองสำหรับ WordPress

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

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

นั่นคือทั้งหมดรู้สึกอิสระที่จะแสดงความคิดเห็น. 

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map