tailwind use font from local files globally

@Juan Marcos’ answer is correct but slightly deprecated. As of v2.1.0, Tailwind recommends in their docs to use the @layer directive for loading local fonts:

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

@layer base {
  @font-face {
    font-family: Proxima Nova;
    font-weight: 400;
    src: url(/fonts/proxima-nova/400-regular.woff) format("woff");
  }
  @font-face {
    font-family: Proxima Nova;
    font-weight: 500;
    src: url(/fonts/proxima-nova/500-medium.woff) format("woff");
  }
}

By using the @layer directive, Tailwind will automatically move those styles to the same place as @tailwind base to avoid unintended specificity issues.

Using the @layer directive will also instruct Tailwind to consider those styles for purging when purging the base layer. Read our documentation on optimizing for production for more details.

See: https://tailwindcss.com/docs/functions-and-directives#layer

See also: Customizing the default font

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)