Tailwind CSS tutorial #15: Font Family

In the article, we will go into detail on how to use font-family.

Font Family

Format

font-{sans|serif|mono}

Alignment	Tailwind Class	CSS Property
Sans	font-sans	font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
Serif	flex-row-reverse	font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
Mono	flex-col	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

let's see each of this in action,

Font-Sans

This class is used to apply a websafe sans-serif font family, like ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI“, Roboto, “Helvetica Neue“, Arial, “Noto Sans“, sans-serif, “Apple Color Emoji“, “Segoe UI Emoji“, “Segoe UI Symbol“, “Noto Color Emoji“, etc.

  <li class="flex items-center justify-between px-4 py-2">
    <div>
      <div class="font-sans font-light text-5xl align-middle mb-2">Font Sans</div>
      <p class="font-sans text-md leading-tight">Rex is the Mayor of Binaryville and a well-loved personality in town. He rose to robotdom from a microprocessor plant on the south side of town, where many famous and influential robots before him were conceived.</p>
      <div class="text-xs font-mono font-light leading-tight text-gray-500 mt-2"><span class="font-bold">font-family</span>: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";</div>
    </div>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">font-sans</div>
  </li>

Output:

Font-Serif

This class is used to apply a websafe serif font-family like ui-serif, Georgia, Cambria, “Times New Roman“, Times, serif, etc.

  <li class="flex items-center justify-between px-4 py-2">
    <div>
      <div class="font-serif font-light text-5xl align-middle mb-2">Font Serif</div>
      <p class="font-serif text-md leading-tight">Dolores robot is a computational genius who performs calculations for various Binaryville businesses and organizations. In her spare time, Dolores has been noodling on the creation of the perfect web browser that will make all other browsers obsolete. We're rooting for you, Dolores!</p>
      <div class="text-xs font-mono font-light leading-tight text-gray-500 mt-2"><span class="font-bold">font-family</span>: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;</div>
    </div>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">font-serif</div>
  </li>

Output:

Font-Mono

This class is used to apply a websafe monospaced font-family like ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, “Liberation Mono“, “Courier New“, monospace, etc.

 <li class="flex items-center justify-between px-4 py-2">
    <div>
      <div class="font-mono font-light text-5xl align-middle mb-2">Font Mono</div>
      <p class="font-mono text-md leading-tight">Bubble Gum robot, or “Bubbles” for short, is from a family of track-footed robots that ¬originated from an experiment melding candy vending machines with robotics in the early 1980s. Bubbles is a favorite of Binaryville, not just because she generously dispenses candy, but also because she has one of the more "bubbly" personalities of the villagers.</p>  
      <div class="text-xs font-mono font-light leading-tight text-gray-500 mt-2"><span class="font-bold">font-family</span>: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;</div>
    </div>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">font-mono</div>
  </li>

Output

Full code:
The overall code will be attached to repo link.

Overall Output

Resources:
tailwind.css

Thank you for reading :), To learn more, check out my blogs on Flex Direction, Hackathons and Flex Wrap.
If you liked this article, consider following me on Dev.to for my latest publications. You can reach me on Twitter.

Keep learning! Keep coding!! 💛