ข้ามไปยังเนื้อหาหลัก

Google Fonts

  1. ไปที่ Google Fonts และเลือกฟอนต์ที่คุณชอบ

  2. ในหน้าฟอนต์ ให้หาและคลิกปุ่ม Get font

1

  1. คลิก Get embed code

2

  1. เลือก @import

3

  1. เราจำเป็นต้องคัดลอก 2 ส่วนตรงนี้:

4

ส่วนที่หนึ่ง

สำหรับฟอนต์ที่ฉันเลือก โค้ด embed ที่ Google ให้มามีลักษณะดังนี้:

<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:[email protected]&display=swap');
</style>

เราจำเป็นต้องคัดลอกเฉพาะส่วนหลังเครื่องหมายคำถามใน URL (ที่ไฮไลต์สีแดงในภาพด้านบน) แล้วนำไปวางในช่อง Google Fonts (Font families) ในหน้าตัวเลือกของปลั๊กอิน ในตัวอย่างนี้ ฉันต้องคัดลอกเพียง family=Noto+Sans+JP:[email protected]&display=swap

ส่วนที่สอง

สำหรับฟอนต์นี้ โค้ด style ที่ Google ให้มามีลักษณะดังนี้:

// <uniquifier>: ใช้ชื่อคลาสที่ไม่ซ้ำและสื่อความหมาย
// <weight>: ใช้ค่าตั้งแต่ 100 ถึง 900

.noto-sans-jp-<uniquifier> {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

เราต้องการเฉพาะส่วนที่ไฮไลต์สีแดงในภาพด้านบน

  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;

บางครั้งคุณต้องกรอกค่าบางอย่างลงใน style ตัวอย่างเช่น สำหรับฟอนต์นี้ ค่า font-weight คือ <weight> ซึ่งหมายความว่าคุณต้องระบุค่าเอง ตัวแทนค่าเหล่านี้มักจะอยู่ใน <> คุณสามารถดูค่าที่สอดคล้องกันได้ที่ Mozilla

สำหรับ font-weight เราสามารถใช้ normal

  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;

นำสิ่งนี้ไปวางในช่อง Google Fonts (CSS properties) ในหน้าตัวเลือกของปลั๊กอิน

  1. ตั้งค่าให้เสร็จสมบูรณ์

5

  1. กลับไปที่หน้าวิดีโอเพื่อดูฟอนต์ที่ถูกนำไปใช้ ภาพด้านล่างแสดงการใช้งาน Noto Sans Japanese และ Noto Serif Japanese

6