to-css-font-import

This parser helps you create CSS @font-face rules to import your font files.

Interface

interface parser {
  name: 'to-css-font-import';
  output: {
    type: 'file';
    filePath: string;
  };
  options?: {
    formats?: Array<'woff' | 'woff2' | 'ttf' | 'otf' | 'eot'>;
    fontsPath?: string;
    includeFontWeight?: boolean;
    genericFamily?: string;
    fontDisplay?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
  };
}

Options

Parameter	Required	Type	Default	Description
formats	false	Array<string>	['woff', 'woff2']	The list of formats to import.
fontsPath	false	string		The path of font's directory.
includeFontWeight	false	boolean		Allow to include the font-weight property in the result.
genericFamily	false	string		The generic font family will be applied after the main font family.
fontDisplay	false	string	swap	How your font face is displayed based on whether and when it is downloaded and ready to use.

Basic usage

Input

{
  "font": {
    "interRegular": {
      "$type": "font",
      "$value": {
        "default": {
          "family": "Inter",
          "postScriptName": "Inter Regular",
          "weight": "regular",
          "style": "normal",
          "files": [
            {
              "format": "ttf",
              "url": "https://static.specifyapp.com/sdtf-seeds/inter-regular.ttf",
              "provider": "Specify"
            }
          ]
        }
      }
    },
    "interMedium": {
      "$type": "font",
      "$value": {
        "default": {
          "family": "Inter",
          "postScriptName": "Inter Medium",
          "weight": "medium",
          "style": "normal",
          "files": [
            {
              "format": "ttf",
              "url": "https://static.specifyapp.com/sdtf-seeds/inter-medium.ttf",
              "provider": "Specify"
            }
          ]
        }
      }
    },
    "interBold": {
      "$type": "font",
      "$value": {
        "default": {
          "family": "Inter",
          "postScriptName": "Inter Bold",
          "weight": "bold",
          "style": "normal",
          "files": [
            {
              "format": "ttf",
              "url": "https://static.specifyapp.com/sdtf-seeds/inter-bold.ttf",
              "provider": "Specify"
            }
          ]
        }
      }
    },
    "firaCodeRegular": {
      "$type": "font",
      "$value": {
        "default": {
          "family": "Fira Code",
          "postScriptName": "Fira Code Regular",
          "weight": "regular",
          "style": "normal",
          "files": [
            {
              "format": "ttf",
              "url": "https://static.specifyapp.com/sdtf-seeds/fira-code-regular.ttf",
              "provider": "Specify"
            }
          ]
        }
      }
    }
  }
}

Config

.specifyrc.json

{
  "version": "2",
  "repository": "@organization/repository",
  // Only use the personalAccessToken when working with the CLI
  "personalAccessToken": "<your-personal-access-token>",
  "rules": [
    {
      "name": "Generate font imports",
      "parsers": [
        {
          "name": "to-css-font-import",
          "output": {
            "type": "file",
            "filePath": "public/fonts.css"
          },
          "options": {
            "fontsPath": "assets/fonts/"
          }
        }
      ]
    }
  ]
}

Output

public/fonts.css

@font-face {
	font-family: 'Fira Code';
	src: url('assets/fonts/Fira Code.woff') format('woff'), url('assets/fonts/Fira Code.woff2') format('woff2');
	font-display: swap;
	font-weight: regular;
}
@font-face {
	font-family: 'Inter';
	src: url('assets/fonts/Inter.woff') format('woff'), url('assets/fonts/Inter.woff2') format('woff2');
	font-display: swap;
	font-weight: bold;
}
@font-face {
	font-family: 'Inter';
	src: url('assets/fonts/Inter.woff') format('woff'), url('assets/fonts/Inter.woff2') format('woff2');
	font-display: swap;
	font-weight: medium;
}
@font-face {
	font-family: 'Inter';
	src: url('assets/fonts/Inter.woff') format('woff'), url('assets/fonts/Inter.woff2') format('woff2');
	font-display: swap;
	font-weight: regular;
}