วิธีใช้ Google Fonts กับ Google และ Plugins!
เผยแพร่แล้ว: 2021-07-30
หากคุณเป็นนักออกแบบ คุณมักจะพิจารณาตัวอักษรเป็นพื้นฐานของการออกแบบเว็บไซต์ ไม่เพียงแต่การเลือกแบบอักษรเท่านั้นแต่ยังช่วยเพิ่มความสามารถในการอ่านหน้าเว็บด้วย
วิชาการพิมพ์คืออะไร?
วิชาการพิมพ์เป็นเรื่องเกี่ยวกับการเลือกความยาวบรรทัด ขนาดจุด ระยะห่างบรรทัด แบบอักษร และการปรับช่องว่างระหว่างกลุ่มตัวอักษร
เหตุใด Google Fonts จึงเป็นตัวเลือกที่ชัดเจน
มีหลายครั้งที่อินเทอร์เน็ตมีแบบอักษรมาตรฐานที่ทำให้ทุกคนเบื่อหน่าย แต่เมื่อเวลาผ่านไป นักออกแบบเว็บไซต์และนักพัฒนาถูกบังคับให้จำกัดตัวเลือกแบบอักษรข้อความสดและออกแบบแบบอักษรที่เข้ากันได้กับผู้ใช้จำนวนมากที่สุด อินเตอร์เนต. พวกเขามากับ CSS3 Typekit เริ่มต้นมัน
Typekit พัฒนาฟอนต์ที่น่าดึงดูดซึ่งช่วยให้นักออกแบบเลือกฟอนต์ที่น่าดึงดูดและเป็นมิตรกับผู้ใช้สำหรับหน้าเว็บของพวกเขา แต่ปัญหาเดียวในการใช้ Typekit คือค่าใช้จ่ายที่เรียกเก็บจากผู้ใช้
ราคาอยู่ที่ 49 ดอลลาร์ และในกรณีที่นักออกแบบต้องการพัฒนาไซต์สองแห่ง เขาต้องจ่าย 99 ดอลลาร์สำหรับการใช้แบบอักษรบนหน้าเว็บเท่านั้น ขอบคุณ Google ที่มาพร้อมกับการออกแบบฟอนต์ที่ยอดเยี่ยมและนำเสนอให้ฟรี
เห็นได้ชัดว่าคุณไม่ได้รับสิ่งที่คุณจะได้รับจากเงินฟรี แต่เชื่อเถอะว่า Google Web Fonts นั้นยังคงแตกต่างจาก Typekit ที่เสนอให้ แน่นอน แบบอักษร Google Web เหมาะที่สุดเมื่อคุณไม่ต้องการใช้แบบอักษรมากเกินไป เนื่องจากคุณทราบดีว่าการสร้างเว็บไซต์ทั้งหมดมีค่าใช้จ่ายสูงเกินไป
Google Fonts และการปรับแต่ง:
ณ วันนี้ มีแบบอักษรแยกกันมากกว่า 647 แบบอักษรในห้องสมุด Google เมื่อคุณเลือกแบบอักษรสำหรับเนื้อหาในเว็บไซต์ของคุณ จำเป็นต้องดูในลักษณะที่คล้ายกับวิธีที่คุณใช้แบบอักษรนั้น แบบอักษรบางตัวดูสมบูรณ์แบบสำหรับเนื้อหาเนื้อหาแต่ดูน่ากลัวสำหรับส่วนหัว
โชคดีที่ Google Web Fonts ให้คุณปรับแต่งการแสดงตัวอย่างเพื่อให้ตรงกับกรณีการใช้งานของคุณ คุณสามารถป้อนข้อความแสดงตัวอย่างแบบกำหนดเอง และเปลี่ยนขนาดการแสดงตัวอย่างของคุณได้ตามต้องการ สิ่งสำคัญคือต้องดูตัวอย่างส่วนหัวหรือเนื้อหาที่คุณจะใช้ในมุมมองย่อหน้า และถ้าคุณมีสำเนาเนื้อหาจำนวนมาก อย่าใช้แบบอักษรที่กำหนดเองมากเกินไป
ลงแบบอักษรที่ถูกต้อง!
เนื่องจากเราทราบว่ามีแบบอักษรให้เลือกมากกว่า 600 แบบ จึงเป็นการยากที่จะกรองและเลือกแบบอักษรที่เหมาะสมได้โดยการเลื่อนดูทีละรายการ ดังนั้น ใช้ขั้นตอนด้านล่างเพื่อปรับแต่งสิ่งที่คุณต้องการสำหรับเว็บไซต์ของคุณ:
- ดูแบบอักษรที่เพิ่งอัปเดตโดย Google อย่างรวดเร็ว โอกาสที่คุณจะได้รับฟอนต์ที่กำลังมาแรงและไม่มีบั๊กโดยไม่ต้องดูฟอนต์ที่เหลือ โปรดดูแบบอักษรที่นักออกแบบและนักพัฒนาส่วนใหญ่ใช้ การทำเช่นนี้จะช่วยให้คุณทราบฟอนต์ที่หลากหลายซึ่งคุณสามารถใช้ในหลากหลายสไตล์และความกว้าง
- หากคุณทราบแบบอักษรสำหรับเว็บไซต์ของคุณ ลักษณะเฉพาะและรูปแบบของแบบอักษรสามารถปรับปรุงผลลัพธ์ของคุณได้ เช่น หากคุณต้องการแบบอักษรที่เขียนด้วยลายมือ ให้ปิดใช้งานผลลัพธ์ประเภทอื่นๆ ทั้งหมด
- Google อนุญาตให้คุณปรับแต่งการค้นหาแบบอักษรของคุณเพิ่มเติมโดยเพิ่มความหนา ความเอียง และความกว้างของอักขระเป็นตัวเลือกการกรอง ฟีเจอร์เจ๋งๆ ที่จะได้ฟอนต์ที่ดีที่สุดสำหรับเว็บไซต์ของคุณไม่ใช่หรือ
การเลือกแบบอักษร
Google มีหลายวิธีในการเลือกและใช้งานแบบอักษรตามความต้องการของเจ้าของเว็บไซต์ ไม่มีอะไรถูกหรือผิดที่นี่ สิ่งที่ดีที่สุดสำหรับคุณ คุณจะได้สิ่งนั้น รองรับสามปุ่มเพื่อช่วยให้คุณเลือกแบบอักษรที่เหมาะสม:
- ใช้งานด่วน: เพื่อดูแบบอักษรที่คุณชอบอย่างรวดเร็ว
- เปิดออกมา: หากต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับแบบอักษรที่คุณชอบ เช่น ฟังก์ชันและการใช้งาน
- คอลเลคชัน: หากคุณต้องการใช้ฟอนต์มากกว่า 2 แบบ คอลเลคชันคือปุ่มที่คุณต้องคลิก มันจะเพิ่มแบบอักษรทั้งหมดที่คุณชอบในหน้าเดียว
วิธีการใช้แบบอักษร Google?
เมื่อคุณเลือกแบบอักษรที่ต้องการใช้บนเว็บเพจแล้ว คุณสามารถคลิกแท็บ "ใช้" เพื่อดูการทำงานได้ ตอนนี้ เมื่อคุณแน่ใจเกี่ยวกับฟอนต์แล้ว สิ่งที่คุณต้องทำก็แค่คัดลอกและวางโค้ดบนหน้าเว็บของคุณ คุณจะได้รับสามตัวเลือกให้เลือก:
มาตรฐาน:
เป็นลิงก์สไตล์ชีตมาตรฐาน คุณต้องวางไว้ในส่วนหัวของไฟล์ HTML ซึ่งจะช่วยประหยัดขั้นตอนในการเพิ่มกฎ @import เนื่องจากคุณกำลังเพิ่มสไตล์ชีตที่ใส่ไว้แล้ว ตัวอย่าง:
ซีเอสเอส:
ใช้กฎ CSS @import ในกรณีที่คุณไม่ต้องการลิงก์ไปยังสไตล์ชีตที่สร้างโดยอัตโนมัติในส่วนหัวของคุณ ใช้โค้ดด้านล่างเพื่อรวมฟอนต์เข้ากับ CSS ของคุณ:
font-family: 'Henry Pigeous', serif;
font-family: 'Diplomatic'. cursive;
JavaScript
Google และ Typekit ต่างพัฒนาโค้ดนี้ในที่นี้โดยเป็นส่วนหนึ่งของตัวโหลด WebFont เพื่อให้ผู้ใช้ควบคุมการโหลดฟอนต์ได้มากขึ้น
หยิบข้อมูลโค้ด HTML และวางไว้ใกล้กับส่วนหัวของ HTML ดังนี้:
ชื่อหน้า
ข้ามไปที่ CSS และทำตามนี้:
h1 {
font: 400 45px/0.5 'Diplomatic', Arial, sans-serif;
}
p {
font: 400 14px/1.5 'Henry Pegasus', Times, serif;
}
ด้วยความช่วยเหลือของปลั๊กอิน!
มีปลั๊กอินบางตัวที่ให้การรวม Google Font อย่างราบรื่น การใช้ปลั๊กอินมีข้อจำกัด เช่น ปลั๊กอินจะไม่ทราบว่าต้องค้นหาข้อความใดข้อความหนึ่งโดยไม่ต้องปรับแต่งเพิ่มเติมด้วยความช่วยเหลือของ HTML หรือ CSS แต่ยังมีปลั๊กอินบางตัวที่จะรวมแบบอักษร Google ไว้ในเว็บไซต์ของคุณ
1. ปลั๊กอินแบบอักษร 
เป็นวิธีที่ง่ายและมีประสิทธิภาพในการฝังแบบอักษร Google ลงในเว็บไซต์ของคุณด้วยการคลิกเพียงไม่กี่ครั้ง คุณสามารถใช้สไตล์ชีตของคุณหรือใช้สไตล์ CSS ทั้งสองจะทำงานเพื่อปรับให้เข้ากับธีมของคุณ คุณสามารถทำได้จากส่วนผู้ดูแลระบบหรือสไตล์ชีตของเว็บไซต์ของคุณ Fonts Plugin คือทั้งหมดที่คุณต้องการสำหรับเว็บไซต์ของคุณ รวดเร็วและมีประสิทธิภาพ
2. Google Fonts ง่าย ๆ 
ด้วยปลั๊กอิน Easy Google Fonts คุณไม่จำเป็นต้องแตะต้องการเข้ารหัสใดๆ เพื่อรับแบบอักษรบนเว็บไซต์ของคุณ ตั้งแต่การเลือกไปจนถึงการปรับให้เหมาะสมและการให้สีที่เป็นเอกลักษณ์ไปจนถึงการแสดงตัวอย่าง ทุกอย่างที่มีแบบอักษรสามารถทำได้โดยใช้ Google Fonts แบบง่าย
3. TK Google Fonts 
TK Google Fonts จะเพิ่มแบบอักษร Google Web ทั้งหมด 291 แบบลงในแผงโปรแกรมแก้ไขภาพของคุณเมื่อคุณกำลังพัฒนาหน้าหรือโพสต์ เพียงแค่ติดตั้งและเริ่มใช้งาน
การติดตั้งปลั๊กอินข้างต้น:
- เข้าสู่ระบบผู้ดูแลระบบ WordPress
- คลิก "ปลั๊กอิน"
- คลิก “เพิ่มใหม่”
- พิมพ์ชื่อปลั๊กอินที่มุมบนขวาและคลิกที่ "ติดตั้งทันที"
เพื่อปรับแต่งปลั๊กอิน
- คลิกที่ "ลักษณะที่ปรากฏ" จากนั้นคลิกที่ "ปรับแต่ง"
- คลิกที่ "เยี่ยมชมเว็บไซต์" จากนั้นคลิก "ปรับแต่ง"
- คุณจะสังเกตเห็นเมนูที่เพิ่มเข้ามาใหม่ว่า "Typography"
ดำเนินการเรียนรู้!
เราหวังว่าการอ่านบทความจะเป็นบทเรียนที่ใช้ และตอนนี้ก็ถึงเวลาที่จะใช้ความรู้นี้ในเว็บไซต์ของคุณ เรียกดูแบบอักษร ปลั๊กอินต่างๆ เพื่อปรับปรุงรูปแบบตัวอักษรในเว็บไซต์ของคุณ จำไว้ว่าหากคุณกำลังปรับแต่งฟอนต์ มันจะมีประโยชน์มากกว่าแค่การคัดลอกและวางฟอนต์ แจ้งให้เราทราบถึงแบบอักษรและวิธีการที่คุณใช้ในการเพิ่มการออกแบบตัวอักษรเพื่อดึงดูดผู้ชมของคุณในโครงการของคุณ
แบบอักษรช่วยเพิ่มความสวยงามให้กับเว็บไซต์และเป็นพื้นฐานของการออกแบบเว็บไซต์ แบบอักษรหรือตัวพิมพ์คือทั้งหมดที่เกี่ยวกับการเลือกความยาวบรรทัด ขนาดจุด ระยะห่างบรรทัด แบบอักษร และการปรับช่องว่างระหว่างตัวอักษรกลุ่ม
ในฐานะนักออกแบบ การปรับแต่งการค้นหาฟอนต์ของคุณให้ดียิ่งขึ้นโดยการเพิ่มความหนา ความลาดเอียง และความกว้างของอักขระเป็นตัวเลือกการกรองจะเป็นการดีเสมอ แบบอักษรบางตัวอาจไม่ดูดีในเนื้อหาเนื้อหาและ/หรือส่วนหัว
แบบอักษรบางตัวดูไม่ดีเท่าหัวเรื่องและบางแบบอักษรไม่สามารถอ่านได้ง่ายในเนื้อหาเนื้อหา ดังนั้นจึงแนะนำให้ดูแบบอักษรที่คุณเลือกในลักษณะเดียวกับที่คุณจะนำไปใช้ เพื่อให้คุณสามารถทดสอบความสามารถในการอ่านได้
ไปเป็นวันที่อินเทอร์เน็ตเคยมีแบบอักษรมาตรฐานที่น่าเบื่อแบบเดิมๆ เทคโนโลยีขั้นสูงและนักออกแบบเว็บไซต์และนักพัฒนาถูกบังคับให้ออกแบบแบบอักษรที่เข้ากันได้กับผู้ใช้จำนวนมากที่สุดบนอินเทอร์เน็ต
พวกเขามากับ CSS3 Typekit ริเริ่มและพัฒนาฟอนต์ที่น่าดึงดูดและน่าดึงดูดสำหรับนักออกแบบเว็บไซต์ที่จะใช้ แต่พวกมันก็แพงเกินไป โชคดีที่ Google เข้ามาช่วยเหลือและเสนอการออกแบบแบบอักษรที่ยอดเยี่ยมและใช้งานง่ายฟรี
ลงแบบอักษรที่ถูกต้อง!
ปัจจุบันจำนวนแบบอักษรในห้องสมุด Google มีอยู่ที่ 647 แบบ ทำให้ยากต่อการกรองและเลือกแบบอักษรที่เหมาะสม อย่างไรก็ตาม ด้วย 3 ขั้นตอนเหล่านี้ คุณจะได้รับสิ่งที่คุณต้องการสำหรับเว็บไซต์ของคุณอย่างแน่นอน:
- ดูแบบอักษรที่อัปเดตล่าสุดบน Google และรับแบบอักษรที่ได้รับความนิยมและไม่มีข้อบกพร่อง นอกจากนี้ ให้ค้นหาแบบอักษรที่นักออกแบบส่วนใหญ่ใช้ เพื่อให้คุณทราบเกี่ยวกับความเก่งกาจของแบบอักษรที่คุณสามารถใช้ได้ในหลากหลายสไตล์และความกว้าง
- รู้จักแบบอักษรสำหรับเว็บไซต์ของคุณ ลักษณะเฉพาะ และรูปแบบของแบบอักษรเพื่อปรับปรุงผลลัพธ์ของคุณ
- ปรับแต่งการค้นหาแบบอักษรของคุณโดยเพิ่มความหนา ความเอียง และความกว้างของอักขระเป็นตัวเลือกการกรอง
การเลือกแบบอักษร
ขึ้นอยู่กับความต้องการของคุณ Google มีหลายวิธีเพื่อช่วยคุณเลือกแบบอักษร ในการเลือกแบบอักษรที่เหมาะสม ให้พิจารณา:
การเข้าถึงอย่างรวดเร็ว-เพื่อดูแบบอักษรที่คุณชอบอย่างรวดเร็ว
Pop Out- หากต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับแบบอักษร เช่น ฟังก์ชันและการใช้งาน
คอลเลกชั่น-ถ้าคุณต้องการใช้ฟอนต์มากกว่า 2 แบบ ให้คลิกที่ปุ่มนี้ มันจะเพิ่มแบบอักษรทั้งหมดที่คุณชอบในหน้าเดียว
วิธีใช้ Google Fonts
เมื่อคุณเลือกแบบอักษรที่ต้องการแล้ว ให้คลิกที่แท็บ 'ใช้' เพื่อดูการทำงาน จากนั้น คัดลอกและวางโค้ดบางส่วนบนหน้าเว็บของคุณ คุณจะได้รับสามตัวเลือกให้เลือก:
มาตรฐาน -นี่คือลิงก์ของสไตล์ชีตมาตรฐาน วางไว้ในส่วนหัวของไฟล์ HTML ของคุณ จะช่วยให้คุณประหยัดเวลาในการเพิ่มกฎ @import เนื่องจากคุณกำลังเพิ่มสไตล์ชีตที่มีอยู่แล้วอย่างมีนัยสำคัญ
CSS -ใช้กฎ CSS @import ในกรณีที่คุณไม่ต้องการลิงก์ไปยังสไตล์ชีตที่สร้างโดยอัตโนมัติในส่วนหัวของ คุณ ใช้โค้ดด้านล่างเพื่อรวมฟอนต์เข้ากับ CSS ของคุณ:
ตระกูลแบบอักษร: 'Henry Pigeous', serif;
ตระกูลแบบอักษร: 'การทูต' เล่นหาง;
JavaScript -Google และ Typekit ทั้งคู่ได้พัฒนาโค้ดนี้ในที่นี้โดยเป็นส่วนหนึ่งของ Web Font loader เพื่อให้ผู้ใช้ควบคุมการโหลดฟอนต์ ได้มากขึ้น
หยิบข้อมูลโค้ด HTML และวางไว้ใกล้กับส่วนหัวของ HTML ดังนี้:
ชื่อหน้า
ข้ามไปที่ CSS และทำตามนี้:
ชั่วโมง1 {
แบบอักษร: 400 45px/0.5 'Diplomatic', Arial, sans-serif;
}
พี {
แบบอักษร: 400 14px/1.5 'Henry Pegasus', Times, serif;
}
เกี่ยวกับผู้เขียน:
Catherrine Garcia เป็นนักพัฒนาเว็บที่มีประสบการณ์ที่ Hosting Facts และบล็อกเกอร์ที่กระตือรือร้น เธอชอบที่จะแบ่งปันความรู้ของเธอผ่านบทความเกี่ยวกับการพัฒนาเว็บและ WordPress