default image

Adding Local Fonts or Google Fonts In Tailwind CSS For WordPress Theme

Posted on by imranhsayed

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

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 YourNameSpace;

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' );

Using the font

body {
  @apply font-lato;
}

// or
body {
  @apply font-lato-bold;
}

or

<body class="font-lato"></body>

Output:

That’s all folks!

Leave a Reply