How To Add Font In Javascript

How to Add together a Custom Google Font to a Next.js and Tailwind CSS App

By using the custom certificate file and configuring Tailwind CSS

Photo past Brett Hashemite kingdom of jordan on Unsplash

Choosing the right font is an essential part of whatever design. The font you choose tin have a huge bear upon on the bulletin, vox, and feeling of your website or application.

In this article, we volition take a look at how to add a custom Google font to a Next.js application using Tailwind CSS. This will include the following steps:

Ready a basic app
Choose a font
Create a custom document file
Add a font to Tailwind

Set up a bones app

To get started, we will create a new Next.js projection using create-next-app and add together Tailwind CSS.

To learn how to set this project up, check out the commodity below.

Once set up, we will add the following text to the index.js file to see the changes to our font.

          <div            className="flex flex-col h-screen justify-center items-center text-2xl">
            <p>Near earlier nosotros knew it, we had left the footing.</p>
</div>

If we run our projection, we volition see the default font looks like this.

Cull a font

Now the fun part. Caput over to https://fonts.google.com/ and cheque out the dissimilar fonts. The Google font catalog has many open up-source fonts that you can integrate into your application.

For this example, nosotros will cull two different fonts. One will exist a sans font to supervene upon the default, and one will exist to add equally a new custom utility. (We will comprehend more on this when we add the fonts to Tailwind in the final footstep.)

For the default sans font, I will utilize a font called Russo One.

For the custom font, I will use a font called Dancing Script.

Choosing the right fonts can be hard. Cheque out the article below for some communication on how to choose the all-time font for your website.

Create a custom certificate file

Once you have chosen your font, the next step will be to create a _document.tsx file in the pages folder.

Side by side.js allows y'all to create a custom document file that will augment your application's <html> and <trunk> tags. You can override the default document file by adding the following code into the _document.js file.

          import Document, { Html, Head, Master, NextScript } from 'next/document'class MyDocument extends Document {
              static async getInitialProps(ctx) {
              const initialProps = look Certificate.getInitialProps(ctx)
              render { ...initialProps }
              }
                          render() {
              render (
              <Html>
              <Head />
              <trunk>
              <Master />
              <NextScript />
              </body>
              </Html>
              )
              }
}
            export default MyDocument

We can then add the spider web font we want to apply past calculation a <link> tag in the <head> tag. By calculation this to the custom document file, we tin apply these fonts throughout the entire application. Supercede the <Caput /> in a higher place with the following code snippet:

          <Head>
            <link
            href="https://fonts.googleapis.com/css2?family=Russo+Ane"
            rel="stylesheet"
            />
            <link
            href="https://fonts.googleapis.com/css2?family=Dancing+Script"
            rel="stylesheet"
            />
</Head>

Replace "Russo+I" or "Dancing+Script" with the name of whatever fonts you want to apply in your project.

Add a font to Tailwind

The final step will be to update the tailwind.config.js file. Past default, Tailwind provides the following three font family utilities:

a cross-browser sans-serif stack
a cross-browser serif stack
a cantankerous-browser monospaced stack

We tin can update the default fonts by extending the fontFamily property of theme. We will also spread the residuum of the default theme of the font family sans onto the holding.

          const defaultTheme = require('tailwindcss/defaultTheme');                      module.exports            = {
            purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
            darkMode: false, // or 'media' or 'class'
            theme: {
              extend: {
              fontFamily: {
              sans: ['Russo One', ...defaultTheme.fontFamily.sans],
              },
              },
              },            
            variants: {
            extend: {},
            },
            plugins: [],
};

Now if you get back to your browser, you should run into the changes in your default font.

We tin also add together additional fonts outside of the three default font family utilities. I will add together another utility called fancy to the configuration and add Dancing Script as the font.

          theme: {
            extend: {
            fontFamily: {
            sans: ['Russo Ane', ...defaultTheme.fontFamily.sans],
            fancy: ['Dancing Script'],            
            },
            },
},

At present if nosotros go back to our alphabetize.js file, we can utilize the utility called font-fancy. This will allow the states to use the Dancing Script font.

          <div            className="flex flex-col h-screen justify-center items-center text-2xl">
            <p>Almost before we knew information technology, we had left the basis.</p>
            <p              className="font-fancy">
              Almost before nosotros knew it, we had left the ground.
              </p>            
</div>

Determination

Thank you for reading! I promise this article was helpful for you to add a custom font to your project.

Next.js and Tailwind CSS has been my favorite stack to use recently for building websites. It has been really fun learning more than about both technologies and seeing how they work together. Stay tuned for more articles coming soon!

If you want to larn how to add together dark way to your application, check out the commodity below.

More than content at plainenglish.io