Package Exports

google-fonts-css2

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (google-fonts-css2) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Google Fonts CSS2

This package is supposed to be an agnostic and fast helper package to interact with Google Fonts API version 2.

React Component: https://github.com/adriano-tirloni/react-google-fonts-css2

URL Builder:

URL Builder for V2 has 2 functions: assembleCommom - working assembleFull - to be developed as needed

assembleCommon: This function works as described below, and will request fonts with styles varying on weight and being italic. It was developed to be fast and not to include all possible scenarios. For the full flexible API there is the assembleFull function.
assembleFull: not developed - This function will take a different structure from assembleCommon to be able to render the full spec of Google Font API axis:

Italic - ital
Optical Size - opsz
Slant - slnt
Weight - wght
Width - wdth
Casual - CASL
Cursive - CRSV
Expression - XPRN
Grade - GRAD
Monospace - MONO
Softness - SOFT
Wonkiness - WONK

https://developers.google.com/fonts/docs/css2 https://fonts.google.com/variablefonts

Usage:

const { assembleCommon } =  require("google-fonts-css2"
//or
import { assembleCommon } from "google-fonts-css2"

// assembleCommon(Array:families, String:display)

  let url = assembleCommon([
    {
      family: "Cabin",    // Family Name
      styles: [
        "600..700",       // Range, if family supports it.
        "100..200italic", // Range with italic
        "300italic",      // Weight with italic
        "regular",        // Shortcut to 400
        "italic",         // Shortcut to 400 Italic
        "500",            // Regular with weight
        444               // Regular weight for variable font
      ]
    },
    {
      family: "Roboto",   // Family Name - Roboto doesn't support ranges
      styles: [
        "300italic",      // Weight with italic
        "regular",        // Shortcut to 400
        "italic",         // Shortcut to 400 Italic
        "500",
        100
      ]
    },
  ], 'swap')              // Display Style


// The output will be:
"https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400;0,444;0,500;0,600..700;1,100..200;1,300;1,400;1,600..700&family=Roboto:ital,wght@0,100;0,400;0,500;1,300;1,400&display=auto"

Check it here: https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400;0,444;0,500;0,600..700;1,100..200;1,300;1,400;1,600..700&family=Roboto:ital,wght@0,100;0,400;0,500;1,300;1,400&display=auto

Example | Test

Run:

git clone git@github.com:adriano-tirloni/google-fonts-css2.git
yarn
yarn build:dev
node ./src/example.js