# Font-face

The font-face plugin adds @font-face declarations in the @tailwind base directive.

# Configuration

The plugin can be configured with the theme.fontFace property :

module.exports = {
  theme: {
    fontFace: {
      MetaOT: [
        {
          filename: 'meta-ot-bold-italic',
          style: 'italic',
          weight: 700,
          display: 'auto',
        },
        {
          filename: 'meta-ot-regular',
        },
      ],
    },
  },
};


 
 
 
 
 
 
 
 
 
 
 
 
 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# fontFace.<String>

  • Type: Array.<FontFace>

An array of FontFace objects that will be attached to the font name given by the object's key.

# FontFace

  • Type: Object

The FontFace object describes the value that will be used to generate a @font-face declaration.

# FontFace.filename

  • Type: String
  • Required

The filepath withouth extension to the font file. The woff and woff2 formats will be used to generate the @font-face declaration.

# FontFace.display

  • Type: String
  • Default : 'auto'

The display of the font which will be used in a font-display property.

# FontFace.style

  • Type: String
  • Default : 'normal'

The style of the font which will be used in a font-style property.

# FontFace.weight

  • Type: [ String, Number ]
  • Default : 400

The weight of the font which will be used in a font-weight property.

# Output

Given the configuration in the above example, Tailwind will output a @font-face declaration like the following:

@font-face {
  font-family: MetaOT;
  font-weight: 700;
  font-style: italic;
  font-display: auto;
  src: url("meta-ot-bold-italic.woff2") format("woff2"),
    url("meta-ot-bold-italic.woff") format("woff");
}

@font-face {
  font-family: MetaOT;
  font-weight: 400;
  font-style: normal;
  font-display: auto;
  src: url("meta-ot-regular.woff2") format("woff2"),
    url("meta-ot-regular.woff") format("woff");
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Last Updated: 6/14/2021, 5:09:02 PM