# to-css-font-import

## Interface

```typescript
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

<table data-full-width="true"><thead><tr><th width="229">Parameter</th><th width="110">Required</th><th width="179">Type</th><th width="302">Default</th><th width="288">Description</th></tr></thead><tbody><tr><td><code>formats</code></td><td><code>false</code></td><td><code>Array&#x3C;string></code></td><td><code>['woff', 'woff2']</code></td><td>The list of formats to import.</td></tr><tr><td><code>fontsPath</code></td><td><code>false</code></td><td><code>string</code></td><td></td><td>The path of font's directory.</td></tr><tr><td><code>includeFontWeight</code></td><td><code>false</code></td><td><code>boolean</code></td><td></td><td>Allow to include the font-weight property in the result.</td></tr><tr><td><code>genericFamily</code></td><td><code>false</code></td><td><code>string</code></td><td></td><td>The generic font family will be applied after the main font family.</td></tr><tr><td><code>fontDisplay</code></td><td><code>false</code></td><td><code>string</code></td><td><code>swap</code></td><td>How your font face is displayed based on whether and when it is downloaded and ready to use.</td></tr></tbody></table>

## Basic usage

{% tabs %}
{% tab title="Input" %}
{% code lineNumbers="true" %}

```json
{
  "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"
            }
          ]
        }
      }
    }
  }
}
```

{% endcode %}
{% endtab %}

{% tab title="Config" %}
{% code title=".specifyrc.json" lineNumbers="true" %}

```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/"
          }
        }
      ]
    }
  ]
}
```

{% endcode %}
{% endtab %}

{% tab title="Output" %}
{% code title="public/fonts.css" lineNumbers="true" %}

```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;
}
```

{% endcode %}
{% endtab %}
{% endtabs %}