How to add a custom font-family of google fonts like Poppins?

[Arpita-Jaiswal]

Reposting from another discussion

How to add a custom font-family of google fonts like Poppins?

[Arpita-Jaiswal]

To add a google font, here are the recommended steps:

1. Create a font package:
   Check out this link to know more.
   The created package will look somewhat similar to this repository
2. Add this package as a dependency to your package
   To achieve this, add -- fastn.dependency: fifthtry.github.io/roboto-font in FASTN.ftd of your package.
3. In the module, where you want to use this font, let's say in index.ftd. Add the following code:

   -- 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 case you don't want to create a font package:

• In FASTN.ftd

  -- import: fastn
  
  -- fastn.package: <package-name>
  
  -- fastn.font: Roboto
  style: normal
  weight: 400
  woff2: https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ.woff2
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
  

• In index.ftd

  -- import: <package-name>/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