Web Fonts Tutorial

Web fonts enhance the typography of your website, providing more design flexibility. This tutorial covers how to use Google Fonts and custom fonts with Tailwind CSS.

Using Google Fonts

Google Fonts provides a wide selection of fonts that you can easily integrate into your website.


<!-- Google Font Link -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Example: Google Font Integration


<body class="font-roboto">
    <!-- Content here -->
</body>

This text uses the Roboto font from Google Fonts.

Using Custom Fonts

Custom fonts can be used by including font files and defining them with the `@font-face` rule.


/* Custom Font Definition */
@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/MyCustomFont.woff2') format('woff2'),
         url('fonts/MyCustomFont.woff') format('woff');
    font-display: swap;
}

/* Applying the Custom Font */
body {
    font-family: 'MyCustomFont', sans-serif;
}

Example: Custom Font Integration


<link rel="stylesheet" href="styles.css">
<body class="font-custom">
    <!-- Content here -->
</body>

This text uses a custom font defined in `styles.css`.

Tailwind CSS Configuration

When using Tailwind CSS with custom fonts, you can configure your `tailwind.config.js` to include custom font families.


/* tailwind.config.js */
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        roboto: ['Roboto', 'sans-serif'],
        custom: ['MyCustomFont', 'sans-serif'],
      },
    },
  },
  plugins: [],
}

Example: Tailwind Configuration


<body class="font-custom">
    <!-- Content here -->
</body>

This text uses the custom font configured in Tailwind CSS.