Font Family - Tailwind CSS

v4.1⌘KCtrl KDocsBlogShowcaseSponsorPlus

1. Typography
2. font-family

• Documentation
• Components
• Templates
• UI Kit
• Playground
• CourseNew
• Community

Getting started

• Installation
• Editor setup
• Compatibility
• Upgrade guide

Core concepts

• Styling with utility classes
• Hover, focus, and other states
• Responsive design
• Dark mode
• Theme variables
• Colors
• Adding custom styles
• Detecting classes in source files
• Functions and directives

Base styles

• Preflight

Layout

• aspect-ratio
• columns
• break-after
• break-before
• break-inside
• box-decoration-break
• box-sizing
• display
• float
• clear
• isolation
• object-fit
• object-position
• overflow
• overscroll-behavior
• position
• top / right / bottom / left
• visibility
• z-index

Flexbox & Grid

• flex-basis
• flex-direction
• flex-wrap
• flex
• flex-grow
• flex-shrink
• order
• grid-template-columns
• grid-column
• grid-template-rows
• grid-row
• grid-auto-flow
• grid-auto-columns
• grid-auto-rows
• gap
• justify-content
• justify-items
• justify-self
• align-content
• align-items
• align-self
• place-content
• place-items
• place-self

Spacing

• padding
• margin

Sizing

• width
• min-width
• max-width
• height
• min-height
• max-height

Typography

• font-family
• font-size
• font-smoothing
• font-style
• font-weight
• font-stretch
• font-variant-numeric
• letter-spacing
• line-clamp
• line-height
• list-style-image
• list-style-position
• list-style-type
• text-align
• color
• text-decoration-line
• text-decoration-color
• text-decoration-style
• text-decoration-thickness
• text-underline-offset
• text-transform
• text-overflow
• text-wrap
• text-indent
• vertical-align
• white-space
• word-break
• overflow-wrap
• hyphens
• content

Backgrounds

• background-attachment
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-size

Borders

• border-radius
• border-width
• border-color
• border-style
• outline-width
• outline-color
• outline-style
• outline-offset

Effects

• box-shadow
• text-shadow
• opacity
• mix-blend-mode
• background-blend-mode
• mask-clip
• mask-composite
• mask-image
• mask-mode
• mask-origin
• mask-position
• mask-repeat
• mask-size
• mask-type

Filters

• filter
  • blur
  • brightness
  • contrast
  • drop-shadow
  • grayscale
  • hue-rotate
  • invert
  • saturate
  • sepia
• backdrop-filter
  • blur
  • brightness
  • contrast
  • grayscale
  • hue-rotate
  • invert
  • opacity
  • saturate
  • sepia

Tables

• border-collapse
• border-spacing
• table-layout
• caption-side

Transitions & Animation

• transition-property
• transition-behavior
• transition-duration
• transition-timing-function
• transition-delay
• animation

Transforms

• backface-visibility
• perspective
• perspective-origin
• rotate
• scale
• skew
• transform
• transform-origin
• transform-style
• translate

Interactivity

• accent-color
• appearance
• caret-color
• color-scheme
• cursor
• field-sizing
• pointer-events
• resize
• scroll-behavior
• scroll-margin
• scroll-padding
• scroll-snap-align
• scroll-snap-stop
• scroll-snap-type
• touch-action
• user-select
• will-change

SVG

• fill
• stroke
• stroke-width

Accessibility

• forced-color-adjust

Typography

font-family

Utilities for controlling the font family of an element.

Class	Styles
font-sans	font-family: var(--font-sans); /* ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' */
font-serif	font-family: var(--font-serif); /* ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif */
font-mono	font-family: var(--font-mono); /* ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace */
font-(family-name:<custom-property>)	font-family: var(<custom-property>);
font-[<value>]	font-family: <value>;

Examples

Basic example

Use utilities like font-sans and font-mono to set the font family of an element:

font-sans

The quick brown fox jumps over the lazy dog.

font-serif

The quick brown fox jumps over the lazy dog.

font-mono

The quick brown fox jumps over the lazy dog.

<p class="font-sans ...">The quick brown fox ...</p><p class="font-serif ...">The quick brown fox ...</p><p class="font-mono ...">The quick brown fox ...</p>

Using a custom value

Use the font-[<value>] syntax to set the font family based on a completely custom value:

<p class="font-[Open_Sans] ..."> Lorem ipsum dolor sit amet...</p>

For CSS variables, you can also use the font-(family-name:<custom-property>) syntax:

<p class="font-(family-name:--my-font) ..."> Lorem ipsum dolor sit amet...</p>

This is just a shorthand for font-[family-name:var(<custom-property>)] that adds the var() function for you automatically.

Responsive design

Prefix a font-family utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<p class="font-sans md:font-serif ..."> Lorem ipsum dolor sit amet...</p>

Learn more about using variants in the variants documentation.

Customizing your theme

Use the --font-* theme variables to customize the font family utilities in your project:

@theme { --font-display: "Oswald", sans-serif; }

Now the font-display utility can be used in your markup:

<div class="font-display"> <!-- ... --></div>

You can also provide default font-feature-settings and font-variation-settings values for a font family:

@theme { --font-display: "Oswald", sans-serif; --font-display--font-feature-settings: "cv02", "cv03", "cv04", "cv11"; --font-display--font-variation-settings: "opsz" 32; }

If needed, use the @font-face at-rule to load custom fonts:

@font-face { font-family: Oswald; font-style: normal; font-weight: 200 700; font-display: swap; src: url("/fonts/Oswald.woff2") format("woff2");}

If you're loading a font from a service like Google Fonts, make sure to put the @import at the very top of your CSS file:

@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import "tailwindcss";@theme { --font-roboto: "Roboto", sans-serif; }

Browsers require that @import statements come before any other rules, so URL imports need to be above imports like @import "tailwindcss" which are inlined in the compiled CSS.

Learn more about customizing your theme in the theme documentation.

On this page

• Quick reference
• Examples
  • Basic example
  • Using a custom value
  • Responsive design
• Customizing your theme

Copyright © 2025 Tailwind Labs Inc.·Trademark Policy