font-mono utility class
The font-mono utility applies font-family: var(--font-mono) to an element. The CSS custom property defaults to: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace.
Tailwind CSS · Utilities reference · all subjects
font-family
13 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
font-(family-name) custom property syntax
You can reference a custom font family variable using the syntax font-(family-name:<custom-property>), which applies font-family: var(<custom-property>).
font-[value] arbitrary value syntax
You can use the font-[<value>] syntax to apply an arbitrary font-family value directly: font-family: <value>.
Font family utilities support responsive variants
Font family utilities like font-sans and font-serif support responsive design with breakpoint prefixes, allowing you to change the font family at different screen sizes.
font-sans utility class
The font-sans utility applies font-family: var(--font-sans) to an element. The CSS custom property defaults to: -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 utility class
The font-serif utility applies font-family: var(--font-serif) to an element. The CSS custom property defaults to: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif.
Custom font family with font-feature-settings
When customizing a font family in the theme, you can provide default font-feature-settings by defining a CSS custom property with the --<font-name>--font-feature-settings suffix. For example: --font-display--font-feature-settings: "cv02", "cv03", "cv04", "cv11";
Custom font family with font-variation-settings
When customizing a font family in the theme, you can provide default font-variation-settings by defining a CSS custom property with the --<font-name>--font-variation-settings suffix. For example: --font-display--font-variation-settings: "opsz" 32;
Using @font-face to load custom fonts
To load custom fonts, use the CSS @font-face at-rule. The @font-face rule must include font-family, font-style, font-weight, font-display, and src properties.
Importing Google Fonts in Tailwind CSS
When loading a font from Google Fonts or another service, place the @import url() statement at the very top of your CSS file before @import "tailwindcss". Browsers require @import statements to come before other rules, so URL imports must be above inlined imports like @import "tailwindcss".
Customizing font family theme example
Example of customizing a font family in the theme: @theme { --font-display: "Oswald", sans-serif; }. This creates a new font family that can be used with font-display class.
Complete @font-face example
@font-face { font-family: Oswald; font-style: normal; font-weight: 200 700; font-display: swap; src: url("/fonts/Oswald.woff2") format("woff2"); }
Google Fonts import example
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); @import "tailwindcss"; @theme { --font-roboto: "Roboto", sans-serif; }