Adding Google Font in Tailwind and SvelteKit
Include the font in your head
<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
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