Cyber Week Offer

Save up to $120 on Viome tests right now!

Font Examples

Using Label Component

Tiempos Headline Bold (700) - Display 1

Calibre Bold (700) - Headline 1

TWK Lausanne 300 - Paragraph 1

Using Tailwind CSS Directly

Tiempos Headline Bold (700) - Direct Tailwind

Calibre Bold (700) - Direct Tailwind

TWK Lausanne 300 - Direct Tailwind

Calibre Light (300) - Direct Tailwind

Tiempos Fonts - Tailwind CSS

Tiempos Headline Light (300)

Tiempos Headline Regular (400)

Tiempos Headline Medium (500)

Tiempos Headline Semibold (600)

Tiempos Headline Bold (700)

Calibre Fonts - Tailwind CSS

Calibre Thin (100)

Calibre Light (300)

Calibre Regular (400)

Calibre Medium (500)

Calibre Semibold (600)

Calibre Bold (700)

TWK Lausanne Fonts - Tailwind CSS

TWK Lausanne 100

TWK Lausanne 300

TWK Lausanne 500

TWK Lausanne 700

How to Use Fonts

Method 1: Using Label Component

<Label variant="headline1" fontFamily="tiemposHeadlineBold">
Your text here
</Label>

Method 2: Using Tailwind CSS Directly

<h1 className="font-tiempos-headline-bold text-3xl">
Your text here
</h1>

Available Tailwind Font Classes:

  • font-tiempos-headline-bold - Bold headlines
  • font-calibre-bold - Bold text
  • font-twk-lausanne-300 - Light body text
  • font-twk-lausanne-600 - Medium weight text
  • font-calibre-light - Light text