Preview:
/* ./src/fonts.css */
@font-face {
  font-family: 'Karla';
  src: url('../assets/fonts/Karla-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Karla';
  src: url('../assets/fonts/Karla-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Karla';
  src: url('../assets/fonts/Karla-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
}


/* ./src/index.css */
@import './fonts.css';

@tailwind base;
@tailwind components;
@tailwind utilities;


// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js,jsx,ts,tsx}', './dist/index.html'],
  theme: {
    extend: {
      fontFamily: {
        karla: ['Karla', 'sans-serif'],
      },
    },
  },
  plugins: [],
};
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter