Noto Sans Thai

โดย Google

ดาวน์โหลดฟอนต์นี้

ดูบน jsDelivr

ดูบน GitHub

ฟอนต์นี้รองรับ Variable Fonts

หากต้องการใช้งานฟอนต์แบบปกติ เลือกชนิดฟอนต์ด้านล่างเป็น Static

ทดลองฟอนต์

ขนาด (26px)

น้ำหนัก (400)

ความกว้าง (100%)

กรุงเทพฯ ดุจเทพสร้าง เมืองศูนย์กลางการปกครอง วัดวังงามเรืองรอง เมืองหลวงของประเทศไทย

การใช้งาน

โค้ดพร้อมใช้งาน สำหรับฟอนต์รูปแบบปกติ ทุกน้ำหนัก สามารถคัดลอกไปใช้งานได้ทันที เบราว์เซอร์จะโหลดเฉพาะไฟล์ที่ต้องใช้เท่านั้น

เลือกชนิดฟอนต์:

ตัวเลือกที่ 1: ปรับได้เฉพาะน้ำหนัก (weight)

<link href="https://cdn.jsdelivr.net/gh/lazywasabi/thai-web-fonts@7/fonts/NotoSansThai/var/NotoSansThai[wght].css" rel="stylesheet" />

ตัวเลือกที่ 2: ปรับได้ทั้งน้ำหนัก (weight) และความกว้าง (width)

<link href="https://cdn.jsdelivr.net/gh/lazywasabi/thai-web-fonts@7/fonts/NotoSansThai/var/NotoSansThai[wdth,wght].css" rel="stylesheet" />

ตัวเลือกที่ 1: ปรับได้เฉพาะน้ำหนัก (weight)

