Custom fonts in Fresh + Twind

#deno #fresh #twind #googlefonts

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.

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More