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)