如何在 tailwind css 中將字體系列更改為 Lato？

Question

如何在我的導航欄中將字體系列更改為順風 css 中的 Lato？ 我嘗試做一些類似 font-family-lato 的事情，但它沒有成功任何人都可以告訴我如何在我的導航欄文本中更改它嗎？

<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

在順風配置文件中：

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

不要忘記在 CSS 文件中導入字體。

Answer 2

更改默認字體：

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

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

使用 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

如果要更改 Html 文件中的字體，請執行

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

有關在 Tailwind 中設置和使用字體系列的更多信息，請參閱此處