如何在 tailwind css 中将字体系列更改为 Lato？

Question

How to change font-family to Lato in tailwind css in my navbar? i tried to do something like font-family-lato but it didint work out can anyone can tell how to change it in my navbar text?

<nav class="bg--800 text-white py-4 flex items-center justify-between font-lato">
                <a href="#" class="font-bold text-xl">Logo</a>
                <ul class="flex">
                    <li class="mr-6">
                        <a href="#" class="text-base hover:text-orange-500">Home</a>
                    </li>
                    <li class="mr-6">
                        <a href="#" class="text-base hover:text-orange-500">About</a>
                    </li>
                    <li class="mr-6">
                        <a href="#" class="text-base hover:text-orange-500">Contact</a>
                    </li>
                </ul>
            </nav>

Answer 1

in tailwind configuration file:

fontFamily: {
      'Lato': ['Lato', 'sans-serif'],
    },

Don't forget to import the font in your CSS file.

Answer 2

Change Default font:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    font-family: Proxima Nova, system-ui, sans-serif;
  }
}

Change Font with class

module.exports = {
  theme: {
    fontFamily: {
      'sans': ['ui-sans-serif', 'system-ui', ...],
      'serif': ['ui-serif', 'Georgia', ...],
      'mono': ['ui-monospace', 'SFMono-Regular', ...],
      'display': ['Oswald', ...],
      'body': ['"Open Sans"', ...],
    }
  }
}

<div class="font-body"> Open Sans font </div>

Answer 3

If you want to change the font inside the Html file do

<h1 class = "font-['Lato']">Hello</h1>
<h1 class = "font-['Arvo']">Hello2</h1>

Refer Here for more information about setting and using font-family in Tailwind