tailwind use font from local files globally

Question

Currently I'm doing this in my style tags

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

* {
  font-family: 'Roboto', sans-serif;
}

but I downloaded the Roboto font and would like to know how I can configure Tailwind to use those files and the font globally for all elements.

Sidenote:

I'm using Vuejs and followed the guide on how to setup Tailwind for Vue from here

https://www.youtube.com/watch?v=xJcvpuELcZo

Answer 1

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: [],
}

Answer 2

My way, full plugin style, one local font, one https font, no need for @import, no need for <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',
            fontWeight: '300',
            src: 'url(/src/common/assets/fonts/RedHatDisplay-VariableFont_wght.ttf)'
        }
      })
    }),
    plugin(function ({ addBase }) {
      addBase({
        '@font-face': {
            fontFamily: 'Damion',
            fontWeight: '400',
            src: 'url(https://fonts.gstatic.com/s/damion/v10/hv-XlzJ3KEUe_YZkamw2.woff2) format(\'woff2\')'
        }
      })
    }),
  ],
}

Answer 3

1 - extract the downloaded font into a file ex ./fonts

2 - create a stylesheet in 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 the tailwind config file and 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"

Answer 4

@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

See also: Customizing the default font

Answer 5

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!

Answer 6

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'],
      },

Answer 7

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!

Answer 8

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.