Git Product home page Git Product logo

google-font-metadata's Introduction

Google Font Metadata

npm version License GitHub stars

A metadata generator that fetches and parses the Google Fonts API to be primarily used for the Fontsource monorepo.

google-fonts-v1.json uses the Google Fonts CSS APIv1 that includes different font files for every subset, but does NOT include unicode-range values.

google-fonts-v2.json uses CSS APIv2 and includes unicode-range values for every subset. However, the API serves woff/ttf files with ALL subsets included in one file and therefore all links for those file types in the same subset lead to the same link for each weight and style. woff2 files are individually split per subset.

Installation

Download via NPM

yarn add google-font-metadata // npm install google-font-metadata

Usage

const API = require("google-font-metadata") // Default leads to APIv2.
// const API = require("google-font-metadata/data/google-fonts-v1.json")

console.dir(API)

Returns an object list containing metadata of every available Google Font:

{
  "actor": {
    "family": "Actor",
    "id": "actor",
    "subsets": ["latin"],
    "weights": ["400"],
    "styles": ["normal"],
    "unicodeRange": {
      "latin": "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
    },
    "variants": {
      "400": {
        "normal": {
          "latin": {
            "local": ["Actor Regular", "Actor-Regular"],
            "url": {
              "woff2": "https://fonts.gstatic.com/s/actor/v9/wEOzEBbCkc5cO0ejVSk.woff2",
              "woff": "https://fonts.gstatic.com/s/actor/v9/wEOzEBbCkc5cO3en.woff",
              "truetype": "https://fonts.gstatic.com/s/actor/v9/wEOzEBbCkc5cO3ek.ttf"
            }
          }
        }
      }
    },
    "defSubset":"latin",
    "lastModified": "2019-07-16",
    "version": "v9",
    "category": "sans-serif"
  },
  ...
}

Things to note:

  • APIv1 does not have the unicodeRange key.
  • Fonts such as Noto Sans JP, typically for large fontsets such as Japanese, Korean or Chinese, are divided into many smaller subsets that utilize the unicode-range @fontface selector such as subset [118] in APIv2.

Update API files

Initially run node ./scripts/api-gen.js $KEY within the main directory to fetch basic details from Google's servers. $KEY must be substituted with a Google Fonts API Key that can be created here.

Run npm run parse:v1 or npm run parse:v2 to parse through all the fonts to generate the metadata for each of the respective CSS APIs.

To update the API while using this as a dependency, it is recommended you use npm explore google-font-metadata -- <run script command> to run the neccesary commands. Note everytime you update or change your dependencies, the files will be reset to its older state, therefore it's recommended to integrate this into your CI/CD process.

Other Notes

Feel free to star and contribute new ideas that aim to improve the repository. Any suggestions or ideas can be voiced via an issue.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.