How we can use @ font-face in Less

Using @font-face in Less functions similarly to native CSS. @font-face is a highly valuable rule that enables you to customize fonts, thereby enhancing the flexibility and visual appeal of website design.

Step 1: Introducing Font Files

First, ensure you have the necessary font files, commonly available in formats such as .woff, .woff2, .ttf, .svg, and .eot. Place these files in an appropriate location within your project, such as a directory named fonts.

Step 2: Defining @font-face in Less Files

In Less files, you can define @font-face just as you would in CSS. Here is a basic example:

less
@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/MyCustomFont.woff2') format('woff2'),
       url('fonts/MyCustomFont.woff') format('woff'),
       url('fonts/MyCustomFont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Step 3: Using the Font

After defining @font-face, you can apply this custom font in other sections of your Less file. For example:

less
body {
  font-family: 'MyCustomFont', sans-serif;
}

Example

Suppose you have a project requiring a custom font named 'Roboto'. First, download the Roboto font files and place them in the /assets/fonts/ directory. Then, in your Less file, define @font-face:

less
@font-face {
  font-family: 'Roboto';
  src: url('assets/fonts/Roboto-Regular.woff2') format('woff2'),
       url('assets/fonts/Roboto-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

Next, in Less, you can apply the Roboto font to specific HTML elements:

less
h1 {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

Notes

• Verify that the font license permits its use on your website.
• Use multiple formats to ensure optimal compatibility across different browsers.
• Leverage Less variables to streamline the management of font file paths.

Employing @font-face can significantly elevate your website's interface, allowing for more diverse and personalized design.