Tipografía
Utilidades para controlar la familia tipográfica (font-family) de un elemento.
| Clase | Estilos |
|---|---|
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>; |
Utiliza utilidades como font-sans y font-mono para establecer la familia tipográfica de un elemento:
El veloz zorro marrón salta sobre el perro perezoso.
El veloz zorro marrón salta sobre el perro perezoso.
El veloz zorro marrón salta sobre el perro perezoso.
<p class="font-sans ...">El veloz zorro marrón ...</p><p class="font-serif ...">El veloz zorro marrón ...</p><p class="font-mono ...">El veloz zorro marrón ...</p>Usa la sintaxis font-[<value>] para establecer el/la familia tipográfica basándose en un valor completamente personalizado:
<p class="font-[Open_Sans] ..."> Lorem ipsum dolor sit amet...</p>Para variables CSS, también puedes usar la sintaxis font-(family-name:<custom-property>) :
<p class="font-(family-name:--my-font) ..."> Lorem ipsum dolor sit amet...</p>Esto es solo un atajo para font-[family-name:var(<custom-property>)] que añade la función var() por ti automáticamente.
Antepone a la utilidad font-family el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:
<p class="font-sans md:font-serif ..."> Lorem ipsum dolor sit amet...</p>Obtén más información sobre el uso de variantes en la documentación de variantes.
Usa las variables de tema --font-* para personalizar las utilidades de familia tipográfica en tu proyecto:
@theme { --font-display: "Oswald", sans-serif; }Ahora se puede usar la utilidad font-display en tu marcado:
<div class="font-display"> <!-- ... --></div>También puedes proporcionar valores predeterminados para font-feature-settings y font-variation-settings para una familia tipográfica:
@theme { --font-display: "Oswald", sans-serif; --font-display--font-feature-settings: "cv02", "cv03", "cv04", "cv11"; --font-display--font-variation-settings: "opsz" 32; }Si es necesario, utiliza la regla @font-face para cargar fuentes personalizadas:
@font-face { font-family: Oswald; font-style: normal; font-weight: 200 700; font-display: swap; src: url("/fonts/Oswald.woff2") format("woff2");}Si estás cargando una fuente desde un servicio como Google Fonts, asegúrate de colocar la regla @import en la parte superior de tu archivo CSS:
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import "tailwindcss";@theme { --font-roboto: "Roboto", sans-serif; }Los navegadores requieren que las declaraciones @import aparezcan antes que cualquier otra regla, por lo que las importaciones de URL deben estar por encima de importaciones como @import "tailwindcss", las cuales se incluyen en línea en el CSS compilado.
Obtén más información sobre cómo personalizar tu tema en la documentación del tema.