Tailwind CSS Font Family (original) (raw)

Last Updated : 23 Jul, 2025

This class accepts a lot of font names in tailwind CSS in which all the properties are covered in class form. It is the alternative to the CSS font-family property. This class is used to specify the font of an element. It can have multiple fonts as a backup system i.e. if the browser does not support one font then the other can be used.

**Font family classes:

• font-sans
• font-serif
• font-mono

**font-sans

This class is used to apply a websafe _sans-serif font family, like _ui-sans-serif, system-ui, _-apple-system, _BlinkMacSystemFont, "_Segoe UI", _Roboto, "_Helvetica Neue", _Arial, "_Noto Sans", _sans-serif, "_Apple Color Emoji", "_Segoe UI Emoji", "_Segoe UI Symbol", "_Noto Color Emoji", etc.

**Syntax:

...

**Example:

HTML `

GeeksforGeeks

`

**Output:

**font-serif

This class is used to apply a websafe serif font-family like _ui-serif, _Georgia, _Cambria, "_Times New Roman", _Times, _serif, etc.

**Syntax:

...

**Example:

HTML `

GeeksforGeeks

`

**Output:

**font-mono

This class is used to apply a websafe monospaced font-family like _ui-monospace, _SFMono-Regular, _Menlo, _Monaco, _Consolas, "_Liberation Mono", "_Courier New", _monospace, etc.

**Syntax:

...

**Example:

HTML `

GeeksforGeeks

`

**Output: