Cambiando las propiedades de la tipografía

@font-faces

Para aprovechar la regla @font-facepara realizar cualquier personalización fuera de Tailwindcss modificamos el archivo CSS principal de la siguiente manera:

@tailwind base;

@font-face {
  font-family: Proxima Nova;
  font-weight: 400;
  src: url(/fonts/proxima-nova/400-regular.woff) format("woff");
}
@font-face {
  font-family: Proxima Nova;
  font-weight: 500;
  src: url(/fonts/proxima-nova/500-medium.woff) format("woff");
}

@tailwind components;

@tailwind utilities;

Nota. Para definir cualquier personalización hacia los estilos base, agregamos nuestros estilos después de @tailwind base y antes de @tailwind components para evitar problemas de compilación.

Se puede cambiar:

• Tipo de letra.
• Tamaño.
• Cursiva y negrita.

Se aplican clases como:
text-3xl font-sans font-light

Se puede consultar la documentación en:
https://tailwindcss.com/docs/font-family/#app
https://tailwindcss.com/docs/font-weight/#app
https://tailwindcss.com/docs/font-size/#app

Veo muy floja la clase, no explican como utilizar otras tipografiás.Por ejemplo yo estooy aprendiendo NextJS (“De la documentación por que el curso es fatal”) y me gustaria saber como integrarlo.

Ya no existe font-hairline, la cambiaron por font-thin este tiene un font-weight de 100.

Me gusta aunque veo que se generaran clases largaaaas

Todo se ve genial 😄

Con las clases de Font Weight se puede incrementar el peso de la fuente, les comparto la siguiente tabla:

Fuente: https://tailwindcss.com/docs/font-weight

A mi no me estaba mostrando la fuente font-mono, en su lugar me mostraba la apariencia la variante sans. Aparentemente tuve un problema con la compilación de Tailwind, ya que pude solucionar este problema simplemente volviendo a compilar con el comando:

npm run build

va a estar bueno cambiar la tipografia para alguna secciones del sitio.

Para los nuevos que esten aqui, ya no existe font-hairline, el minimo ahora es font-thin, y lo que antes era el thin, ahora es font-extralight
Para este tipo de cambios no olviden ver la documentacion
https://tailwindcss.com/docs/font-weight

No es dificil mantener este codigo? es que parece que todos los estilos quedan en el html y genera clases muy largas. No se, me causa ruido.

Si quiero poner una nueva tipografía de google fonts como puedo hacerlo?

Les dejo el link directo para FontSize https://tailwindcss.com/docs/font-size/#app

https://tailwindcss.com/docs/fonts

Las características que puedes cambiar de las fuentes son:

• Tipo de letra
• Tamaño
• Cursiva
• Negrita

Según la documentación de Tailwind font-hairline (ya) no existe.
__

__

Pero podemos usar font-thin que tiene el mismo estilo.

italic /Cursiva
font-bold /Negrita
font-extrabold /Mas negrita que font-bold
font-light /Letra delgada
font-extralight/

Les comparto algunos cambios que vi en la documentación en enero del 2021

sf