> For the complete documentation index, see [llms.txt](https://codedthemes.gitbook.io/datta/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codedthemes.gitbook.io/datta/datta-able-vue/theme-config/theme-config-1.md).

# Change Typography

Manage the theme Typography in one shot.

1. **Install the font family** you want to use from Fontsource.
   * Refer to the official guide: [Fontsource - Getting Started](https://fontsource.org/).   
2. **Replace the old font family with your new one.** 
   * To do this, open `src/main.ts`.
   * Update the Google Fonts import section with your new font.

     ```typescript
     // google-fonts - update here & add new fonts
     import '@fontsource/open-sans/300.css'
     import '@fontsource/open-sans/400.css'
     import '@fontsource/open-sans/500.css'
     import '@fontsource/open-sans/600.css'
     ```

 3\. For Change Typography - Go to `src/assets/scss/settings/_bootstrap-variables.scss` 

{% code title="\_bootstrap-variables.scss" %}

```scss
$font-family-sans-serif: 'Open Sans', sans-serif; // change
```

{% endcode %}