Illustrating Custom Fonts with Tailwind CSS

Using Default Tailwind Fonts

This text uses the default font-sans class.

This text uses the default font-serif class.

This text uses the default font-mono class.

Simulating Custom Fonts (Conceptual)

In a project with a build step, you would define custom font families in your tailwind.config.js file. The CDN version of Tailwind doesn't read this file. However, we can demonstrate the *concept* of applying custom font names.

This text uses font-['Roboto',_sans-serif] . 'Roboto' is imported via Google Fonts in the <head>. In a config, you might alias this as font-my-sans .

This text uses font-['Lobster',_cursive] for a display style. 'Lobster' is imported via Google Fonts. In a config, you might alias this as font-my-display .

Example tailwind.config.js :

(This configuration is conceptual for CDN use but standard for build setups.) 

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'my-sans': ['Roboto', 'Helvetica', 'Arial', 'sans-serif'],
        'my-display': ['Lobster', 'cursive'],
        // Add other custom fonts here
      },
    },
  },
  plugins: [],
}

If you had this config, you would then use classes like font-my-sans or font-my-display . Crucially, the font files for 'Roboto' and 'Lobster' would still need to be linked in your HTML or CSS.

Remember: Tailwind defines *how* to apply the font family, but your browser needs access to the actual font files.