Custom font integration in Tailwind - Mini Project: Build & Apply

Custom Font Integration with Tailwind CSS

📖 Scenario: You are building a simple webpage for a local bakery. The bakery wants a unique look by using a custom font called "SweetBakery" for its headings to make the site feel warm and inviting.

🎯 Goal: Create a webpage that uses the SweetBakery font for all headings and the default font for paragraphs. The font should be integrated using Tailwind CSS custom font configuration.

📋 What You'll Learn

Create a Tailwind CSS configuration that adds the custom font family named sweetbakery with the font 'SweetBakery', cursive.

Use the custom font sweetbakery for all <h1> and <h2> headings.

Use the default Tailwind font for paragraphs.

Include the @font-face rule in CSS to load the SweetBakery font from a local file /fonts/SweetBakery.woff2.

Ensure the webpage is responsive and accessible with semantic HTML.

💡 Why This Matters

🌍 Real World

Custom fonts help brands create unique and memorable websites that match their style and personality.

💼 Career

Web developers often need to integrate custom fonts using CSS and Tailwind to meet design requirements and improve user experience.

1

Setup HTML structure with headings and paragraphs

Create an HTML file with a <main> section containing an <h1> heading with the text Welcome to Sweet Bakery, an <h2> heading with the text Freshly Baked Every Day, and a <p> paragraph with the text Enjoy our delicious treats made with love..

Tailwind

Need a hint?

Use semantic HTML tags: <main>, <h1>, <h2>, and <p>.

2

Add @font-face rule to load SweetBakery font

In your CSS file, add an @font-face rule that defines the font family SweetBakery and loads the font from the local file /fonts/SweetBakery.woff2 with format woff2.

Tailwind

  Welcome to Sweet Bakery
  Freshly Baked Every Day
  Enjoy our delicious treats made with love.


/* Add your @font-face rule below */

Need a hint?

The @font-face rule lets you load a custom font from a file. Use font-family to name it and src to point to the font file.

3

Configure Tailwind CSS to add the custom font family

In the tailwind.config.js file, extend the theme.fontFamily to add a new font family named sweetbakery with the value ["'SweetBakery'", 'cursive'].

Tailwind

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        // Add your custom font family here
      }
    }
  }
}

Need a hint?

Use extend.fontFamily in tailwind.config.js to add your custom font family.

4

Apply the custom font to headings using Tailwind classes

In the HTML, add the Tailwind class font-sweetbakery to both the <h1> and <h2> elements to apply the custom font. Leave the paragraph without this class to keep the default font.

Tailwind

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sweetbakery: ["'SweetBakery'", 'cursive']
      }
    }
  }
}



  Welcome to Sweet Bakery
  Freshly Baked Every Day
  Enjoy our delicious treats made with love.


@font-face {
  font-family: 'SweetBakery';
  src: url('/fonts/SweetBakery.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

Need a hint?

Add the class font-sweetbakery to your headings to use the custom font.