@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