Adding Local Fonts or Google Fonts In Tailwind CSS With WordPress

In this blog, we will learn about how to add local fonts in TailwindCSS.
There are several reasons why you should include fonts locally. Watch this video to know more.

Step 1: Download the Fonts Locally

Use Google Fonts helper

google webfonts helper

Place the fonts into the fonts directory.

Step 2: Copy the fonts code into fonts.scss

/* lato-regular - latin */
@font-face {
   font-family: 'Lato';
   font-style: normal;
   font-weight: 400;
   src: url('lato-v20-latin-regular.eot'); /* IE9 Compat Modes */
   src: local(''),
   url('lato-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
   url('lato-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
   url('lato-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
   url('lato-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
   url('lato-v20-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
}
/* lato-700 - latin */
@font-face {
   font-family: 'Lato Bold';
   font-style: normal;
   font-weight: 700;
   src: url('lato-v20-latin-700.eot'); /* IE9 Compat Modes */
   src: local(''),
   url('lato-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
   url('lato-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
   url('lato-v20-latin-700.woff') format('woff'), /* Modern Browsers */
   url('lato-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
   url('lato-v20-latin-700.svg#Lato') format('svg'); /* Legacy iOS */
}

Step 3: Add the font configuration in tailwind.config.js

module.exports = {
   theme: {

      extend: {
         fontFamily: {
            'lato': [ "Lato", 'Helvetica', 'Verdana', 'Tahoma', 'sans-serif' ],
            'lato-bold': [ "Lato Bold", 'Helvetica', 'Verdana', 'Tahoma', 'sans-serif' ],
         },
}}};

Step 4: Enqueue the file in WordPress

namespace YouNameSpace;

function asset_loader() {
   // Register.

   wp_register_style( 'your-fonts', THEME_DIST_URI . 'fonts/fonts.css', [],  filemtime( THEME_DIST_PATH . 'fonts/fonts.css' ) );

   // Enqueue global assets.
   wp_enqueue_style( 'your-fonts' );

}

add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\\asset_loader' );

That’s all folks!