The right way to use font from native information globally in Tailwind CSS ?

Tailwind CSS offers a set of default font households that you should use in your initiatives. These font households are outlined as utility lessons within the type of font-{family-name} and could be simply utilized to any HTML aspect.

These are the default fonts which are offered by the tailwind CSS:

• sans:  sans-serif font household, together with system fonts corresponding to Arial, Verdana, and sans-serif.
• serif: serif font household, together with system fonts corresponding to Occasions New Roman, Georgia, and serif.
• mono: monospace font household, together with system fonts corresponding to Courier New, Lucida Console, and monospace.

we will use them by simply together with their class identify within the HTML tags.

<p class="font-mono">
    It is a paragraph with a monospace font.
</p>

however tailwind CSS just isn’t solely restricted to those three fonts even you’ll be able to add your customized fonts domestically there aren’t any limitations to including customized fonts.

Why native fonts? 

• Your web site or software’s efficiency and loading time could be enhanced through the use of native fonts in Tailwind CSS.
• Through the use of domestically saved fonts, the browser doesn’t need to make further requests to load the fonts from an exterior server
• Moreover, utilizing native fonts can be sure that the font will probably be displayed accurately even when the exterior server is down or unavailable. It additionally can assist in case of a gradual web connection.

Syntax:

fontFamily:{
    glory: ["glory","sans-serif"],
    pop: ["pop","sans"],
}

For Including native fonts to your venture it’s important to comply with a number of steps. These steps are as follows

Step 1: Obtain the font domestically in your machine that you simply wish to use in your tailwind and Add the font information to your venture’s belongings(you can provide any identify as per your comfort) folder.

Step 2: Earlier than implementation, now we have to inform the tailwind the placement of the font and assign the identify to it. import the font information utilizing the @font-face rule.

Step 3: Add the fonts within the tailwind.config.js file to make use of the fonts within the venture and provides them the identify as you need but it surely’s really useful to present them the related names.

Step 4: use the desired font class for the customized font within the HTML tag . as a font-{family-name}

Folder construction :

The right way to use font from native information globally in Tailwind CSS

Instance 1: This instance reveals the right way to use font from native information globally in Tailwind CSS.

index.html

tailwind.config.js 

As you’ll be able to see that now we have included two fonts “pop”, and “glory” within the CSS file .ttf is the format of the fonts. In src embody the handle/location of the font that you’ve got domestically downloaded in your venture listing of the belongings folder.

enter.css

You must add your fonts as an array if one way or the other your specified font just isn’t discovered within the listing then the second goes to be utilized, e.g “glory” just isn’t discovered within the listing then the `sans-serif` going to use. See the category now we have added the pop  font with the identical identify as specified within the config file with the prefix font `font-pop`

Output: 

The right way to use font from native information globally in Tailwind CSS

Instance 2: This instance reveals the right way to use font from native information globally in Tailwind CSS.

tailwind.config.js 

enter.css

Output :

The right way to use font from native information globally in Tailwind CSS