> For the complete documentation index, see [llms.txt](https://phoenixcoded.gitbook.io/saasable/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://phoenixcoded.gitbook.io/saasable/ui-kit-v1.1.0/theming/typography/font-family.md).

# Font Family

This docs cover how can you add or update fant family for specific theme

1. Import new package for font family (Ignore if you want to use existing and provided font family with saasable). To add free Google fonts refer [google fonts](https://fonts.google.com/)
2. Update the config to consider new font family and export it.

{% tabs %}
{% tab title="src/config.ts" %}

```typescript
// @next
import { Archivo, Figtree, Roboto } from 'next/font/google'; // Add new font family

// Create variable for font family
const fontRobot = Roboto({ subsets: ['latin'], weight: ['100', '300', '400', '500', '700', '900'] });

// Export the new font family
export const FONT_ROBOTO: string = fontRobot.style.fontFamily;
```

{% endtab %}
{% endtabs %}

3. Update the typography to apply to the chosen theme. 

{% tabs %}
{% tab title="src/views/landings/ai/theme/typography.ts" %}

<pre class="language-typescript"><code class="lang-typescript">import { Theme } from '@mui/material/styles';

// @project
import { FONT_ROBOTO } from '@/config'; // refer new font family

export default function typography(theme: Theme) {
  return {
<strong>    fontFamily: FONT_ROBOTO, // change font
</strong>    // other settings
  };
}
</code></pre>

{% endtab %}
{% endtabs %}