Learn full-stack web development using fastn in a week
Learn Now
How to access fonts

How to access fonts

The assets module contains a variable named fonts that holds references to the fonts defined in a package.

You can either create your own font package or add the font package dependency in your current package or define fonts in your current package itself.

Lets say we are using font package fifthtry.github.io/roboto-font (repo) as dependency and lets use it in our module.

Let's assume that we are using the font package fifthtry.github.io/roboto-font (repo) as a dependency and we want to use it in our module. We can import the assets module of roboto-font package to access its fonts.
-- import: fifthtry.github.io/roboto-font/assets

-- ftd.type dtype:
size.px: 40
weight: 900
font-family: $assets.fonts.Roboto
line-height.px: 65
letter-spacing.px: 5

-- ftd.text: Hello World
role: $dtype
In FASTN.ftd module for fifthtry.github.io/roboto-font package, you can see that the fonts are defined like this:
-- fastn.font: Roboto
style: italic
weight: 100
woff2: -/fifthtry.github.io/roboto-font/static/Roboto-100-italic-cyrillic-ext.woff2
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F

<more fonts>
We have accessed these fonts using fonts variable which contains reference to Roboto ($assets.fonts.Roboto).