Hello Hello Hello Hello Hello Hello

--- # 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>

Hello

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.

@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 section
use 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