Font Families

Dolphin Components comes with three pre-configured, ready-to-use font families that are bundled with the package. No additional setup or font imports required!

---

Available Fonts

The package includes three professionally-selected font families:

Font Class	Font Family	Best For
font-kumbh	Kumbh Sans	Headings, titles, display text
font-open-sans	Open Sans	Body text, paragraphs, general content
font-roboto	Roboto	UI elements, buttons, forms

---

Usage

Simply apply the font class to any element to use that font family. These classes work seamlessly with Tailwind CSS utility classes.

Example

<template>
  <div>
    <!-- Using Kumbh Sans -->
    <h1 class="font-kumbh text-3xl font-bold">
      This is a heading with Kumbh Sans
    </h1>

    <!-- Using Open Sans -->
    <p class="font-open-sans text-base">
      This is body text with Open Sans, perfect for readable content.
    </p>

    <!-- Using Roboto -->
    <button class="font-roboto px-4 py-2 bg-blue-500 text-white">
      Click Me
    </button>
  </div>
</template>

Combining with Font Weights

You can combine font classes with Tailwind's font-weight utilities:

<template>
  <div class="font-open-sans">
    <p class="font-light">Light text (300)</p>
    <p class="font-normal">Normal text (400)</p>
    <p class="font-medium">Medium text (500)</p>
    <p class="font-semibold">Semibold text (600)</p>
    <p class="font-bold">Bold text (700)</p>
  </div>
</template>

---

Font Previews

Kumbh Sans (Used in sidebar)

<div class="pl-5 font-kumbh">
  <div>
    <span class="font-bold">Alphabet (Capital):</span>
    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
  </div>
  <div>
    <span class="font-bold">Alphabet (Small):</span>
    a b c d e f g h i j k l m n o p q r s t u v w x y z
  </div>
  <div>
    <span class="font-bold">Number:</span>
    1 2 3 4 5 6 7 8 9 0
  </div>
  <div>
    <span class="font-bold">Special Character:</span>
    ~ ` ! @ # $ % ^ & * () - _ + = {} [] : ; "" '' <> , . ? / | \
  </div>
</div>

Open Sans (Used in Content Pages)

<div class="pl-5 font-open-sans">
  <div>
    <span class="font-bold">Alphabet (Capital):</span>
    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
  </div>
  <div>
    <span class="font-bold">Alphabet (Small):</span>
    a b c d e f g h i j k l m n o p q r s t u v w x y z
  </div>
  <div>
    <span class="font-bold">Number:</span>
    1 2 3 4 5 6 7 8 9 0
  </div>
  <div>
    <span class="font-bold">Special Character:</span>
    ~ ` ! @ # $ % ^ & * () - _ + = {} [] : ; "" '' <> , . ? / | \
  </div>
</div>

Roboto (Used in Login Pages)

<div class="pl-5 font-roboto">
  <div>
    <span class="font-bold">Alphabet (Capital):</span>
    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
  </div>
  <div>
    <span class="font-bold">Alphabet (Small):</span>
    a b c d e f g h i j k l m n o p q r s t u v w x y z
  </div>
  <div>
    <span class="font-bold">Number:</span>
    1 2 3 4 5 6 7 8 9 0
  </div>
  <div>
    <span class="font-bold">Special Character:</span>
    ~ ` ! @ # $ % ^ & * () - _ + = {} [] : ; "" '' <> , . ? / | \
  </div>
</div>

Summary

• Three fonts included: Kumbh Sans, Open Sans, and Roboto
• No setup required: Fonts are bundled with the package
• Easy to use: Just add the class name (font-kumbh, font-open-sans, font-roboto)