API สําหรับนักพัฒนาแอป

Developer API ให้สิทธิ์เข้าถึงข้อมูลเมตาสำหรับตระกูลแบบอักษรทั้งหมดที่ Google Fonts ให้บริการ ซึ่งจะช่วยให้แอปค้นหาชุดแบบอักษรที่มีอยู่ใน Google Fonts ได้ REST API จะจัดเตรียมข้อมูลในรูปแบบ JSON ซึ่งมีรูปแบบและสคริปต์ (เรียกว่าชุดย่อยใน Google Fonts) ในแต่ละตระกูล API สามารถจัดเรียงรายการ ครอบครัวตามลำดับตัวอักษร ตามวันที่เพิ่ม ตามจำนวนสไตล์ ตามเทรนด์ หรือตาม ความนิยม

กลุ่มเป้าหมาย

เอกสารนี้มีไว้สำหรับนักพัฒนาเว็บและแอปพลิเคชัน การใช้ Developer API จำเป็นต้องมีความรู้เกี่ยวกับ JavaScript

ตัวอย่างแบบย่อ

หากต้องการเรียกข้อมูลรายการแบบอักษรแบบไดนามิกที่บริการ Google Fonts มีให้ ให้ส่งคำขอต่อไปนี้

https://www.googleapis.com/webfonts/v1/webfonts?key=YOUR-API-KEY

ตัวอย่างผลลัพธ์จะมีลักษณะดังนี้

{
 "kind": "webfonts#webfontList",
 "items": [
  [...]
  {
    "family": "Anonymous Pro",
    "variants": [
      "regular",
      "italic",
      "700",
      "700italic"
    ],
    "subsets": [
      "cyrillic",
      "greek",
      "latin",
      "latin-ext"
    ],
    "version": "v21",
    "lastModified": "2022-09-22",
    "files": {
      "regular": "http://fonts.gstatic.com/s/anonymouspro/v21/rP2Bp2a15UIB7Un-bOeISG3pLlw89CH98Ko.ttf",
      "italic": "http://fonts.gstatic.com/s/anonymouspro/v21/rP2fp2a15UIB7Un-bOeISG3pHl428AP44Kqr2Q.ttf",
      "700": "http://fonts.gstatic.com/s/anonymouspro/v21/rP2cp2a15UIB7Un-bOeISG3pFuAT0CnW7KOywKo.ttf",
      "700italic": "http://fonts.gstatic.com/s/anonymouspro/v21/rP2ap2a15UIB7Un-bOeISG3pHl4OTCzc6IG30KqB9Q.ttf"
    },
    "category": "monospace",
    "kind": "webfonts#webfont",
    "menu": "http://fonts.gstatic.com/s/anonymouspro/v21/rP2Bp2a15UIB7Un-bOeISG3pHl028A.ttf"
  },
  {
    "family": "Antic",
    "variants": [
      "regular"
    ],
    "subsets": [
      "latin"
    ],
    "version": "v19",
    "lastModified": "2022-09-22",
    "files": {
      "regular": "http://fonts.gstatic.com/s/antic/v19/TuGfUVB8XY5DRaZLodgzydtk.ttf"
    },
    "category": "sans-serif",
    "kind": "webfonts#webfont",
    "menu": "http://fonts.gstatic.com/s/antic/v19/TuGfUVB8XY5DRZZKq9w.ttf"
  },
  [...]
 ]
}

การระบุตัวตนแอปพลิเคชันของคุณให้ Google ทราบ

แอปพลิเคชันของคุณต้องระบุตัวตนทุกครั้งที่ส่งคำขอไปยัง Google Fonts Developer API โดยใส่คีย์ API ไปกับคำขอแต่ละรายการ

การขอรับและการใช้คีย์ API

รับคีย์

หรือสร้างในหน้าข้อมูลเข้าสู่ระบบ

หลังจากมีคีย์ API แล้ว แอปพลิเคชันจะต่อท้ายพารามิเตอร์การค้นหา key=yourAPIKey ใน URL ของคำขอทั้งหมดได้

คีย์ API ปลอดภัยสำหรับการฝังใน URL โดยไม่จำเป็นต้องมีการเข้ารหัส

รายละเอียด

การตอบกลับ JSON (ดูตัวอย่างด้านบน) ประกอบด้วยอาร์เรย์ที่ชื่อ "items" ซึ่งมีออบเจ็กต์ที่มีข้อมูลเกี่ยวกับตระกูลแบบอักษรแต่ละรายการ

ออบเจ็กต์ครอบครัวประกอบด้วยฟิลด์ต่อไปนี้

• kind: ประเภทของออบเจ็กต์ ซึ่งเป็นออบเจ็กต์ของเว็บฟอนต์
• family: ชื่อของครอบครัว
• ชุดย่อย: รายชื่อสคริปต์ที่ตระกูลแบบอักษรรองรับ
• menu: URL ไปยังชุดข้อมูลย่อยของครอบครัวซึ่งครอบคลุมเฉพาะชื่อของครอบครัว
• variants: รูปแบบต่างๆ ที่มีให้สำหรับตระกูล
• version: เวอร์ชันชุดแบบอักษร
• axes: ช่วงแกน มีเฉพาะเมื่อมีการขอ (ดูด้านล่าง) สำหรับแบบอักษรแบบแปรผัน
• lastModified: วันที่ (รูปแบบ "ปปปป-ดด-วว") ที่แก้ไขตระกูลแบบอักษรครั้งล่าสุด
• ไฟล์: ไฟล์ตระกูลแบบอักษร (ที่มีสคริปต์ที่รองรับทั้งหมด) สำหรับแต่ละ ตัวแปรที่มี
• color_capabilities: รูปแบบสีที่ตระกูลนี้รองรับ (หากมี)
• แท็ก: แท็กที่มีผลกับทั้งดีไซน์สเปซของตระกูลนี้ แสดงเมื่อมีการร้องขอเท่านั้น (ดูด้านล่าง)

