In this video we will learn how to add or change typography

- **Add the typography in your project**

-- fastn.dependency: fastn-community.github.io/lobster-typography as my-types

-- import: my-types

- **Use the `types` property of the `ds.page` component** In the previous video, we created the custom component page in the `my-ds` document To highlight the benefit of this approach, there's no need to individually add the typography to each page. Instead, by adding the typography once and using `my-ds.page`, the color-scheme will be applied to all pages that utilize `my-ds.page`. And if one decides to go for another typography, then changing it once in my-ds document will reflect the new typography across the website.

-- component page:
optional caption title:
optional body body:
children wrapper:

-- ds.page: $page.title
body: $page.body
wrapper: $page.wrapper
types: $my-types.types

;; content goes here

-- end: ds.page

-- end: page

In conclusion, Typography plays a vital role in website creation, impacting readability, visual hierarchy, and brand identity, ultimately leading to a visually appealing and user-friendly website.

Thank you guys, keep watching these videos to learn more about fastn. Support us by giving a star ⭐ on [GitHub](https://github.com/fastn-stack/fastn/) and join our fastn community on [Discord](/discord/).