To add fonts to your Fresh project, you don't need any extra dependencies:
1- Go to Google Fonts and choose your preferred fonts.
2- Select the desired font styles and copy the link:
3- Paste that link into your Fresh project's main index, under the <head> tag:
// routes/index.tsx
<Head>
...
<link rel='shortcut icon' href='/favicon.png' type='image/png' />
<link rel='preconnect' href='https://fonts.googleapis.com' crossOrigin="true"/>
<link rel='preconnect' href='https://fonts.gstatic.com' />
<link
href='https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;600;800&display=swap'
rel='stylesheet'
/>
</Head>
4- Configure Twind to use the imported fonts:
// utils/twind.ts
import { IS_BROWSER } from "$fresh/runtime.ts";
import { Configuration, setup } from "twind";
export * from "twind";
export const config: Configuration = {
darkMode: "class",
mode: "silent",
theme: {
fontFamily: {
sans: ["Inter", "sans-serif"],
},
},
};
if (IS_BROWSER) setup(config);
That's it! If you have any question, feel free to ask me.
Top comments (0)