Prologue

I was working in a project that used deno as javascript runtime alongside fresh as web framework. And I couldn't find easly how to import a front. Here I would like to tell you how I managed to add the font.

Prerequisites

This post assumes you are working on a fresh project and use Tailwind CSS for styling library.

1. Find Your Font

To choose your font you can go to Google Fonts and search the one you want, for the sake of this tutorial we will be looking for the Fredoka font.

2. Get the Embed Code

Once you have chosen your font:

• Click on the font;
• Hit the Get font then Get embed code button;
• Navigate to the "Get embed code" section;
• Select @import;
• Copy the @import url('https::/fonts/googleapis.com ... display=swap'); code snippets.

3. Edit tailwind configuration

Open your tailwind.config.ts file and add the following:

import { type Config } from "tailwindcss";

export default {
  content: [
    "{routes,islands,components}/**/*.{ts,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        'fredoka': ['"Fredoka"', 'sans-serif'],
      },
    },
  },
  plugins: [],
} satisfies Config;

4. Import the Font

Finally, open your styles.css file and add the following line:

@import url('https://fonts.googleapis.com/css2?family=Fredoka&display=swap');

Conclusion

You now can add your font to you tsx 🚀!