Adding Google Font in Tailwind and SvelteKit

Include the font in your head

./src/routes/+layout.svelte
<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>

Create a font family in Tailwind

tailwind.config.js
export default {
	content: ['./src/**/*.{html,js,svelte,ts}'],
	theme: {
		extend: {

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

Setting it as default font

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

Last updated