Overview
Design
Frontend
Fullstack
Create Website
Blog
Design
Export typography as json
Use Figma Tokens with fastn color schemes
Create your own fastn color scheme from Figma json
Modify color scheme package
Create `font` package
Export typography as json
Typography json to FTD

Export typography as json

fastn supports exporting `ftd.type-data` variables as json. To export it as json you will need to use a processor named `figma-typo-token` to generate the equivalent json.

Example

Below mentioned example shows how to export `virgil-font-typography` as json.
Using `figma-typo-token` processor
Input
-- import: fastn-community.github.io/doc-site as ds
-- import: fifthtry.github.io/virgil-font-typography as virgil-typo

-- string virgil-typo-json:
$processor$: pr.figma-typo-token
variable: $virgil-typo.types
name: virgil-typography

-- ds.code: Virgil typography json
lang: json

$virgil-typo-json
Lang:
ftd
Output
Virgil typography json
{
"virgil-typography-desktop": {
"blockquote": {
"font-family": {
"value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
"type": "reference"
},
"size": {
"value": "14",
"type": "px"
},
"letter-spacing": {
"value": "0",
"type": "px"
},
"weight": {
"value": "400",
"type": "integer"
},
"line-height": {
"value": "16",
"type": "px"
}
},
"button-large": {
"font-family": {
"value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
"type": "reference"
},
"size": {
"value": "18",
"type": "px"
},
"letter-spacing": {
"value": "0",
"type": "px"
},
"weight": {
"value": "700",
"type": "integer"
},
"line-height": {
"value": "24",
"type": "px"
}
},
"button-medium": {
"font-family": {
"value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
"type": "reference"
},
"size": {
"value": "16",
"type": "px"
},
"letter-spacing": {
"value": "0",
"type": "px"
},
"weight": {
"value": "700",
"type": "integer"
},
"line-height": {
"value": "21",
"type": "px"
}
},
"button-small": {
"font-family": {
"value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
"type": "reference"
},
"size": {
"value": "14",
"type": "px"
},
"letter-spacing": {
"value": "0",
"type": "px"
},
"weight": {
"value": "700",
"type": "integer"
},
"line-height": {
"value": "19",
"type": "px"
}
},
"copy-large": {
"font-family": {
"value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
"type": "reference"
},
"size": {
"value": "20",
"type": "px"
},
"letter-spacing": {
"value": "0",
"type": "px"
},
"weight": {
"value": "400",
"type": "integer"
},
"line-height": {
"value": "28",
"type": "px"
}
},
"copy-regular": {
"font-family": {
"value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
"type": "reference"
},
"size": {
"value": "16",
"type": "px"
},
"letter-spacing": {
"value": "0",
"type": "px"
},
"weight": {
"value": "400",
"type": "integer"
},
"line-height": {
"value": "24",
"type": "px"
}
},
"copy-small": {
"font-family": {
"value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
"type": "reference"
},
"size": {
"value": "16",
"type": "px"
},
"letter-spacing": {
"value": "0",
"type": "px"
},
"weight": {
"value": "400",
"type": "integer"
},
"line-height": {
"value": "20",
"type": "px"
}
},
"fine-print": {
"font-family": {
"value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
"type": "reference"
},
"size": {
"value": "14",
"type": "px"
},
"letter-spacing": {
"value": "0",
"type": "px"
},
"weight": {
"value": "400",
"type": "integer"
},
"line-height": {
"value": "18",
"type": "px"
}
},
"heading-hero": {
"font-family": {
"value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
"type": "reference"
},
"size": {
"value": "52",
"type": "px"
},
"letter-spacing": {
"value": "0",
"type": "px"
},
"weight": {
"value": "700",
"type": "integer"
},
"line-height": {
"value": "60",
"type": "px"
}
},
"heading-large": {
"font-family": {
"value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
"type": "reference"
},
"size": {
"value": "40",
"type": "px"
},
"letter-spacing": {
"value": "0",
"type": "px"
},
"weight": {
"value": "700",
"type": "integer"
},
"line-height": {
"value": "48",
"type": "px"
}
},
"heading-medium": {
"font-family": {
"value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
"type": "reference"
},
"size": {
"value": "32",
"type": "px"
},
"letter-spacing": {
"value": "0",
"type": "px"
},
"weight": {
"value": "600",
"type": "integer"
},
"line-height": {
"value": "44",
"type": "px"
}
},
"heading-small": {
"font-family": {
"value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
"type": "reference"
},
"size": {
"value": "24",
"type": "px"
},
"letter-spacing": {
"value": "0",
"type": "px"
},
"weight": {
"value": "500",
"type": "integer"
},
"line-height": {
"value": "36",
"type": "px"
}
},
"heading-tiny": {
"font-family": {
"value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
"type": "reference"
},
"size": {
"value": "18",
"type": "px"
},
"letter-spacing": {
"value": "0",
"type": "px"
},
"weight": {
"value": "500",
"type": "integer"
},
"line-height": {
"value": "26",
"type": "px"
}
},
"label-large": {
"font-family": {
"value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
"type": "reference"
},
"size": {
"value": "16",
"type": "px"
},
"letter-spacing": {
"value": "0",
"type": "px"
},
"weight": {
"value": "400",
"type": "integer"
},
"line-height": {
"value": "22",
"type": "px"
}
},
"label-small": {
"font-family": {
"value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
"type": "reference"
},
"size": {
"value": "14",
"type": "px"
},
"letter-spacing": {
"value": "0",
"type": "px"
},
"weight": {
"value": "400",
"type": "integer"
},
"line-height": {
"value": "16",
"type": "px"
}
},
"link": {
"font-family": {
"value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
"type": "reference"
},
"size": {
"value": "14",
"type": "px"
},
"letter-spacing": {
"value": "0",
"type": "px"
},
"weight": {
"value": "700",
"type": "integer"
},
"line-height": {
"value": "19",
"type": "px"
}
},
"source-code": {
"font-family": {
"value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
"type": "reference"
},
"size": {
"value": "14",
"type": "px"
},
"letter-spacing": {
"value": "0",
"type": "px"
},
"weight": {
"value": "400",
"type": "integer"
},
"line-height": {
"value": "16",
"type": "px"
}
}
},
"virgil-typography-mobile": {
"blockquote": {
"font-family": {
"value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
"type": "reference"
},
"size": {
"value": "14",
"type": "px"
},
"letter-spacing": {
"value": "0",
"type": "px"
},
"weight": {
"value": "400",
"type": "integer"
},
"line-height": {
"value": "16",
"type": "px"
}
},
"button-large": {
"font-family": {
"value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
"type": "reference"
},
"size": {
"value": "18",
"type": "px"
},
"letter-spacing": {
"value": "0",
"type": "px"
},
"weight": {
"value": "700",
"type": "integer"
},
"line-height": {
"value": "24",
"type": "px"
}
},
"button-medium": {
"font-family": {
"value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
"type": "reference"
},
"size": {
"value": "16",
"type": "px"
},
"letter-spacing": {
"value": "0",
"type": "px"
},
"weight": {
"value": "400",
"type": "integer"
},
"line-height": {
"value": "21",
"type": "px"
}
},
"button-small": {
"font-family": {
"value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
"type": "reference"
},
"size": {
"value": "14",
"type": "px"
},
"letter-spacing": {
"value": "0",
"type": "px"
},
"weight": {
"value": "400",
"type": "integer"
},
"line-height": {
"value": "19",
"type": "px"
}
},
"copy-large": {
"font-family": {
"value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
"type": "reference"
},
"size": {
"value": "20",
"type": "px"
},
"letter-spacing": {
"value": "0",
"type": "px"
},
"weight": {
"value": "400",
"type": "integer"
},
"line-height": {
"value": "28",
"type": "px"
}
},
"copy-regular": {
"font-family": {
"value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
"type": "reference"
},
"size": {
"value": "16",
"type": "px"
},
"letter-spacing": {
"value": "0",
"type": "px"
},
"weight": {
"value": "400",
"type": "integer"
},
"line-height": {
"value": "24",
"type": "px"
}
},
"copy-small": {
"font-family": {
"value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
"type": "reference"
},
"size": {
"value": "16",
"type": "px"
},
"letter-spacing": {
"value": "0",
"type": "px"
},
"weight": {
"value": "400",
"type": "integer"
},
"line-height": {
"value": "20",
"type": "px"
}
},
"fine-print": {
"font-family": {
"value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
"type": "reference"
},
"size": {
"value": "14",
"type": "px"
},
"letter-spacing": {
"value": "0",
"type": "px"
},
"weight": {
"value": "400",
"type": "integer"
},
"line-height": {
"value": "18",
"type": "px"
}
},
"heading-hero": {
"font-family": {
"value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
"type": "reference"
},
"size": {
"value": "52",
"type": "px"
},
"letter-spacing": {
"value": "0",
"type": "px"
},
"weight": {
"value": "700",
"type": "integer"
},
"line-height": {
"value": "60",
"type": "px"
}
},
"heading-large": {
"font-family": {
"value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
"type": "reference"
},
"size": {
"value": "40",
"type": "px"
},
"letter-spacing": {
"value": "0",
"type": "px"
},
"weight": {
"value": "700",
"type": "integer"
},
"line-height": {
"value": "48",
"type": "px"
}
},
"heading-medium": {
"font-family": {
"value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
"type": "reference"
},
"size": {
"value": "32",
"type": "px"
},
"letter-spacing": {
"value": "0",
"type": "px"
},
"weight": {
"value": "600",
"type": "integer"
},
"line-height": {
"value": "44",
"type": "px"
}
},
"heading-small": {
"font-family": {
"value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
"type": "reference"
},
"size": {
"value": "24",
"type": "px"
},
"letter-spacing": {
"value": "0",
"type": "px"
},
"weight": {
"value": "500",
"type": "integer"
},
"line-height": {
"value": "36",
"type": "px"
}
},
"heading-tiny": {
"font-family": {
"value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
"type": "reference"
},
"size": {
"value": "18",
"type": "px"
},
"letter-spacing": {
"value": "0",
"type": "px"
},
"weight": {
"value": "500",
"type": "integer"
},
"line-height": {
"value": "26",
"type": "px"
}
},
"label-large": {
"font-family": {
"value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
"type": "reference"
},
"size": {
"value": "16",
"type": "px"
},
"letter-spacing": {
"value": "0",
"type": "px"
},
"weight": {
"value": "400",
"type": "integer"
},
"line-height": {
"value": "22",
"type": "px"
}
},
"label-small": {
"font-family": {
"value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
"type": "reference"
},
"size": {
"value": "14",
"type": "px"
},
"letter-spacing": {
"value": "0",
"type": "px"
},
"weight": {
"value": "400",
"type": "integer"
},
"line-height": {
"value": "16",
"type": "px"
}
},
"link": {
"font-family": {
"value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
"type": "reference"
},
"size": {
"value": "14",
"type": "px"
},
"letter-spacing": {
"value": "0",
"type": "px"
},
"weight": {
"value": "400",
"type": "integer"
},
"line-height": {
"value": "19",
"type": "px"
}
},
"source-code": {
"font-family": {
"value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
"type": "reference"
},
"size": {
"value": "14",
"type": "px"
},
"letter-spacing": {
"value": "0",
"type": "px"
},
"weight": {
"value": "400",
"type": "integer"
},
"line-height": {
"value": "16",
"type": "px"
}
}
}
}
virgil-typography.json
Lang:
json

Support `fastn`!

Enjoying `fastn`? Please consider giving us a star ⭐️ on [GitHub](https://github.com/fastn-stack/fastn) to show your support!
[⭐️](https://github.com/fastn-stack/fastn)

Getting Help

Have a question or need help? Visit our [GitHub Q&A discussion](https://github.com/fastn-stack/fastn/discussions/categories/q-a) to get answers and subscribe to it to stay tuned. Join our [Discord](https://discord.gg/a7eBUeutWD) channel and share your thoughts, suggestion, question etc. Connect with our [community](/community/)!
[💻️](/community/)

Found an issue?

If you find some issue, please visit our [GitHub issues](https://github.com/fastn-stack/fastn/issues) to tell us about it.

Quick links:

- [Install `fastn`](install/) - [Create `fastn` package](create-fastn-package/) - [Expander Crash Course](expander/) - [Syntax Highlighting in Sublime Text](/sublime/)

Join us

We welcome you to join our [Discord](https://discord.gg/a7eBUeutWD) community today. We are trying to create the language for human beings and we do not believe it would be possible without your support. We would love to hear from you.
Copyright © 2023 - [FifthTry.com](https://www.fifthtry.com/)