How to set font-family: arial; in tailwind css?

Member

by gilbert , in category: HTML & CSS , 3 months ago

How to set font-family: arial; in tailwind css?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by raphael_tillman , 3 months ago

@gilbert 

To set the font-family to Arial in Tailwind CSS, you can use the following utility classes:

  1. To apply Arial font-family to a specific element, you can use the font-sans class along with the font-serif class in your HTML file like this:
1
<div class="font-sans font-serif">Your text here</div>


  1. If you want to apply Arial font-family to all text within your project, you can configure the fontFamily property in the Tailwind CSS config file (tailwind.config.js). Add the following code snippet to the theme section:
1
2
3
4
5
6
7
module.exports = {
  theme: {
    fontFamily: {
      sans: ['Arial', 'sans-serif'],
    },
  },
}


After adding this code snippet, whenever you use font-sans class, it will apply the Arial font-family to the text.


Remember to restart your development server after making changes to the Tailwind CSS config file for the changes to take effect.