Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
November 18, 2022 10:17 am GMT

Tailwind CSS tutorial 15: Font Family

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

Font Family

Format

flex-{sans|serif|mono}

AlignmentTailwind ClassCSS Property
Sansfont-sansfont-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";
Serifflex-row-reversefont-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
Monoflex-colfont-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:
Image description

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:
Image description

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
Image description

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

Overall Output
Image description

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!!


Original Link: https://dev.to/shubhicodes/tailwind-css-tutorial-15-font-family-fee

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To