การรวมข้อมูลของแต่ละตระกูลทำให้สร้างคำขอ Fonts API ได้ง่าย ตัวอย่างเช่น สมมติว่าเรามีการอ้างอิงถึงออบเจ็กต์ตระกูลสำหรับ Anonymous Pro

[...]

var apiUrl = [];
apiUrl.push('https://fonts.googleapis.com/css?family=');
apiUrl.push(anonymousPro.family.replace(/ /g, '+'));
if (contains('italic', anonymousPro.variants)) {
  apiUrl.push(':');
  apiUrl.push('italic');
}
if (contains('greek', anonymousPro.subsets)) {
  apiUrl.push('&subset=');
  apiUrl.push('greek');
}

// url: 'https://fonts.googleapis.com/css?family=Anonymous+Pro:italic&subset=greek'
var url = apiUrl.join('');

[...]

การจัดเรียง

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

https://www.googleapis.com/webfonts/v1/webfonts?sort=popularity

ค่าการจัดเรียงที่เป็นไปได้มีดังนี้

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

การกรอง

ค้นหากลุ่มครอบครัวที่เฉพาะเจาะจง

https://www.googleapis.com/webfonts/v1/webfonts?family=family_name

ตระกูลฟอนต์ทั้งหมดที่รองรับชุดย่อยของภาษากรีก

https://www.googleapis.com/webfonts/v1/webfonts?subset=subset_name

กรองตามหมวดหมู่แบบอักษร

https://www.googleapis.com/webfonts/v1/webfonts?category=category_name

การเพิ่มประสิทธิภาพ

สำหรับการดึงไฟล์แบบอักษรที่บีบอัดในรูปแบบ woff2

https://www.googleapis.com/webfonts/v1/webfonts?capability=WOFF2

แบบอักษรที่ปรับแต่งได้

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

https://www.googleapis.com/webfonts/v1/webfonts?capability=VF

ตัวอย่างการตอบกลับ

{
 "kind": "webfonts#webfontList",
 "items": [
  [...]
  {
    "family": "Noto Sans Display",
    "variants": [
      "regular",
      "italic"
    ],
    "subsets": [
      "cyrillic",
      "cyrillic-ext",
      "greek",
      "greek-ext",
      "latin",
      "latin-ext",
      "vietnamese"
    ],
    "version": "v20",
    "lastModified": "2022-09-22",
    "files": {
      "regular": "http://fonts.gstatic.com/s/notosansdisplay/v20/RLplK4fy6r6tOBEJg0IAKzqdFZVZxokvfn_BDLxR.ttf",
      "italic": "http://fonts.gstatic.com/s/notosansdisplay/v20/RLpjK4fy6r6tOBEJg0IAKzqdFZVZxrktdHvjCaxRgew.ttf"
    },
    "category": "sans-serif",
    "kind": "webfonts#webfont",
    "menu": "http://fonts.gstatic.com/s/notosansdisplay/v20/RLpbK4fy6r6tOBEJg0IAKzqdFZVZxpMkXJMhnB9XjO1o90LuV-PT4Doq_AKp_3cKZTCa3g.ttf",
    "axes": [
      {
        "tag": "wdth",
        "start": 62.5,
        "end": 100
      },
      {
        "tag": "wght",
        "start": 100,
        "end": 900
      }
    ]
  },
  [...]
 ]
}

แท็ก

หากตั้งค่า capability=FAMILY_TAGS ไว้ ระบบจะป้อนข้อมูลในช่องแท็กด้วยแท็กทั้งหมดที่เกี่ยวข้องกับพื้นที่การออกแบบทั้งหมดของครอบครัว

ตัวอย่างตัวอย่าง

{
 "kind": "webfonts#webfontList",
 "items": [
  [...]
  {
    "family": "Noto Sans Display",
    "variants": [
      "regular",
      "italic"
    ],
    "subsets": [
      "cyrillic",
      "cyrillic-ext",
      "greek",
      "greek-ext",
      "latin",
      "latin-ext",
      "vietnamese"
    ],
    "version": "v20",
    "lastModified": "2022-09-22",
    "files": {
      "regular": "http://fonts.gstatic.com/s/notosansdisplay/v20/RLplK4fy6r6tOBEJg0IAKzqdFZVZxokvfn_BDLxR.ttf",
      "italic": "http://fonts.gstatic.com/s/notosansdisplay/v20/RLpjK4fy6r6tOBEJg0IAKzqdFZVZxrktdHvjCaxRgew.ttf"
    },
    "category": "sans-serif",
    "kind": "webfonts#webfont",
    "menu": "http://fonts.gstatic.com/s/notosansdisplay/v20/RLpbK4fy6r6tOBEJg0IAKzqdFZVZxpMkXJMhnB9XjO1o90LuV-PT4Doq_AKp_3cKZTCa3g.ttf",
    "tags": [
      {
        "name": "/Expressive/Business",
        "weight": 58
      },
      {
        "tag": "/Sans/Humanist",
        "weight": 100,
      }
    ]
  },
  [...]
 ]
}

ข้อกำหนด URL ของ API

webfonts?key=<your_key>[&family=<family>][&subset=<subset>][&capability=<capability>...][&sort=<sort>]

your_key: คีย์ API ของนักพัฒนาแอป

family: ชื่อชุดแบบอักษร

subset: ชื่อของแบบอักษรย่อย

category: serif | sans-serif | monospace | display | handwriting

capability: VF | WOFF2

sort: alpha | date | popularity | style | trending