Tailwind CSS tutorial #15: Font Family
Tags: webdev, css, tutorial, tailwindcss
Published: 2022-11-18 10:17:19

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-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](#font-serif) | `flex-row-reverse	` | `font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;`|
|[Mono](#font-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.
```html
  <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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9eie5lwj4f8d5frx3wl4.png)

## **Font-Serif** 
This class is used to apply a websafe serif font-family like ui-serif, Georgia, Cambria, “Times New Roman“, Times, serif, etc.
```html
  <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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k0mxvscbvkwfljnk9d82.png)

## **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.
```html
 <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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5l67dqk8smchkzkjeu4c.png)

**Full code:**
The overall code will be attached to [repo ](https://github.com/codewithshubhi/learn-tailwind-css/blob/main/Font%20Family)link.

**Overall Output**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xup39l7nc4re2j2bwops.png)

**Resources:**
[tailwind.css](https://tailwindcss.com/docs)

Thank you for reading :), To learn more, check out my blogs on [Flex Direction](https://dev.to/shubhicodes/tailwind-css-tutorial-13-flex-direction-i8j), [Hackathons](https://dev.to/shubhicodes/all-about-hackathons-how-to-find-participate-win-42kk) and [Flex Wrap](https://dev.to/shubhicodes/tailwind-css-tutorial-14-flex-wrap-kee).
If you liked this article, consider following me on [Dev.to](https://dev.to/shubhicodes) for my latest publications. You can reach me on [Twitter](https://twitter.com/heyShubhi).

Keep learning! Keep coding!! 💛