How to connect and use a 3 custom fonts in a Nuxt3 project with your module and tailwind?

[CuberHuber]

No description provided.

[danielroe]

Would you provide more information? What are you trying?

[CuberHuber]

I found a solution to this problem.

I have 3 custom fonts called MyFont-Regular, MyFont-Light, MyFont-Bold in repo/public/fonts/. And I want to use them as tailwindcss classes.

1. You need to update nuxt config

//  nuxt.config.ts

module.exports = {
    // other configs
    theme: {
        extend: {
            fontFamily: {
                span: ['MyFont', 'sans-serif'],
                sans: ['MyFont', 'sans-serif'],
                display: ['MyFont', 'sans-serif'],
                custom: ['MyFont'],
            },
            fontWeight: {
                light: 300,
                normal: 400,
                bold: 700,
            },
        },
        utilities: {
            fontCustom: {
                fontFamily: 'MyFont',
            },
            fontLight: {
                fontWeight: 'light',
            },
            fontNormal: {
                fontWeight: 'normal',
            },
            fontBold: {
                fontWeight: 'bold',
            },
        },
    },
}

2. You need to create an app.css file in the project dir and add the following lines

// app.css

@tailwind;
@tailwind base;
@tailwind components;
@tailwind utilities;

    @font-face {
        font-family: 'MyFont';
        src: url('~public/fonts/MyFont-Light.otf');
        font-weight: 300;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'MyFont';
        src: url('~public/fonts/MyFont-Regular.otf');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'MyFont';
        src: url('~public/fonts/MyFont-Bold.otf');
        font-weight: 700;
        font-style: normal;
        font-display: swap;
    }

Example of using MyFont

<template>
    <span class="text-md text-cell-dark font-bold">{{ text }}</span>
</template>