Font Family - Tailwindcss

import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourTheme, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx";

export const title = "font-family"; export const description = "Utilities for controlling the font family of an element.";

<ApiTable rows={[ [ "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:

<Figure> <Example> { <div className="flex flex-col gap-8"> <div> <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">font-sans</span> <p className="font-sans text-lg font-medium text-gray-900 dark:text-gray-200"> The quick brown fox jumps over the lazy dog. </p> </div> <div> <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">font-serif</span> <p className="font-serif text-lg font-medium text-gray-900 dark:text-gray-200"> The quick brown fox jumps over the lazy dog. </p> </div> <div> <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">font-mono</span> <p className="font-mono text-lg font-medium text-gray-900 dark:text-gray-200"> The quick brown fox jumps over the lazy dog. </p> </div> </div> } </Example>

html

<!-- [!code classes:font-sans,font-serif,font-mono] -->
<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>

</Figure>

Using a custom value

Responsive design

Customizing your theme

<CustomizingYourTheme utility="font" name="font family" customName="display" customValue='"Oswald", sans-serif'

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

css

@theme {
  --font-display: "Oswald", sans-serif;
  --font-display--font-feature-settings: "cv02", "cv03", "cv04", "cv11"; /* [!code highlight] */
  --font-display--font-variation-settings: "opsz" 32; /* [!code highlight] */
}

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

css

@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:

css

@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); /* [!code highlight] */
@import "tailwindcss";

@theme {
  --font-roboto: "Roboto", sans-serif; /* [!code highlight] */
}

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.

</CustomizingYourTheme>