You can customize Tailwind if it was installed as a dependency to your project using npm install tailwindcss

Steps:

• copy the downloaded font and place it inside a fonts folder inside your project.

• run npx tailwind init, to generate an empty tailwind.config.js

• Inside tailwind.config.js add fontFamily inside extend and specify the font family to override (Tailwind's default family is sans). Place the newly added font family at the beginning (order matters)

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'sans': ['Roboto', 'Helvetica', 'Arial', 'sans-serif']
      }
    },
  },
  variants: {},
  plugins: []
}

Important: Using extend will add the newly specified font families without overriding Tailwind's entire font stack.

Then in the main tailwind.css file (where you import all of tailwind features), you can import your local font family. Like this:

@tailwind base;
@tailwind components;

@font-face {
  font-family: 'Roboto';
  src: local('Roboto'), url(./fonts/Roboto-Regular.ttf) format('ttf');
}

@tailwind utilities;

Now recompile the CSS. If you're following Tailwind's documentation, this is typically done using postcss:

postcss css/tailwind.css -o public/tailwind.css

If you're not using postcss, you can run:

npx tailwindcss build css/tailwind.css -o public/tailwind.css

Your newly added font family should now be rendered.

1 - extract the downloaded font into a file ex './fonts 2 - create a stylesheet int the same folder and add this code:

@font-face {
font-family: 'x-font-name';
src: local('x-font-name'), local('x-font-name'),
    url('x-font-name.woff2') format('woff2'),
    url('x-font-name.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;

}

3 - import the stylesheet into input.css where you already have base,components and utilities ex:

   @import url('./assets/fonts/stylesheet.css');

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

4 - Go to tailwind.config add your font to theme extend ex :

theme: {
  extend: {
   fontFamily: {
    'FontName': ['x-font-name','Roboto'],
    'FontName-2': ['x-name-2','Roboto']
   }
  },
},

5 - use it in the HTML ex : class="font-FontName"

Step 1:​ Download the font and save it locally You go to the ​Download Family ​button at the top right and you will get a zip or folder with different font weights. From what we downloaded, we move the file ​static/​Oswald-Bold.ttf​ ​to a ​new folder /dist/fonts/Oswald ,​ which we create.

Step 2​: Import the font locally In the ​tailwind.css ​within ​@layer base​ and above the headings we add:

@font-face {
font-family: Oswald;
src: url(/dist/fonts/Oswald/Oswald-Bold.ttf) format("​truetype​") or ttf;

If we now run ​npm run watch​, the font-family is immediately compiled into styles.css, and if we search for “Oswald” we get: Tip: ​If something doesn't work, you can click on the link in the URL while holding down the “CTRL” key to see if the path is correct!

**Step 3:**​ Extend the Tailwindcss theme In the ​tailwind.config.js ​we add under “​theme​” and “​extend​”:

theme: {
extend: {
fontFamily: {
headline: ['Oswald']
}
},

The name “headline” ​can be chosen freely​ here!

We can add a custom font-family in tailwind in 2 steps:

1. Add custom font

We can import font from fonts.googleapis.com and add it to index.html head or we can use @import, @font-face:

<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">

2. Extend tailwind font-family

Next, I will extend tailwind font-family sans in tailwind.config.js:

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  purge: [],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Raleway', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  variants: {},
  plugins: [],
}

My way, full plugin style, one local font, one https font, no need @import, no need <link>:

// tailwind.config.js
const plugin = require('tailwindcss/plugin');
const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      fontFamily: {
        'sans': ['Red Hat Display', ...defaultTheme.fontFamily.sans],
        'damion': ['Damion'],
      }
    }
  },
  variants: {
    extend: {},
  },
  plugins: [
    plugin(function ({ addBase }) {
      addBase({
        '@font-face': {
            fontFamily: 'Red Hat Display',
            fontWheight: '300',
            src: 'url(/src/common/assets/fonts/RedHatDisplay-VariableFont_wght.ttf)'
        }
      })
    }),
    plugin(function ({ addBase }) {
      addBase({
        '@font-face': {
            fontFamily: 'Damion',
            fontWheight: '400',
            src: 'url(https://fonts.gstatic.com/s/damion/v10/hv-XlzJ3KEUe_YZkamw2.woff2) format(\'woff2\')'
        }
      })
    }),
  ],
}

I know this is for JavaScript, but if anyone is using this for Flask and Tailwind CSS (as I was) here is what I had to do. I put the font face in a separate CSS file in my static folder. In my HTML templates, I just linked the style sheet after linking my Tailwind CSS file.

<link rel="stylesheet" href="{{ url_for('static', filename='gameStyles.css') }}"/>
<link rel="stylesheet" href="{{ url_for('static', filename='styles2.css') }}"/>

And just for reference, here is what I put in my styles2.css:

@font-face {
    font-family: 'reg';
    src: url(../static/ObjectSans-Regular.otf);
}

@font-face {
    font-family: 'bol';
    src: url(../static/ObjectSans-Heavy.otf);
}

body {
    font-family: 'reg';
}

h1 {
    font-family: 'bol';
}

It would be nice if there was a better way to do this, but this was the only way I could get it to work. Hopefully this helps!

@Juan Marcos' answer is correct but slightly deprecated. As of v2.1.0, Tailwind recommends in their docs to use the @layer directive for loading local fonts:

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

@layer base {
  @font-face {
    font-family: Proxima Nova;
    font-weight: 400;
    src: url(/fonts/proxima-nova/400-regular.woff) format("woff");
  }
  @font-face {
    font-family: Proxima Nova;
    font-weight: 500;
    src: url(/fonts/proxima-nova/500-medium.woff) format("woff");
  }
}

By using the @layer directive, Tailwind will automatically move those styles to the same place as @tailwind base to avoid unintended specificity issues.

Using the @layer directive will also instruct Tailwind to consider those styles for purging when purging the base layer. Read our documentation on optimizing for production for more details.

See: https://tailwindcss.com/docs/functions-and-directives#layer

i just add this @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;500&display=swap'); inside index.css and update tailwind.config.js with the following :

theme: {
      fontFamily: {
        sans: ['Roboto', 'Helvetica', 'Arial', 'sans-serif'],
        serif: ['Merriweather', 'serif'],
      },