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"; import { CodeExample } from "@/components/code-example.tsx"; export const title = "font-weight"; export const description = "Utilities for controlling the font weight of an element."; )", "font-weight: var();"], ["font-[]", "font-weight: ;"], ]} /> ## Examples ### Basic example Use utilities like `font-thin` and `font-bold` to set the font weight of an element:

{

font-light

The quick brown fox jumps over the lazy dog.

font-normal

The quick brown fox jumps over the lazy dog.

font-medium

The quick brown fox jumps over the lazy dog.

font-semibold

The quick brown fox jumps over the lazy dog.

font-bold

The quick brown fox jumps over the lazy dog.

} ```html

The quick brown fox ...

``` ### Using a custom value ### Responsive design ## Customizing your theme