# Adding Google Font in Tailwind and SvelteKit

## Include the font in your head

{% code title="./src/routes/+layout.svelte" %}
```html
<svelte:head>
	<link rel="preconnect" href="https://fonts.googleapis.com" />
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
	<link
		href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@100..900&display=swap"
		rel="stylesheet"
	/>
</svelte:head>
```
{% endcode %}

## Create a font family in Tailwind

{% code title="tailwind.config.js" %}
```javascript
export default {
	content: ['./src/**/*.{html,js,svelte,ts}'],
	theme: {
		extend: {

			fontFamily: {
				intertight: ["Inter Tight"]
			}
		}
	},
	plugins: []
};
```
{% endcode %}

## Setting it as default font

```html
<style lang="postcss">
	:root {
		@apply font-intertight;
	}
</style>
```
