Hello 👋

This is Hamid Afghan a software developer, Building web and mobile applications with Laravel, JavaScript and Node JS. Here, I try to share everything about the technologies I work with and the life experiences. Check the list of articles or the recent posts below.

Blog

Tutorial

Life

Tailwind CSS – Add fonts from your local

Feb 16, 2022

Most of the time, you might need to include some custom and non-English font of your local files in your Tailwind CSS project.

If it is the Google font, so the trick much easy, include the CSS file in your input file and change the tailwind CSS configuration file. Described as bellow.

Google Font

The very first step is to find your font on google. Then copy the import statement and finally add in the very beginning of your input CSS file.

# input.css
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

The next step is to edit the tailwind configuration file and add your font name on `them.fontFamily`.

module.exports = {
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",
    ],
    theme: {
        fontFamily: {
            'sans': 'Roboto'
        }
    },
    plugins: [],
}

Custom Local Font

But if your font is not a Google font and you have it in your own machine then you need to create your own font face.

To do it, first, you need to locate the CSS file in your project (Laravel for now) `resources/fonts` directory.

Now it is time to create your own font faces in `resources/css/app.css` (Larvavel Project).

#resources/css/app.css

@font-face {
    font-family: 'bahij';
    font-weight: normal;
    src: url('../fonts/BahijNazanin-Regular.woff2') format('woff2');
}

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

Note: if there are separated font files for different font weights then you can create another font face with the same `font-family` name.

#resources/css/app.css

@font-face {
    font-family: 'bahij';
    font-weight: normal;
    src: url('../fonts/BahijNazanin-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'bahij';
    font-weight: bold;
    src: url('../fonts/BahijNazanin-Bold.woff') format('woff');
}

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

Note: if your font type is `ttf` then the format should be `format('turetype')`.

@font-face {
    font-family: 'bahij';
    font-weight: bold;
    src: url('../fonts/BahijNazanin-Bold.ttf') format('truetype');
}

Ok now is the time to edit your tailwind CSS configuration file.

module.exports = {
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",
    ],
    theme: {
        fontFamily: {
            'sans': 'bahij'
        }
    },
    plugins: [],
}

Nice, you are done now.

As a final tip please keep in your mind to add the directory `public/fonts` in `.gitignore` file.

Now run the command `npm run watch` for developing (Laravel project) or `npm run prod` for production.

The best