- Published on
How to Use Custom Fonts in TailwindCSS + NextJS
- Authors
--- # Introduction
This blog post provides a comprehensive guide on incorporating custom fonts into a React application utilizing Tailwind CSS. Tailwind CSS, a utility-first CSS framework, offers extensive customization options and seamlessly integrates with contemporary JavaScript frameworks such as React. We'll delve into various methods of adding custom fonts, enhancing the aesthetics and user experience of your React application.
Google Font of NextJS
If you are using Next.js, you should consider the its build-in CSS feature, next/font
, which simplifies the process of adding custom fonts to your application, and comes with automatic optimization. Here's how you can use it with Google Fonts:
- First, import your favorite font from Google Fonts. You could either go to the Website, or look up in the index file of the
@next/font/google
module
import { Pangolin } from 'next/font/google'
const pangolin = Pangolin({
subsets: ['latin'],
display: 'swap',
variable: '--font-pangolin',
weight: '400',
})
- add it to the classNames of the root component. For example:
app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html
lang={siteMetadata.language}
className={`${pangolin.variable} ${zcool_kuaile.variable} scroll-smooth`}
suppressHydrationWarning
>
...
</html>
)
}
- add it to the tailwind's font families. In your
tailwind.config.js
update tailwind config
module.exports = {
// existing config...
theme: {
extend: {
fontFamily: {
'pangolin': ['var(--font-pangolin)', ...fontFamily.sans],
// other existing fontFamily configurations...
},
// other existing configurations...
},
},
// existing config...
}
We are passing an array here because of fallback mechanism. In case the browser doesn't support our font, it automatically choose the next font in the list. The three dots in ...fontFamily.sans
expand the array of sans font family to our font array.
- Now, you can use
font-pangolin
as a className in any textual element.
<span className="font-pangolin"> Hello </span>
Local font
Download your favorite font from the internet. In this guide, I will use one of the constructed scripts by HoYoverse.
- Download a font from HoYo-Glyphs
- put it somewhere under the
static
folder.
add the font in any of the css file you are currently using
- make sure the format is matching the font file. For example,
.tff
stands for truetype and.otf
stands for opentype, etc.
- make sure the format is matching the font file. For example,
@font-face {
font-family: 'hsr';
src: url('/static/fonts/StarRailNeue-Sans-Regular.ttf') format('truetype');
}
add it to
tailwind.config.js
, see step 3 of last sectionuse it as a className
<span className="font-hsr"> aaron abduct accidental adjacent afghan after aint anaheim and anybody although allotted ambidextrous amend announced aqua arrangement ask aspin ate attitude authorised avery award axolotl ello </span>
aaron abduct accidental adjacent afghan after aint anaheim and anybody although allotted ambidextrous amend announced aqua arrangement ask aspin ate attitude authorised avery award axolotl ello