font-family
En esta página
| Clase | Propiedades CSS |
|---|---|
font-sans |
font-family: var(--font-sans); /* -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, 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.
<!-- [!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>
Using a custom value#
Responsive design#
Customizing your theme#
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"; /* [!code highlight] */
--font-display--font-variation-settings: "opsz" 32; /* [!code highlight] */
}
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"); /* [!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.