@font-face {
  font-family: 'Noto Sans Thai';
  src: url('https://cdn.jsdelivr.net/gh/lazywasabi/thai-web-fonts@7/fonts/NotoSansThai/var/NotoSansThai[wght].woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

ตัวเลือกที่ 2: ปรับได้ทั้งน้ำหนัก (weight) และความกว้าง (width)

@font-face {
  font-family: 'Noto Sans Thai';
  src: url('https://cdn.jsdelivr.net/gh/lazywasabi/thai-web-fonts@7/fonts/NotoSansThai/var/NotoSansThai[wdth,wght].woff2') format('woff2');
  font-style: normal;
  font-stretch: 62.5% 100%;
  font-weight: 100 900;
  font-display: swap;
}

ตัวเลือกที่ 1: ปรับได้เฉพาะน้ำหนัก (weight)

@import 'https://cdn.jsdelivr.net/gh/lazywasabi/thai-web-fonts@7/fonts/NotoSansThai/var/NotoSansThai[wght].css';

ตัวเลือกที่ 2: ปรับได้ทั้งน้ำหนัก (weight) และความกว้าง (width)

@import 'https://cdn.jsdelivr.net/gh/lazywasabi/thai-web-fonts@7/fonts/NotoSansThai/var/NotoSansThai[wdth,wght].css';

<link href="https://cdn.jsdelivr.net/gh/lazywasabi/thai-web-fonts@7/fonts/NotoSansThai/NotoSansThai.css" rel="stylesheet" />

@font-face {
  font-family: 'Noto Sans Thai';
  src: url('https://cdn.jsdelivr.net/gh/lazywasabi/thai-web-fonts@7/fonts/NotoSansThai/NotoSansThai-Thin.woff2') format('woff2');
  font-style: normal;
  font-weight: 100;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans Thai';
  src: url('https://cdn.jsdelivr.net/gh/lazywasabi/thai-web-fonts@7/fonts/NotoSansThai/NotoSansThai-ExtraLight.woff2') format('woff2');
  font-style: normal;
  font-weight: 200;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans Thai';
  src: url('https://cdn.jsdelivr.net/gh/lazywasabi/thai-web-fonts@7/fonts/NotoSansThai/NotoSansThai-Light.woff2') format('woff2');
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans Thai';
  src: url('https://cdn.jsdelivr.net/gh/lazywasabi/thai-web-fonts@7/fonts/NotoSansThai/NotoSansThai-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans Thai';
  src: url('https://cdn.jsdelivr.net/gh/lazywasabi/thai-web-fonts@7/fonts/NotoSansThai/NotoSansThai-Medium.woff2') format('woff2');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans Thai';
  src: url('https://cdn.jsdelivr.net/gh/lazywasabi/thai-web-fonts@7/fonts/NotoSansThai/NotoSansThai-SemiBold.woff2') format('woff2');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans Thai';
  src: url('https://cdn.jsdelivr.net/gh/lazywasabi/thai-web-fonts@7/fonts/NotoSansThai/NotoSansThai-Bold.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans Thai';
  src: url('https://cdn.jsdelivr.net/gh/lazywasabi/thai-web-fonts@7/fonts/NotoSansThai/NotoSansThai-ExtraBold.woff2') format('woff2');
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans Thai';
  src: url('https://cdn.jsdelivr.net/gh/lazywasabi/thai-web-fonts@7/fonts/NotoSansThai/NotoSansThai-Black.woff2') format('woff2');
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

@import 'https://cdn.jsdelivr.net/gh/lazywasabi/thai-web-fonts@7/fonts/NotoSansThai/NotoSansThai.css';

ใช้ CSS ด้านล่างนี้เพื่อกำหนดฟอนต์

font-family: 'Noto Sans Thai', sans-serif;

รายชื่อไฟล์ที่ใช้งานได้

ด้านล่างนี้คือรายชื่อไฟล์ที่ใช้งานได้ทั้งหมดของฟอนต์นี้ สำหรับสร้าง @font-face ของคุณเอง

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38


var/NotoSansThai[wdth,wght].woff2
var/NotoSansThai[wght].woff2
NotoSansThai-Black.woff2
NotoSansThai-Bold.woff2
NotoSansThai-Condensed.woff2
NotoSansThai-CondensedBlack.woff2
NotoSansThai-CondensedBold.woff2
NotoSansThai-CondensedExtraBold.woff2
NotoSansThai-CondensedExtraLight.woff2
NotoSansThai-CondensedLight.woff2
NotoSansThai-CondensedMedium.woff2
NotoSansThai-CondensedSemiBold.woff2
NotoSansThai-CondensedThin.woff2
NotoSansThai-ExtraBold.woff2
NotoSansThai-ExtraCondensed.woff2
NotoSansThai-ExtraCondensedBlack.woff2
NotoSansThai-ExtraCondensedBold.woff2
NotoSansThai-ExtraCondensedExtraBold.woff2
NotoSansThai-ExtraCondensedExtraLight.woff2
NotoSansThai-ExtraCondensedLight.woff2
NotoSansThai-ExtraCondensedMedium.woff2
NotoSansThai-ExtraCondensedSemiBold.woff2
NotoSansThai-ExtraCondensedThin.woff2
NotoSansThai-ExtraLight.woff2
NotoSansThai-Light.woff2
NotoSansThai-Medium.woff2
NotoSansThai-Regular.woff2
NotoSansThai-SemiBold.woff2
NotoSansThai-SemiCondensed.woff2
NotoSansThai-SemiCondensedBlack.woff2
NotoSansThai-SemiCondensedBold.woff2
NotoSansThai-SemiCondensedExtraBold.woff2
NotoSansThai-SemiCondensedExtraLight.woff2
NotoSansThai-SemiCondensedLight.woff2
NotoSansThai-SemiCondensedMedium.woff2
NotoSansThai-SemiCondensedSemiBold.woff2
NotoSansThai-SemiCondensedThin.woff2
NotoSansThai-Thin.woff2

ข้อมูลฟอนต์

สัญญาอนุญาต: SIL Open Font License, version 1.1
เว็บไซต์: https://fonts.google.com/noto/specimen/Noto+Sans+Thai
ซอร์สโค้ด: https://github.com/notofonts/thai
ไทยเฟซ: https://thaifaces.com/specimen/noto-sans-thai/